Add Sidebar on Single Posts and Pages in Twenty Eleven

Background

The New default Twenty Eleven theme that comes with WordPress 3.2 is one of the most functional filled themes ever ,with more comments the code, this theme is aimed to show almost all of the WordPress templates system for theme developers. Which is great for people who know code but not for the rest of the world.

One major change was the wide post and page layout without a sidebar (probably the first version of WordPress that comes with a default theme with no sidebar in posts since sidebars came out). I've been asked over and over how to get the sidebar back by bloggers who love the theme but hate to loose there navigation menus and advertisements that used to be in the sidebar.

Lets Get Started

Since Twenty Eleven is a theme that comes with WordPress, that means that all of the changes you make to that theme will be lost on the next time you update WordPress so to avoid that you will need to create a child theme first, so

1. Create a new directory under wp-content/themes/ and name it as your child theme (I'll call it TWchild for the sake of the tutorial bit you can call it what ever you want).
2. Create a new file in that directory and name it functions.php
3. Create a new file in that directory and name it style.css
4. Open up the newly created style.css file and enter this to it:

/*
Theme Name: TWchild
Author: Bainternet
Description: 2011 child theme for WordPress
Author URI: en.bainternet.org/
Template: twentyeleven
*/
 
@import url(../twentyeleven/style.css);

That's all we need to start with a new child theme.

Edit Code

Do not be sacred since you are editing a child theme noting can go wrong with the original theme and you can always go back and start over.

1. Copy page.php and single.php from the twentyeleven directory to your new child theme's directory
2. Open page.php and single.php from your new child theme directory and add

   <?php get_sidebar(); ?>

   just above the line:

   <?php get_footer(); ?>

Next we need to remove the `singular` class from the body class and to do so we need to create a simple function in our functions.php

1. Open up your newly created functions.php and add this code to it:

<?php
add_filter('body_class', 'fix_body_class_for_sidebar', 20, 2);
function fix_body_class_for_sidebar($wp_classes, $extra_classes) {
	if( is_single() || is_page() ){ 
	   if (in_array('singular',$wp_classes)){
			foreach($wp_classes as $key => $value) {
				if ($value == 'singular') 
					unset($wp_classes[$key]);
			}
		}
	}

	 return array_merge($wp_classes, (array) $extra_classes);
}
?>

Finishing Touches

You will need to edit your theme's CSS and to do so you will once again only make changes to your newly created files, so open up the style.css we have created and add at the end of it:

.single #author-info {
   background: #f9f9f9;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   margin: 2.2em 0% 0 0%;
   padding: 20px 35.4%;
}

that is it hope you get the point, as a side not this was written when version 3.2 came out and just a week later we already have a new version 3.2.1
make sure to update.