Add sidebar to single post in the WordPress 3.2 Twenty Eleven theme

Posted on by

With the new TwentyEleven template included in WordPress 3.2 you’ll notice that the sidebar is gone in the single post page.

Update: This solution has succesfully been tested for the new WordPress 3.3 update and TwentyEleven 1.2 update.

Remark: This solution also works for single pages. Instead of single.php add the <?php get_sidebar(); ?> to page.php as described below for single.php

Based on the comments on http://futurewebblog.com/add-sidebar-support-posts-twenty-eleven-theme/ i’ve described my quick workaround below. It looks like the sidebar issue can be solved by just editing 2 files in the editor, which you can find in the Appearance menu.

Step 1:
In the single.php file replace:

        </div><!– #primary –>

<?php get_footer(); ?>

With:

          </div><!– #primary –>

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

Press ‘Update File’.

If you open a single page you will see the sidebar has appeared on the single post page, but it is at the bottom of the page.

Step 2:
To put the sidebar next to the post, we have to edit the theme functions (functions.php)

Open the functions.php in the editor.

The statement you’ll be looking for is the ‘singular’ statement, found at the bottom of functions.php. I’ve added comment tags to be able to switch back to the original situation without too much trouble. But i advise to back up the original file just in case something goes wrong.

This is how i’ve done it:

/**
*add_filter( ‘body_class’, ‘twentyeleven_body_classes’ );
*/

As you can see i’ve added the /** in front of the first part, and added an * to each line, to close the ‘comment mode’ just add a line with a */.

All you have to do is press the ‘update file’ button and you’re set.
This is just a quick fix which seems to fix the problem for me, I don’t know much about php so i’m sure there are better ways to fix this problem. If so, please let me know.

86 thoughts on “Add sidebar to single post in the WordPress 3.2 Twenty Eleven theme”

  2. hi i tried your suggestion and it work for single post except that sidebar doesn’t show on the single page. i’m happy about this tip. one more thing, i think the: should be anyway i didn’t changed that part on single.php i just added: you can check it here: http://archivistblog.info/what-is-cloud-computing/ i just hope it won’t have any problem in the future

    Reply ↓

  5. Pingback: Anonymous

    • The editting of the 2 php files was the only thing I did, apart from adding some widgets. The rest is pretty standard. Let me know what kind of changes you are looking for.

      Reply ↓

  7. How I can to add another sidebar in the index of the template. Anybody help me, I’m novice in wordpress

    Reply ↓

    • Twenty Eleven doesn’t support multiple sidebars right out of the box. You should look for a template with multiple sidebar support. Before the update i’ve worked with the pagelines theme and used 2 sidebars next to eachother. Just search for ‘pagelines’ in the add new theme section of your dashboard.

      Reply ↓

  9. Followed your instructions and got it to work perfectly. Thank you so much. Now if I could just get my nested comments to look like yours. How did you do that?
    Thanks again
    Katie
    head-heart-health.com

    Reply ↓

  10. Pingback: How To Add The Sidebar To Twenty Eleven

  11. Pingback: Adding the sidebar to a Twentyeleven child theme | iamtgc

  12. Hi, thanks a lot for this as it’s exactly what I’m trying to do (with a child theme) …but the single.php doesn’t have that code in it. I think it may have changed with the recent update so grateful if anyone can help please.

    Reply ↓

    • I understand you don’t have the ‘php get_footer’ in your single.php?
      What if you just add the ‘php get_sidebar’ line as described above?

      Reply ↓

  17. Bart, thanks much for this — was so happy to find. But then when I upgraded the client’s site, of course the parent functions.php was refreshed and I got the call asking why the sidebar was messed up. {face-palm}

    What to do when using a child theme? But thanks to @mor10 and his excellent tutorial at Lynda.com on child themes, I think I have the solution. It seems to be working. I’ll paste the code below. Of course, one can name the function whatever you want.

    // remove the default function that makes single items etc. have different sidebar
    function cf_fix_sidebarissue() {
    remove_filter( ‘body_class’, ‘twentyeleven_body_classes’ );
    }

    add_action(‘after_setup_theme’, ‘cf_fix_sidebarissue’, 11);

    Reply ↓

  18. Hi,

    I was trying to create a page sidebar different from the blog sidebar. But being a complete noob in WP, I was not able to do that. Can you please help me to do that? Or can you please release a child theme, so that the page sidebar template uses a different sidebar with different sets of widgets?

    Thank you in advanced. I’ve also posted this problem on WP Forum, but not having so much help there.

    Reply ↓

  19. Much thanks, I was like “WTF” when I saw that this theme didn’t have the sidebar on single posts. But your code worked like a charm : )

    Reply ↓

  21. Hello,

    this fix works, however it results in very narrow comments (as also seen on your site). How would one go into spreading the comments so they cover the full width of the main content area?

    Reply ↓

  22. Pingback: Ayuda Webmaster | Añade el sidebar a los post en Twenty Eleven Theme

  23. Hi Bart
    This works perfectly – thanks for the fix.
    So annoying that wordpress did this – cant think of a legitimate reason why.
    On another related question – how did you install the fantastic floating social bookmarking buttons (twitter, facebook) that I can see on this page, to the left of the content column? Is it a wordpress plugin? Would be great if you could let me know where to get it

    Many thanks
    Paul

    Reply ↓

  25. Solved the comments problem (finally!) – here’s the fix — change this in your style.css (search for these exact values and change just the items I’ve edited, or just paste this at the very bottom of the stylesheet):
    #respond {
    width: auto;
    }
    .commentlist {
    width: auto;
    }
    .commentlist > li.comment {
    margin: 0px 0px 20px 102px;
    width: auto;
    }
    You can edit the top margin value to whatever you want. The 102px margin is required for the default avatar.
    PS my gravatar says admin, but I’m not an admin here ;)

    Reply ↓

  26. Thank you very much for your help :)
    I was able to follow your instructions and succeeded, but instead of putting stars in front of each line I just started with this /* and then after all of that code at the end I added this */ and it works.

    Reply ↓

    • You’re right, this also works and makes the code ‘cleaner’. But as a non-coder I prefer this since it shows in one glance that the complete code is between comment tags ;)

      Reply ↓

    • Hello John, i’m not sure what is going wrong, can you add the code to page.php and check if it does appear next to or under your ‘about’ page.

      Reply ↓

  28. Pingback: 1. September 2011 bis 2. September 2011 | word of mouse

  30. Pingback: Боковая панель на всех страницах Worpress | ExtraLAN.ru

  31. Thank you, thank you! This worked and seems to be a very clean solution. Once WordPress upgrades and the functions.php file gets updated hopefully the change will again be easy to implement.

    Reply ↓

  32. Hy there.

    i was looking for a nicer way to do this.
    Basicaly you need to do 2 things so the site still work good.
    Make a copy of the single.php and name it one-column-page.php
    Add this lines at the top of the page.
    /**
    * Template Name: One Column No sidebar
    */

    Because we don’t whant the singular class to apear when is single post you must tell that function if it is singular don’t show singular class. that is done by puttin ” ! ” in front of is_singular() and to tell to show the class when accesing the new template is_page_template( ‘one-column-page.php ‘ )

    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’ ) && is_page_template( ‘one-column-page.php ) )
    $classes[] = ‘singular’;

    return $classes;
    }
    add_filter( ‘body_class’, ‘twentyeleven_body_classes’ );

    Now you should have the posibility of chosing no column for pages.

    Reply ↓

  36. Hey,

    Thanks dude.. It works perfectly. Actually I’ was in a big trouble how to solve this. I was thinking about to switch back to twentyten theme. But this tutorial helped me.

    Thank you so much Bart. Cheers :)

    Reply ↓

  37. Actually in step two you just need to comment THIS line

    // add_filter( ‘body_class’, ‘twentyeleven_body_classes’ );

    If you don’t run “add_filter” the function won’t do anything, but it’ll be there for reference if you need to restore it it’s way easier to just uncomment one line.

    Reply ↓

  40. I just wanted to thank you for posting a fix to the side bar problem. At first, I was a bit hesitant but decided to try it and I followed your instructions exactly. I have no programming experience whatsoever and I had the sidebar problem solved in about 10 minutes. Thank you again!

    Reply ↓

  42. Done the job for me. Thanks! Took me a few minutes to work out exactly what to do on item two but that was probably because I wasn’t switched on!

    Reply ↓

  46. Great post. Just wondering about two things:
    1. Is it possible to reduce the space between the ‘Next’ and ‘Previous’ buttons at the top of the page and the post title?
    2. Is it possible to change the appearence of the header in posts. I have a large description of my blog on the home page which by default appears at the top of each page but I’d prefer if it only appeared on homepage. Can you tell me what to do for this?
    If you need to look at my site to see what I’m talking about, it’s here: http://www.digitalmarketingnerd.com

    Reply ↓

  47. Thanks Paul
    1: I’ll look into this, it might be a simple change in the edittor -> i’ll let you know.

    2: Seems to me you typed quite a lot of info in the settings -> general -> tagline field. It’s only meant for a few words to act as a ‘subtitle’ to your blog name. A solution might be to add a page to your blog with the name ‘Home’ and put the text on that page. Then in settings -> reading, choose you want to use a static page and select the page you just created as home page. I think you have to create a new page to be used as your ‘blog’ page. If you run into any trouble with it let me know.

    Another workaround to keep that text on the homepage is to put it in a new blog post, and make that post sticky so it always shows on top on your current page, this might be the quickest way to reach your goal.

    Reply ↓

  48. Ok so I feel stupid for not being able to figure this out but where exactly do I put the line for the second part? Maybe if you could show it similar to step one that would help muchly. Thanks.

    Reply ↓

  51. Pingback: حل مشکل نمایش ندادن سایدبار در تک نوشته در قالب Twenty Eleven « مجله اینترنتی یک تب

  55. Pingback: حل مشکل نشان ندادن سایدبار در تک نوشته در قالب Twenty Eleven « مجله اینترنتی یک تب

  56. This worked well for me with one small problem: the post-entry-meta text (posted on ) collides with the sidebar (because I have it on the left, and am hiding the black menu under the images. If I add some CSS to say, put it even with the title, (about 180 pixels or so), than it’s fine on the post pages, where it is above the title (and even with the ‘<—Previous' nav link). However, now on the home page, all the posts have it moved as well! Is there a way to change the post-entry-meta locations on just the single post pages? Thanks for any tip you can provide…

    Reply ↓

  57. Simplest instructions I have found, as of yet (for us very not familiar with coding out there)!! Thank you so much!

    Reply ↓

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>