Codeable info

How To Add The Sidebar To Twenty Eleven

Posted on by in WordPress Tutorials

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 :)


Codeable info

Comments (21)

Comment by amol says:

thanks its working.

Comment by Tamarah says:

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:
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?



The blog I need help with is

Comment by grovesdesign says:

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. 

Comment by Atheris says:

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!

Comment by Atheris says:

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?

Comment by zubu says:

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.

Comment by Kevin Muldoon says:

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.

Comment by NWwaterboy says:

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.

Comment by nia kaniawati says:

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

Comment by Guide des croisières says:

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…

Comment by Carol says:

OK, I should have posted the under construction web page link.
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.

Comment by Carol says:

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.

Comment by Carol says:

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?

Comment by Kevin Muldoon says:

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

Comment by Kevin Muldoon says:

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

Comment by Justin says:

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

Comment by says:

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 ;)

Comment by ej says:

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

Comment by Kevin Muldoon says:

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

Comment by Niraj says:

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

I have coded it into child theme

Comment by Kevin Muldoon says:

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

Codeable info