Adding the sidebar to a Twentyeleven child theme

Twentyeleven offers a lot of cool features, one of my favorites is the Showcase template. However one of the downsides in my opinion (and probably yours, if you’ve found this article) is lack of a sidebar on your single posts and pages.

Others have pointed out viable solutions, however I wanted to stick to best practices and keep my parent theme unmodified.

Here I will explore how to add the sidebar to a twentyeleven child theme in only half a dozen lines of code.

Note: More information on creating a child theme can be found here.

We’ll begin by adding the sidebar back to your posts, by copying single.php to our child theme and modifying it.

            </div><!-- #content -->
        </div><!-- #primary -->

<?php get_footer(); ?>

Add the get_sidebar() function directly above get_footer() like so

            </div><!-- #content -->
        </div><!-- #primary -->

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

The same can be done for page.php if you want the sidebar to appear on your pages as well.

Now, the other tutorials I’ve seen advise you to edit twentyeleven’s functions.php and comment out the remove_twentyeleven_body_classes() function and it’s accompanying add_action(). You can certainly do so, but it goes against best practices, and you risk losing your modifications if you update twentyeleven.

In your child theme, create or modify your functions.php to contain the following.

<?php
function remove_twentyeleven_body_classes() {
    remove_filter( 'body_class', 'twentyeleven_body_classes' );
}
add_action( 'after_setup_theme', 'remove_twentyeleven_body_classes' );
?>

Here we are removing the filter that is added in twentyeleven’s functions.php, but since the child theme’s files are processed prior to the parents, simply removing the filter is not adequate and would be overridden by the parent function. As a result we need to add an action to remove the filter during the after_setup_theme action.

Save your files, and assuming it wasn’t already, activate the theme.
That’s it. Now you have your sidebar.

This entry was posted in Wordpress. Bookmark the permalink.

23 Responses to Adding the sidebar to a Twentyeleven child theme

  1. Ana says:

    Hello! Thank you SO much for the tutorial!!

    I am having some difficulty with the last step, the child functions.php.
    When I upload it to my child theme directory, I get the following fatal error:

    Fatal error: Call to undefined function remove_filter() in /webspace/12/78156/ushmidosaja.com/wp-content/themes/twentyeleven-child-01/functions.php on line 3″

    Can you please direct me as to how I can solve this error?
    I would very much appreciate the help!

    Thanks in advance,
    Ana

    • tgc says:

      Did you copy and paste the contents of functions.php in their entirety? Is that the only content in that file?

      Can you post the steps you took to create the child theme, and the contents of your style.css?

      • Ana says:

        Thank you for the reply!

        When I copy the parent functions.php and copy it to the child theme, in its entirety, the site breaks.

        I created the child theme via a plugin (Orbisius child theme creator).

        I really appreciate your support through this – I have followed the steps up until the functions.php which has only led me to a broken site. I look forward to your reply!

        My child style.css is quite extensive:
        /*
        Theme Name: 2011Child
        Theme URI:
        Description: Child 01 theme for the Twenty Eleven theme
        Author: the WordPress team
        Author URI:
        Template: twentyeleven
        Version: 1.6
        */

        /* Generated by Orbisius Child Theme Creator (http://club.orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Sat, 07 Dec 2013 02:38:09 +0000 */

        @import url('../twentyeleven/style.css');
        [...]

  2. Jason K says:

    I did this and it totally broke my website. I had to access the ftp to change the functions.php again because even the back end was completely broken…

  3. John Slavich says:

    Thanks a lot for this post. Your simple and clear solution works perfectly. Good job.

  4. Pingback: Aanpassingen Twenty Eleven Theme | Online-it

  5. Scott says:

    You need to add the following to your child theme’s “style.css” file:


    /* Sidebar on Post Page */
    .singular #content, .singular.left-sidebar #content {
    margin-left: 2%;
    margin-right: 24%;
    }

    Reverse the numbers for the margins if your sidebar is on the LEFT.

    Scott

  6. ciulicek says:

    Does not work corectly :(
    Menu in posts is shown UNDER the article (near the footer), not in right side.

  7. Lydia says:

    I followed all the instructions and I added the sidebars on single post and page for my twenty eleven child theme. However, I’m not understanding the modification to the functions.php, like you have stated:

    “In your child theme, create or modify your functions.php to contain the following.”

    I did this and my new sidebars are still showing at bottom of page contents. Exactly how should my functions.php theme editor look after making changes? Your instructions have been the simplest and closest to perfect I have found. Thank you in advance for your help.

  8. Adrian says:

    You sir, are awesome! Thank you so much for taking the time to create this. Worked like a charm. :)

  9. Pingback: Mending a small but annoying shortcoming in my blog theme

  10. Study Tips says:

    Hey, thanks heaps for this!

    I actually don’t understand why such a great theme would have its single post page look like some sort of landing page. Oh well

    I was actually hesitant on using the editor when I first started blogging but it seems to be really unavoidable if you want to make any useful changes to the theme.

    Once again, thanks! You make a non-coder’s life really easy!

  11. karen says:

    Hi again!

    I hope I’m doing it correctly, I copied the twenty eleven (parent) single.php and page.php files to the child theme directory (through file manager) and now the single and page php files are showing when I go to editor.

    You said, “In your child theme, create or modify your functions.php to contain the following.”

    How do I create or modify the functions.php file? I tried to copy the functions.php file (through file manager) and i coundn’t load the admin, so i removed it.

    Please advise. Thanks.

  12. karen says:

    Hi!

    I’m completely new to WP but had a little experiences with blogger. I’m trying to follow your article but am at a complete lost. I’ve managed to create a child theme that includes the style.css file and that’s it.

    I copied the whole coding from twenty eleven (parent theme) single.php, functions.php and page.php files and pasted them into editor on child theme. But I think I’m not doing it right as the individual post and pages have no sidebar still. Please help me? I really don’t know where to begin. =(

    Thanks,
    Karen

  13. onel says:

    Thank you so much for the article, it really helps! The sidebar is working perfectly now. Thanks again! :D

  14. Jelli says:

    Yay! Between yours and someone else’s tutorials, I got the sidebars to show on single posts and pages. Thanks so much!

  15. Pingback: Move the Navigation Bar in a Twentyeleven Child Theme | iamtgc

  16. Sarah Gerber says:

    Works great! I was wondering how to do this without modifying the twenty eleven parent theme functions.php

  17. Thanks tgc, i’d been working with a twenty eleven child theme to select different page templates but even a renamed template file, which was an exact copy of sidebar-page.php in the child theme folder, wasn’t showing the correct layout (sidebar content was appearing under the page content as if the page was being treated as a single post page – could be something in twentyeleven/inc/theme-options.php?)

    Until i found your remove filter action, that is. Safer in the child themes functions.php as well.

  18. NWwaterboy says:

    Thanks, I did not want to mod my parent function file either took a while to find this though

  19. Chad Warner says:

    This worked perfectly! Most other tutorials show how to directly modify the Twenty Eleven theme, but I’m using a child theme.

  20. Pingback: Remove the default header images from a Twentyeleven child theme | iamtgc

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>