Twenty Eleven Sidebar

Automattic made the WordPress Twenty Eleven theme fluid and adaptable to various screen resolutions, but the default CSS and page templates make a few compromises, in the name of small device support.

Where is the sidebar? WordPress Twenty Eleven theme index page vs. single-page view

One of these compromises is the individual post page, where Automattic does away with the sidebar. The single column of content works great on tiny screens, but if you are already supporting mobile devices with a plugin, then giving-up the sidebar for everyone else does not make a lot of sense.

The Fix

Fortunately, the fix is a fairly easy one that just requires a custom function to deactivate the single-column page template and inserting the sidebar call into the page template. As always, these changes should be made to a child theme, and not the Twenty Eleven theme files. More information about child themes can be found in Customize Twenty Ten, and a complete child theme that includes these modifications is available here.

/**
* Custom Functions for a Twenty Eleven Child theme
* all custom functions here use a 'brick' prefix
*/
add_action( 'after_setup_theme', 'brick_theme_setup' );

function brick_theme_setup() {
/**
* Remove the narrow individual post view
* Still requires adding sidebar.php to the single.php template
*/
remove_filter( 'body_class', 'twentyeleven_body_classes' );
}

A custom function, called brick_theme_setup, is added to the child theme’s functions.php file that uses a remove_filter to “remove” the default Twenty Eleven theme class templates. This will change the individual post pages from a centered, single-column layout, to the same left-justified layout as the main index page. It will still be missing the sidebar, though, so the next step is to add that back into the template.

The single.php template with get_sidebar() added

Locate the single.php file in the twentyeleven folder, and copy this file into your child theme folder. Open the file in any text editor and scroll to the bottom of the file, where you will see the line. To add the sidebar into the individual post page, add above the footer-call.

Twenty Eleven Sidebar on Small Screens

Another quirk with the Twenty Eleven theme is at low screen resolutions, the sidebar disappears from its expected positions and is placed at the bottom of the page. I was really scratching my head over this one, but exercised some Google-fu and found a solution in the WordPress forums.

The following code can be added to the child theme’s style.css file. I expanded on the code from the WordPress forum by hiding the search box to make more room for the site title and description, and reducing the left-margin on all of the post elements, so that everything stays in alignment.

/* Keep the sidebar from falling below post content on small screens */
@media (max-width: 800px) {
/* Hide the search box to keep the site title from wrapping */
#branding #s {
display: none;
}
/* Align site title and description with narrow-screen post content */
#branding hgroup {
margin: 0 1%;
}
/* Align nav menu with narrow-screen post content */
#access div {
margin: 0 1%;
}
/* Set a minimum width for the page wrapper to make room for sidebar */
#page {
min-width: 500px;
}
/* Set dimmensions for content and sidebar within the page wrapper */
.right-sidebar #main #content {
margin: 0 29% 0 1%;
width: 70%;
}
.right-sidebar #main #secondary {
float: right;
margin: 0 2% 0 0%;
width: 24%;
}
}

The end result appears to work well – certainly better than dropping the sidebar down below the post content. These two modifications are hopefully easy to make for most people, and add a significant amount of robustness to the Twenty Eleven theme layout.