How To Add The Sidebar To Twenty Eleven

When I gave my first impressions of the new default WordPress theme Twenty Eleven back in May, I noted that the sidebar was removed from posts and pages. At the time I assumed that this would be addressed in the final stable version however it wasn’t, and as you would expect, a lot of people are annoyed about this.

Richard Gregory left a comment today asking how this could be amended so I thought I would look into the issue for everyone.

I quickly found a great article by Bart Surminski. I followed the steps in his article ‘Add sidebar to single post in the WordPress 3.2 Twenty Eleven theme‘ and applied the changes to one of my sites that is using Twenty Eleven.

The procedure is very straight forward. First of all you need to open up your single.php template and find the call for the footer:

<?php get_footer(); ?>

You simply need to add a call to the sidebar above this function like this:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

You should repeat the above step in your page.php template if you want to add a sidebar to your pages too.

The last thing you need to do is open your functions.php template then go to the bottom of the template and remove the function twentyeleven_body_classes. Bart advises that you simply comment the code out so it can be added later however I don’t think there’s any need as long as you have a back up of Twenty Eleven on your computer.

function twentyeleven_body_classes( $classes ) {
 
	if ( ! is_multi_author() ) {
		$classes[] = 'single-author';
	}
 
	if ( is_singular() && ! is_home() && ! is_page_template( 'showcase.php' ) && ! is_page_template( 'sidebar-page.php' ) )
		$classes[] = 'singular';
 
	return $classes;
}
add_filter( 'body_class', 'twentyeleven_body_classes' );

An alternative method of adding the sidebar was initially suggested by Chris Aprea. He has since stated that modifying the functions.php template is more efficient.

Please read ‘Add sidebar to single post in the WordPress 3.2 Twenty Eleven theme‘ for a more complete guide in removing the sidebar from Twenty Eleven. If you are unsure about any stage of adding the sidebar, please let me know and I’ll do my best to help :)

Thanks,
Kevin

This article was authored by:

Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity, Internet Marketing and Social Media on his personal blog and and provides technical support at Rise Forums. He can also be found on Twitter: @KevinMuldoon and Google+.

Kevin Muldoon has authored 833 posts.Visit Website

Showing 21 Comments

  • If don’t want to code, and need direct child theme, then you can download from here

    I have coded it into child theme

    http://webstutorial.com/wordpress-twenty-eleven-theme-sidebar-pages-posts/content-management-system-cms

    REPLY
  • Kevin Muldoon (Admin)

    Thanks Niraj. I’m sure some readers will find that very useful :)

    REPLY
  • ej

    What do you mean “remove” the code? Am I too only remove what is in blue or that entire section?

    REPLY
  • Kevin Muldoon (Admin)

    Remove all of the code that i.e. all of the function twentyeleven_body_classes.

    REPLY
  • Please note, that the original width of the primary div is too wide -> edit the width at the stylesheet.css to place the sidebar on the right side and not under the primary content ;)

    REPLY
  • Hey Thank you Kevin, I have successfully added side bar to my single posts and pages. Awesome. My website is kindleamazonreview (dot) com

    REPLY
  • If I want to add this sidebar to the Home page as well, actually every single darn page in the whole site, what do I need to do in addition to this?

    REPLY
  • Also, since I am using a child theme for my mods, it seems better to make a new functions.php file but I am a little unclear on the command to remove the function. it’s not a “if function exists” function, so do I do a remove_filter instead? Thanks for your help.

    REPLY
  • OK, I should have posted the under construction web page link.
    http://www.stanton-studio.com
    Posts show up on single blog entries, but not home page (though it appears there is room for it). This may be because I am not using the normal sidebar, but rather a sidebar widget with a custom menu, so it is not the same menu as the top menu. Any ideas greatly appreciated.

    REPLY
  • Kevin Muldoon (Admin)

    You just need to add a call to the sidebar in the appropriate template e.g. index.php.

    REPLY
  • Kevin Muldoon (Admin)

    There is no command. You simply need to delete the function from the file

    REPLY
  • Thanks for this Kevin, I confirm it works perfectly
    Bart’s site is currently down so I ended up here
    I can’t understand why this default wordpress theme does not have the sidebar for articles and pages but anyway…

    REPLY
  • great tips. it’s worked in my site. thank’s a lot

    REPLY
  • hi,
    I am using a child theme, that has quite a few mods to the child’s function file, there anyway to remove the duplicate function call in the parent twenty eleven theme without modifying it. worried about updates to function.php in the future. this child will be used in a number of sites.

    REPLY
  • Kevin Muldoon (Admin)

    By default the child functions file loads the functions in addition to the calls in the parent theme.

    According to this:

    The fact that a child themeâ€â„¢s functions.php is loaded first means that you can make the user functions of your theme pluggable â€â€that is, replaceable by a child themeâ€â€ by declaring them conditionally.

    In that way, a child theme can replace a PHP function of the parent by simply declaring it again.

    REPLY
  • zubu

    A Page With a Sidebar
    Twenty Eleven leaves sidebars off of posts and pages to highlight your content and proudly feature the magic that happens between your writing and your visitorâ€â„¢s comments. That said, sometimes you just want a sidebar on your pages. Selecting the custom Sidebar Template for your page will do just that.

    REPLY
  • Atheris

    This worked fairly well, the one issue it did give me how ever is a grey bar at the end of the page on the bottom of the page. Any idea how to solve this issue?

    REPLY
  • Atheris

    This worked fairly well, the one issue it did give me how ever is a grey bar at the end of the page on the bottom of the page. Any idea how to solve this issue? Also it seems to be putting the side bar at the bottom of the page near where the footer would be. Any help would be greatly appreciated!

    REPLY
  • grovesdesign

    Hi – Thanks for the tip. I had another suggestion from a developer I work with to just change the last line from add_filter to remove_filter. This seemed to work just as well. 

    REPLY
  • Tamarah

    Dear Reader,

    Please help me! I have a big problem! I would like to add a sidebar in posts for the Twenty Eleven Theme. I went to the site: http://www.wphub.com/tutorials/add-sidebar-twenty-eleven-theme/
    It says that I had to remove the function twentyeleven_body_classes. Now my site doesn’t work anymore, its down! Please help me. Ohw by the way… how do I get a sidebar in my posts?

    Thanks!

    Tamarah

    The blog I need help with is http://www.typischtam.nl.

    REPLY
  • amol

    thanks its working.

    REPLY

Add Your Voice: