New theme for 3.next -- Twenty Eleven

[matt]

It's been a few years since we did this (#9015) but let's track the effort for the Twenty Eleven theme, hopefully making 3.2, here.

Main goals besides what we've already done in Twenty Ten:

• To be different from Twenty Ten, aesthetically.
• Is a good showcase of WP's headline features.
• Clean, fast to load, and with best-practice markup.

Nice to have, but optional, improvements:

• Ability to have random rotating headers. (Core improvement to custom header functionality, see #17240.)
• Color and layout options.
• More post formats. (Currently supports Asides, Links, and Galleries.)
• CMS-style slider home page option.

Some people will prefer the design of Twenty Ten, which is still excellent, over Twenty Eleven, but that's okay. We'll have something new next year.

Fix wrong html5.js path in header.php

Remove excessive whitespace

Remove excessive whitespace and standardise on \r\n

Make showcase.php query usage more efficient

Cross-referencing the commit:

matt in [17669]

Importing Duster theme, first pass at a candidate for twentyeleven theme.

Nice to have, but optional, improvements it'd be nice to have:

• Ability to have random rotating headers. (Core improvement to custom header functionality.)
• Color and layout options.
• More post formats. (Currently supporst Asides, Links, and Galleries.)
• CMS-style slider home page option.

Welcome, TwentyEleven n?\195?\169e Duster. :) Track at #17198.

Line endings should be svn:eol-style native, so \r\n or similar shouldn't matter. We should make the text files have Windows-style endings though, if they don't already.

(In [17670]) Set svn:eol-style on twentyeleven. See #17198

Replying to matt:

Line endings should be svn:eol-style native, so \r\n or similar shouldn't matter. We should make the text files have Windows-style endings though, if they don't already.

I set svn:eol-style on the files - I suspect you may want to change it from native on readme and license based on this comment?

(In [17671]) Fix html5 js link. See #17198 props Jayjdk

(In [17672]) Provide more arguments to the widgets on the 404 page so as to avoid notices. See #17198

I submitted this patch which has been picked up for 3.2 which should fix the notice issues in TwentyEleven: #16761

Replying to dd32:

Nice to have, but optional, improvements it'd be nice to have:

• CMS-style slider home page option.

What exactly are you looking for here? Something like on  http://www.fiftyandfifty.org/ or like  http://xavisys.com or ???

Additional conditional IDs for the html element

17672.html-id.diff adds conditional ids for IE6 and IE8 for users who will be using Twenty Eleven as a parent theme and may have use for those ids (an id for IE7 was already present in Duster).

showcase.php cleanup, 2nd pass

17198.showcase.2.diff adds full loop functionality back to the $featured query since we can't rely on sticky posts being available (may be trashed) and ensures all loop actions are fired correctly, while avoiding invoking it at all when no stickies are set.

Also makes better use of $feature_class and uses the native current post counter in the $recent query.

iandstewart, 3.2 wil drop IE6 support, I think 2011 should drop it too.

3.2 is marked as EOL for IE6 (for the admin), however themes (front end) should still support it so they have best compatibility. There are still people that are stuck in IE6. For them the admin would have limited functionality but the front end site should work.

Support for Status and Quote Formats

17672.status-quote-formats.diff adds support for Status and Quote format display, excludes those formats from the Showcase Recent Posts, and adds them to the posts included in the custom "Ephemera" widget. It also adds CSS section headers for each Format and the 404 styles in style.css.

Allows the /twentyeleven/ directory to be added, for anyone using the WordPress Beta Tester plugin, and updating nightly.

I was hoping the above patch would solve the /twentyeleven/ directory being included in any updates used from within your dashboard, if you used say the WordPress Beta Tester plugin. Turns out I already had the theme there, after I uploaded it myself. But I'm finding that /twentyeleven/ isn't included when I went from 3.1.1 to 3.2-bleeding, so I can't try it out online!

I was hoping the above patch would solve the /twentyeleven/ directory being included

I'll take care of that tomorrow

Replying to dd32:

I was hoping the above patch would solve the /twentyeleven/ directory being included

I'll take care of that tomorrow

Cool, thanks. Obviously a little more work needed than adding a line of code? ;)

Adding that line should've done it. However, it should be fine as '3.2', and it also needs to be set in the file -during- the 3.1.x -> 3.2 update, ie. within the update zip. There may be other things at play here though, so I'll check it during testing.

Minor style fixes (overflow) for international blogs and replacing em dash with the proper CSS value for the entity.

Replying to dd32:

• Ability to have random rotating headers. (Core improvement to custom header functionality.)

Added #17240 to track work on new random image rotation feature. This should be available to all themes (not just the new default theme).

Added #17242 to track work for allowing custom height for header images.

(In [17714]) Twenty Eleven: strip trailing spaces, props kawauso - see #17198

(In [17717]) Twenty Eleven: add support for Status and Quote formats, props iandstewart - see #17198

(In [17718]) Twenty Eleven: add additional conditional IDs for the html element, props iandstewart - see #17198

(In [17719]) Twenty Eleven: minor style fixes (overflow) for international blogs and replacing em dash with the proper CSS value for the entity. Props matveb, see #17198

(In [17720]) Twenty Eleven: move widgets.php into /inc - see #17198

(In [17721]) Twenty Eleven: functions.php cleanup and introduction of theme options; see #17198

• Cleanup functions.php, adding comments and function_exists() checks following Twenty Ten's example
• Theme option for choosing an alternate (dark) color scheme. It currently only loads a placeholder CSS file with dark styles to follow.
• Theme option for selecting a link color that loads an internal style block for resetting link colors. An updated style.css will follow to take advantage of this.
• Theme options for selecting an alternate layout. Adds a class to the body element. An updated style.css will follow to take advantage of this.

Can we set a default case for the switch statement in the twentyeleven_comment() function? It would be as simple as moving the first check down to the bottom and changing the case to:

default :

Currently, this function handles the comment, trackback, and pingback comment types. All other comment types are skipped. By default, WordPress core functionality handles custom comment types just fine.

This is also an issue in the TwentyTen theme and now many, many themes being submitted to the theme repository because so many theme authors just copy/paste code from the default WordPress theme.

Replying to greenshady:

Can we set a default case for the switch statement in the twentyeleven_comment() function?

Makes sense to me, plus it's a good practice in programming in general to have a default case for switch statements. Patch looks good, thanks Justin.

(In [17722]) Twenty Eleven: set default case for switch statement in the twentyeleven_comment(), props greenshady - see #17198

(In [17723]) Twenty Eleven: fix spacing and add a few missing esc_attr() calls in widgets.php - see #17198

Related to Twenty Eleven (but should work with any theme), I added a patch for #17240 that will load a random image from the theme's registered header images.

Note: Twenty Eleven only has one header image right now (more coming soon), so test it out with Twenty Ten.

First pass at print styles for Twenty Eleven in r17726

(In [17729]) Twenty Eleven: add first batch of new header images, courtesy of the immeasurable photomatt archives - see #17198

(In [17732]) Twenty Eleven: theme options - see #17198

• First pass at Link Color CSS rules
• Add new function to return default values
• Implement better validation for hex color value
• Fix missing esc_attr()

(In [17733]) Rewrite of Twenty Eleven theme-options.php. Including:

• Full inline documentation.
• Enqueue scripts/styles on admin_enqueue_scripts and use hook_suffix rather than GET[page]
• Add filters to twentyeleven_color_schemes(), twentyeleven_layouts(), which necessitates adding a thumbnail URL value here, rather than generating them in the form.
• Add a twentyeleven_default_theme_options filter.
• Remove manual check for REQUEST[settings-updated], instead using settings_errors(), since we're using options.php.
• Abstract out the default link color, rather than hardcoding it in certain places.
• Use checked().
• Rename some variables and functions for clarity.
• Remove unnecessary functions twentyeleven_current_layout() and twentyeleven_current_color_scheme(), as we already have twentyeleven_get_theme_options().
• Add a twentyeleven_color_schemes action to allow for enqueueing custom color schemes.
• Add a twentyeleven_layout_classes filter, to allow filtering what gets sent back to body_class().
• Hook into wp_enqueue_scripts rather than wp_print_styles for enqueueing the color stylesheet.
• Rewrite the register_setting() callback to start from scratch with an empty array. Improve the link_color logic.
• Use submit_button().
• Use esc_attr() rather than esc_attr_e() for non-translations.

TODO:

• Implement settings sections/fields logic to allow extension of the options page.
• Consider re-doing this in a class. It'll be cleaner.
• Store a DB version so we can do an add_option(), rather than calling get_option() with defaults.

see #17198.

(In [17734]) Twenty Eleven:

• Use add_option(), rather than get_option() with defaults, to prevent notoption queries.
• Add twentyeleven_theme_options_validate filter, that way one doesn't need to add a filter to sanitize_option_\$option to allow more options in.
• Some inline doc modifications and additions.

see #17198.

(In [17735]) Move files in inc/theme-options up one level. see #17198.

(In [17737]) Twenty Eleven: Fix up the color picker JS. Use a separate color swatch rather than the input background. While cool, it doesn't have suffficient contrast. Also set farbtastic as a JS dependency. see #17198.

(In [17739]) More Twenty Eleven cleanup and add the comment-awaiting-moderation class. see #17198. see #15206 for history on the CSS class.

I've created #17267 for twentyeleven_url_grabber().

(In [17740]) Rename twentyeleven_color_schemes hook to twentyeleven_enqueue_color_scheme, so its purpose is clear. Also rename twentyeleven_color_styles() to twentyeleven_enqueue_color_scheme(), and twentyeleven_link_color() (which sounds like a getter) to twentyeleven_print_link_color_style(). Some tidying in twentyeleven_layout_classes(). see #17198.

Replying to nacin:

Fix up the color picker JS. Use a separate color swatch rather than the input background. While cool, it doesn't have suffficient contrast.

Farbtastic has the contrast built in, but we were calling it wrong. I'll fix it up — the color change on the input element is the intended interaction, and much cleaner and simpler than the extra swatch.

Replying to lancewillett:

Farbtastic has the contrast built in, but we were calling it wrong. I'll fix it up — the color change on the input element is the intended interaction, and much cleaner and simpler than the extra swatch.

I'd be interested to see a patch. I've seen that behavior before, but it's not what we do elsewhere in core, and I don't think it would be sufficiently high-contrast per accessibility standards. To be honest I found it annoying and tough to read even when using light colors with the black text.

(In [17752]) Twenty Eleven: First pass at styles to support the theme option for alternate layouts; See #17198

Sample of how to implement the color contrast with farbtastic on the input element directly

Replying to nacin:

it's not what we do elsewhere in core, and I don't think it would be sufficiently high-contrast per accessibility standards.

(Idea of how I'd do it on the input element is in "farbtastic-color-input.diff" patch — purely as an example.)

Good points, Nacin. Looking at Background color chooser and Header text color chooser it makes sense to match the same UI and interaction. That means we'll need to use a button instead of text link for the "Select a color" action.

Talking it over with Ian, he likes the swatch, too. But suggests we make it a link so it would also open the color selector.

Replying to lancewillett:

Looking at Background color chooser and Header text color chooser it makes sense to match the same UI and interaction.

Actually, Background uses a text link. We'll need to patch that up, too.

(In [17754]) Twenty Eleven: theme options - see #17198

• Make color swatch clickable to open palette
• Change color picker link to a submit button to match existing UI

(In [17755]) Twenty Eleven: make sure that link color options set in theme-options.php will override showcase.php recent posts and ephemera widget link colors; See #17198

(In [17756]) Twenty Eleven: First pass at dark color scheme w/ simplification of borders above and below the menu; See #17198

(In [17759]) Escape urls in the Epherma widget. see #17198.

(In [17760]) Twenty Eleven: update background color of comment arrows so they're visible, props iandstewart - see #17198

(In [17761]) Twenty Eleven: style.css cleanup and Showcase template improvements, props matveb - see #17198

• Add full support for the featured slider powered by JS (except auto-slide)
• Change the title hover state of large stickies to white
• Prevent plain text posts from being displayed transparently over images
• Update slider featured image size to 500x300
• Add comment blocks to showcase.php

Proper comment for theme_options_render_page function

(In [17772]) Twenty Eleven: Simplified post author highlighting and comment arrow images for the dark color scheme comments; See #17198

In [17775]:

Twenty Eleven: improve calls to get_header_image() - see #17240 and #17198

In [17776]:

Twenty Eleven: introduce image post format and miscellaneous style fixes, props matveb and iandstewart - see #17198

In [17787]:

Twenty Eleven: updated DocBlock comments following Twenty Ten's example; See #17198

In [17788]:

Twenty Eleven: Post Format headings and CSS cleanup; See #17198 props matveb

Replying to iandstewart:

Twenty Eleven: Post Format headings [...]

Not sure if it's up for discussion, but I'm not sure what I think of them?

Yeah, fair enough, I like that we're trying to make it look a lot different from TwentyTen, but I feel they're just out of place within TwentyEleven. Would having icons, or similar, not make for a better change?

Small but vexing question: the Theme Options Admin Screen in Twenty Eleven has only two generic links in the contextual help tab... Does the theme-options file in the theme folder in wp-content call something in wp-admin that could be fixed to apply to all themes that have theme options? (Like Background and Header do) I think it would be easier, but less optimal to add help tab content in the Twenty Eleven file itself.

And, yes, this screen provides highly obvious options, but we could say it changes colors and layout and then come up with a few nuggets/links for people who wanted to make more such changes, go under the hood, use the theme editor, modify some CSS, create a child theme...

In [17790]:

Twenty Eleven: style improvements, RTL, and more header images - see #17198

• Add two more default header images (see r17729)
• Change the featured posts limit from 4 to ten in front page slider
• First pass at robust RTL styles
• Pingback style fixes
• Wider comment form for the one column layout
• Add CSS comment with instructions on how to remove the post format headings

In [17791]:

Twenty Eleven fixes - see #17198

• RTL tweaks and fixes
• Misc style fixes
• Fix tags output, comment links, and remove trailing spaces from translatable strings

In [17802]:

Twenty Eleven updates and fixes, see #17198

• Add explanatory comments in all templates, following Twenty Ten's example
• Stick with twentyeleven_ for prefixing filter names
• Use post format content templates in search results
• First pass at adding a template for adding a sidebar to pages
• Add a featured post header to standard sticky posts
• Style fixes: print media, comment styles for pages with sidebars, color of meta links on image post format

In [17803]:

Twenty Eleven: update description and tag list - see #17198

The patch above corrects the inline documentation for calling the Post Format, and creating seperate templates within a Child Theme! (s/loop/content/)

In [17804]:

Make twentyeleven the default theme. see #17198

In [17816]:

Twenty Eleven: first pass at visual editor styles with RTL editor styles to come; See #17198

In [17819]:

Twenty Eleven: correct typo in inline documentation props markmcwilliams; See #17198

Replying to iandstewart:

(In [17752]) Twenty Eleven: First pass at styles to support the theme option for alternate layouts; See #17198

Support for alternate layouts is not complite, missing some layouts:

• sidbar-content-sidebar (the most important layout)

• sidbar-sidebar-content

• content-sidbar-sidebar

function twentyeleven_layouts() {
	$layout_options = array(
		'content' => array(
			'value' => 'content',
			'label' => __( 'One-column, no Sidebar', 'twentyeleven' ),
			'thumbnail' => get_template_directory_uri() . '/inc/images/content.png',
		),
		'content-sidebar' => array(
			'value' => 'content-sidebar',
			'label' => __( 'Content on left, Sidebar on right', 'twentyeleven' ),
			'thumbnail' => get_template_directory_uri() . '/inc/images/content-sidebar.png',
		),
		'sidebar-content' => array(
			'value' => 'sidebar-content',
			'label' => __( 'Content on right, Sidebar on left', 'twentyeleven' ),
			'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-content.png',
		),
		'sidebar-content-sidebar' => array(
			'value' => 'sidebar-content-sidebar',
			'label' => __( 'Content on center, two Sidbars', 'twentyeleven' ),
			'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-content-sidebar.png',
		),
		'content-sidebar-sidebar' => array(
			'value' => 'content-sidebar-sidebar',
			'label' => __( 'Content on left, two Sidebar on right', 'twentyeleven' ),
			'thumbnail' => get_template_directory_uri() . '/inc/images/content-sidebar-sidebar.png',
		),
		'sidebar-sidebar-content' => array(
			'value' => 'sidebar-sidebar-content',
			'label' => __( 'Content on right, two Sidebar on left', 'twentyeleven' ),
			'thumbnail' => get_template_directory_uri() . '/inc/images/sidebar-sidebar-content.png',
		),
	);

	return apply_filters( 'twentyeleven_layouts', $layout_options );
}

missing layouts

In [17830]:

Twenty Eleven: adding RTL editor styles and tighter header height - see #17198

Replying to ramiy:

Support for alternate layouts is not complite, missing some layouts:

Twenty Eleven has a single sidebar, so the layouts you mentioned aren't applicable.

Replying to iandstewart:

In [17788]:

Twenty Eleven: Post Format headings and CSS cleanup; See #17198 props matveb

Hi @iandstewart! I'm not sure how to submit a patch.. So, I'll comment here. Please make the post format headings ready for i18n. Example:

<h2 class="entry-format"><?php _e( 'Aside', 'twentyeleven' ); ?></h2>

Thanks!

This is more of a design preference. Is there an option to keep the sidebar active on single.php instead of having it no longer there? I've never been crazy about the look of the default one-column width/centering in Twenty Ten and it seems to be carrying over to Twenty Eleven. I'd suggest just keeping the widgets on single.php by default.

When header text is disabled, the search is over the navigation, doesn't look good:  http://d.pr/z0c1

Replying to nickbohle:

I'm not sure how to submit a patch.

It's fun and easy. See  http://codex.wordpress.org/Reporting_Bugs#Patching_Bugs and we suggest also following along at  http://patcheswelcome.wordpress.com/.

Replying to jason@…:

This is more of a design preference. Is there an option to keep the sidebar active on single.php instead of having it no longer there?

There isn't an option on posts for including a sidebar in Twenty Eleven but there is an optional custom page template for pages that includes a sidebar.

Replying to nickbohle:

Please make the post format headings ready for i18n.

Can do and will do. Thanks for noticing they were missing.

Replying to iandstewart:

There isn't an option on posts for including a sidebar in Twenty Eleven but there is an optional custom page template for pages that includes a sidebar.

So I guess that's pretty definitive to leave off widgets on single.php? While aesthetically pleasing I think it may be too brazen for most WordPress users to suddenly lose one of the most crucial WP content areas on post pages. It's easy enough for me to put it back in as a developer but I think it will be a turnoff to regular bloggers if there's no easy/non-code option to choose whether to display widgets on posts. So much important stuff happens in widgets (ads, widget context, secondary navigations etc.). I think widgets are just as important on post pages as anywhere else (actually I'd argue they can be even more important on post pages for some cases). Just some food for thought. I love the theme and will use it and just put the sidebar back in for my child themes. But I'm just making this suggestion to save me, other developers and bloggers a little time as I can't think of any theme I'd make for a client that wouldn't utilize a sidebar on post pages. If the majority agrees with me I'm happy to adjust the single.php template and modify the CSS and contribute that in the appropriate place :-)

Replying to jason@…:

Replying to iandstewart:

There isn't an option on posts for including a sidebar in Twenty Eleven but there is an optional custom page template for pages that includes a sidebar.

While aesthetically pleasing I think it may be too brazen for most WordPress users to suddenly lose one of the most crucial WP content areas on post pages.

Twenty Eleven, like Twenty Ten, has footer widget areas that appear above the footer on every page, post. Essential widgets could live there if they always need to appear.

I'm taking a more design practical approach. If you're selling ads on your blog, putting them in the footer is just not going to cut it. I really feel pulling the sidebar from the single.php is going to be a deal-breaker for non-developer bloggers. If there's a good rationale for taking it out by default I'm all ears.

Change options to settings

Suggesting change from Theme Options to Theme Settings. Patch attached.

There's also been a discussion to change "Theme Options" to "Colors & Layout".

Replying to nacin:

There's also been a discussion to change "Theme Options" to "Colors & Layout".

Not a future-proof idea. What would you call it if more options were to be added in the future?

"Theme Options" is the standard label, and it's what core calls them (see "edit_theme_options" capability, for example.)

Replying to jason@…:

[...] If there's a good rationale for taking it out by default I'm all ears.

Part of the rationale for it was to put the content and comments on prime focus, while also allowing for layout flexibility when creating said content: see  http://twentyelevendemo.wordpress.com/a-parent-page/

Added #17359 for allowing tags for features introduced to Twenty Ten (and still enabled in Twenty Eleven).

In [17845]:

Twenty Eleven fixes, props matveb - see #17198

• Add padding to the menu when the search input is in menu bar
• Improve search input behavior when located in menu bar (also props ocean90)
• i18n for post formats headings (also props nickbohle)
• Small style fix for images

Replying to matveb:

Part of the rationale for it was to put the content and comments on prime focus, while also allowing for layout flexibility when creating said content: see  http://twentyelevendemo.wordpress.com/a-parent-page/

I see. I hadn't tried out those types of blockquotes and images. It is quite elegant. I think allowing users to have a choice of template in the admin for single.php may still be the best bet. I already use a plugin for this so I guess I'll just have to bundle that with sites I deliver for clients.

In [17846]:

Twenty Eleven: showcase template improvements - see #17198 (props kawauso for patches)

• Only show "featured-posts" area if there are published sticky posts.
• If there is only one sticky, hide the slider and just display the single featured post.

In [17847]:

Twenty Eleven: fix changes in r17846, props nacin - see #17198

• Simplify WP_Query call to pass args directly
• Don't use Yoda Conditions for <, >, <=, >= as they can be hard to read (ref:  http://codex.wordpress.org/WordPress_Coding_Standards#Yoda_Conditions)
• Fix typo in query args

Replying to lancewillett:

"Theme Options" is the standard label, and it's what core calls them (see "edit_theme_options" capability, for example.)

Most if not all Settings in core are handled with *option* functions. A number of plugins provide links to their Settings. Just looking for consistency.

Please see #14224, #14225, #14226, #14363, #17362, #17363 and #17364 for making WordPress with Twenty Ten or Twenty Eleven compatible when served as application/xhtml+xml.

By the way, the post time is hidden in Twenty Eleven (it was displayed via the title attribute in Twenty Ten). Is it intended?

The inclusion of a new default theme with 3.2 is complete. Now that we are starting beta, please use normal procedure to report bugs: one per ticket.