How to Add the Sidebar to WordPress Twenty Eleven Theme Single Posts

This is my first post since splitting off my technical posts into a new blog focused in that area. Part of the process was setting up a new wordpress blog, and of course I wanted to try a new theme, the Twenty Eleven theme. After I began importing a few posts I realized that there was no simple option to add the sidebar to the single post view. I tried messing with the CSS for a few minutes and then realized that there must be plenty of answers from people about this issue already.

I found one that looked promising at http://tricksmommy.com/2011/07/08/add-sidebar-in-single-post-pages-of-twenty-eleven-wordpress-theme/. Unfortunately after following the detailed instructions there the single post page had the sidebar added but the main index page was shifted off to the right. I couldn’t figure out the exact reason why, but the instructions mentioned copying css from another view so I figured it must be a different setup or something. I chose the left sidebar on my site whereas they used the default with the sidebar on the right, so that might be why it didn’t work for me. After removing those changes I came up with a simpler solution (step 1 is the same as the site mentioned above, step 2 is where we differ):

  1. Go the the Theme Editor and select the Single Posts(single.php). Search for the following line:
    <?php get_footer(); ?>
    

    Just above it place the following code:

    <?php get_sidebar(); ?>
    
  2. In the same file, look for the following code:
    <?php get_template_part( 'content', 'single' ); ?>
    					
    <?php comments_template( '', true ); ?>
    

    You’ll want to add another div around the above two lines and give it a new class name so you can set the positioning, like this:

    <div class="singlePostWrapper">
    <?php get_template_part( 'content', 'single' ); ?>
    					
    <?php comments_template( '', true ); ?>
    </div>
    
  3. Next you’ll open the style.css and add a simple definition for the new css class you created above as a wrapper around the post and comments on the single post pages. You can add this at the end of the file:
    /*Allow room for sidebar in single posts*/
    .singlePostWrapper {
      position:relative;
      left:25%;
      width:75%;
    }
    

    Note that the above class definition works well for the sidebar on the left, but if you chose to put the sidebar on the right in the theme settings you can change the word ‘left’ above to ‘right’ and it should work fine.

Join the Conversation

12 Comments

  1. Now that I’ve had this post up for 3 months I discovered that my links in the sidebar were not clickable on single posts using the above method. The way I fixed it was by adding:
    position:relative;
    z-index:10;
    to the #secondary definition block in style.css (which is the id used for the sidebar div). The z-index above 0 makes the sidebar appear over top of the left margin for the single post I created above, but in order to the z-index to work the position has to be either relative or absolute.

    Then I had to empty the minify cache since I use W3 Total Cache plugin and the css gets minified into temp files so changes to the CSS have to be re-minified into new temp files. Now it works great if I do say so myself. 🙂

      1. I tried changing the sidebar to the right and was unsuccessful however I stumbled upon a site which allowed me to do it.
        Do step 1, then add

        add_action( ‘after_setup_theme’, ‘my_twenty_eleven_sidebar’ );
        function my_twenty_eleven_sidebar() {
        remove_filter( ‘body_class’, ‘twentyeleven_body_classes’ );
        }

        to functions.php and it works on both left and right.
        Jimmy recently posted..LottoMy Profile

  2. Need your help here sir, I was able to get the Sidebar in the posts by your technique, however i failed to add any of the widgets to this sidebar. looks like i am missing some basics here but i need your help to get that fixed for our site to display the tag cloud and other widgets in the post pages.

    1. Hello Syed,
      Did you have the widgets in your sidebar before adding it to your single post pages? Do the widgets show up on your home page, for example? If you give me a couple links (your home page and one of your posts where the widgets are on the home page but not on the post page) I can take a look.
      Regards,
      Robert

      1. Please check this link
        http://www.thenewsreaders.com/cms

        I do not have any sidebar in the page , trying to get that but looks like i have made considerable amount of changes to CSS and now scared to make any changes to it. For posts, i am able to get the side bar with this method, however, the challenge is i am not able to add any widget to it. whatever widget i add to the sidebar, it doesnt display here, so probable its getting added to the original sidebar and not this created one…

        thanks,
        Syed

        1. Hello Syed,
          I looked at your site and clicked on several links but do not see a sidebar anywhere. Can you give me an example link to one of your posts so I can see the sidebar you have there? Based on what you are telling me, it sounds like you might need to add a sidebar to the main site before you can add it to the post pages. That’s what I was starting with in this article, I already had a main sidebar and I wanted it to appear everywhere. If you don’t want a sidebar to appear except on your post pages that may require a few extra steps, and if you have defined multiple sidebars then yes the widgets might be getting added to the wrong one.
          Regards,
          Robert

          1. You are right, i do not have any sidebar enabled for the main page, but i have used your code to have the sidebars on the post-pages(Posts), all the post pages have some right hand side left out for sidebar, after i used the instructions above. Was happy that i succeeded, but looks like there is more work to do as you said.
            I am trying to have the sidebars on my posts where i can use it to add the widgets.
            I hope you will be able to help me out with this.

            thanks,

          2. If I enable the sidebars, in the settings, my main page is going hayway.. irrespective of the type of sidebar i choose, it is taking 50% of the page as left side bar space. As i said, i might have earlier made some changes to the CSS, its got messed. so was thinking, is there a way that i can fix this, unfortunately, since my site is already in production, i may not be able to show you that live, however i can show some screen shot of how it looks when i do the sidebar piece, but i am not sure if that can help you to look into it.
            Any help from you to get this fixed is much appreciated.

          3. Hello Syed,
            If you don’t want your main page to show the sidebars then use firebug to figure out where the width of them is set in the CSS and then edit the appropriate css file or template to make the width zero or display none. Or you could edit your main page template and comment out the part where the sidebar is printed (that would make more sense actually).
            Regards,
            Robert

Leave a comment

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

CommentLuv badge