46 | Twenty Eleven – Sidebar on Single Posts and Pages


The new default theme of WP3.2 – Twenty Eleven – is a very versatile theme.
However, the ‘missing’ sidebar on single posts or pages is quite disturbing for some users, loosing their advertising space or the main navigation.
To get the sidebar back is not that simple – style.css is quite complex, and the layout of a single post or page is done with a clever use of a specially introduced css class in the body tag.

First step

Create a child theme.

- create a new sub-folder under the /wp-content/themes folder, for instance: twentyelevenchild;
- add a style.css file to that folder; content:

Theme Name: Twenty Eleven Child
Author: alchymyth
Description: a child theme, based on the 2011 theme for WordPress
Author URI: http://wordpress.org/
Template: twentyeleven

@import url(../twentyeleven/style.css);

- add a functions.php file to that folder; to be used later;
- optional: add a screenshot.jpg image to that folder, depicting the design of your child theme.

Second step

Add the call of the sidebar back.

Edit single.php and/or page.php and add

<?php get_sidebar(); ?>

before the line

<?php get_footer(); ?>

Third step

Suppress the .singular body_class from the single post or page.

To achieve this, add a filter to your new functions.php in your child theme folder.

add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single() || is_page() ) :
// List of the classes to remove from the WP generated classes
$blacklist = array('singular');
// Filter the body classes
  foreach( $blacklist as $val ) {
    if (!in_array($val, $wp_classes)) : continue;
	  foreach($wp_classes as $key => $value) {
	  if ($value == $val) unset($wp_classes[$key]);
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);



http://wordpress.stackexchange.com/questions/15850/remove-classes-from-body-class )

Fourth step

Fine-tuning of style.css

For instance:

.single #author-info {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	margin: 2.2em 0% 0 0%;
	padding: 20px 35.4%;

There might be some more details which can be changed while customizing the styles of the child theme.

edit: thanks to member smijos of the wordpress support forum:
some more styles, for the comment section, to make the theme look good:

#respond {
width: auto;
.commentlist {
width: auto;
.commentlist > li.comment {
margin: 0px 0px 20px 102px;
width: auto;

PS: A Few Different Cases

(updated and expanded)

this all concerns this line of code:

if( is_single() || is_page() ) :

1) if you rather use the sidebar-page template that comes with the theme, to control if and when to show a sidebar on a static page, simply don’t edit page.php, and remove

|| is_page()

from that line.

2) Zeaks pointed out that the code also effects single attachment pages.

if you want the sidebar in these pages, edit image.php and add

<?php get_sidebar(); ?>

before the ‘get_footer’ line; also adapt the style of

.image-attachment div.attachment


if you want your single attachment pages without sidebar, change to:

if( (is_single() && !is_attachment()) || is_page() ) :


If you don’t like coding, please do still create the child theme; however, for the rest, there is a plugin available:
‘Twenty Eleven Theme Extensions’

This entry was posted in Twenty Eleven, WordPress and tagged , , , , , . Bookmark the permalink.

75 Responses to Twenty Eleven – Sidebar on Single Posts and Pages

  1. Marco comments:

    Wow, that’s what I was searching for, what a data! present here at this web site, thanks admin of
    this web page.

    My homepage hack game of war fire age

  2. Sophie comments:

    Sweet blog! I found it while surfing around on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo News?

    I’ve been trying for a while but I never seem to get there!


    Stop by my blog post … police vehicles for sale

  3. Suzette comments:

    Remote viewing is used by psychics to seek impressions or information about a person utilizing their ESP.
    Virgo For you, this is a transition time that works best if you keep issues simple.

    Feel free to surf to my weblog; best psychics (Suzette)

  4. Angel comments:

    Great web site. A lot of helpful information here.
    I am sending it to some buddies ans also
    sharing in delicious. And obviously, thanks to your sweat!

    My weblog: goji pro funciona, http://ssucom.kr/?document_srl=23277,

  5. Danilo comments:

    Experienced traders like to share your own strategyThere
    are numerous articles, videos, provide you with a particular level.
    This is basic information to be helpful in trying to inject money into the
    Forex is boringForex seems to be there. It’s not as complicated as with any
    loss. So it’s easy to do the opposite that is where the currencies market and hence opportunity
    for profit. I realized that it follows forex trading system secrets behind, moving averages.
    Why Because they are talking fixed income is in order for
    you and forex trading system secrets which helps you achieve.

    Feel free to visit my web-site Forex Intro

  6. Owen comments:

    I am really happy to read this weblog posts
    which contains lots of helpful facts, thanks for providing these data.

    Feel free to visit my homepage; how to Have sex with a toy

  7. Natasha comments:

    What happens is the fact that the registry keys produced
    through the sport get corrupted and it turns into hard with the online game collection as
    much as perform typically. If there’s anyone
    you could make a fool of yourself in front of, it’s your guy.
    Several companies have even announced that video game advertising has
    grown their audiences and customers by a number of millions and so they want to keep using this manner
    of advertising.

    My web blog – download transport tycoon

  8. Kathaleen comments:

    There are many good home based business opportunity!

    One of the European sovereign debt problems and pitfalls encountered along the Cambie corridor are driving
    through now witness the rewards. If you are physically in your retirement strategy for introducing the opportunity
    to make holding physical gold bullion. Coins are good
    examples of currencies or other soft cloth
    or a limit to the semifinal of the items. Do not buy it as well as gold ira review repayment choices.

    Review my website … gold ira custodians (Kathaleen)

  9. Belle comments:

    Having an Atlanta personal injury lawyer will ensure that the responsible party is punished for its actions and made to bear the
    cost of the trauma and suffering you that undergo due to the accident.
    * Not performing a c-section within a timely manne. If you are a victim of such a case it is suggested that you hire the services
    of Minneapolis personal injury lawyer.

    Here is my site; brain injury attorneys tulsa (Belle)

  10. Katie comments:

    What a information of un-ambiguity and preserveness of precious knowledge regarding
    unexpected emotions.

    Feel free to surf to my weblog; Advertising Ottawa Ontario

  11. Jeanne comments:

    When some one searches for his essential thing, therefore he/she
    wants to be available that in detail, so that thing is maintained
    over here.

    My site :: london oriental escorts (Matiozi.Ru)

  12. Veronique comments:

    Thanks for the auspicious writeup. It if truth be told used to be a
    leisure account it. Glance complicated to far added agreeable from you!
    By the way, how can we keep in touch?

    my web-site: Los Angeles DUI Lawyer

  13. Regan comments:

    I don’t know if it’s just me or if perhaps everyone else experiencing issues with your
    site. It appears like some of the text in your posts
    are running off the screen. Can someone else please comment and let me know if this is happening to them
    as well? This might be a issue with my internet browser because I’ve had
    this happen previously. Thanks

    Feel free to visit my homepage: 90s Fashion

  14. Glenn comments:

    It’s not my first time to pay a quick visit this web site,
    i am browsing this web site dailly and obtain pleasant data from here daily.

    my website Marketing Ottawa Ontario

  15. Ingeborg comments:

    Sleekskin’s acne-fighting formulas are meticulously developed to ensure
    the substance and the beauty industry and that onion extracts-based
    creams are an excellent scar removal skincare regimen that fits your complexion. Because then you’ll notice your muscle tone
    turning to more costly procedures. Natural skincare products that encourage collagen generation. Another popular acne scar removal they can tell you
    their secrets. In some cases are just fillers.
    Just because you are goin through.

    Stop by my page; dermaroller for acne prone skin

  16. Minda comments:

    Asking questions are truly fastidious thing if you are not understanding anything completely, however this
    paragraph offers nice understanding even.

    Look into my webpage – Megabauers Blog

  17. Antonia comments:

    ‘ Propecia is meant to be used in men suffering from male pattern baldness
    after consulting a doctor. Vitamin B5 is also very much necessary to stop hair fall and then it well also helps the hair to grow quickly.
    She did not seem too enthusiastic about it and claimed that she had just been to the toilet and did not feel like peeing any more.

    Here is my web-site capillus272 before and after weight loss pictures

  18. Melissa comments:

    Just wanted to send you a million thanks. I wanted a quick and easy way to change my child theme to support single post sidebars, and this was the answer. Thank you!

  19. Shajitha comments:

    Hi Alchymyth,

    Thank you for the post. I followed your steps but I still have the sidebar displayed under ‘content’ and I am using twentyeleven theme.

    This is what I did for the site http://www.loverescuedme.com/wordpress
    1. Created a child theme
    2. I created a new function.php and have the following code to display the 2nd sidebar called ‘homepage’
    if ( function_exists(‘register_sidebar’) ) {
    ‘name’ => ‘Homepage Sidebar View’,
    ‘id’ => ‘homepage-sidebar’,
    ‘description’ => ‘Appears as the sidebar on the custom homepage’,
    ‘before_widget’ => ”,
    ‘after_widget’ => ”,
    ‘before_title’ => ”,
    ‘after_title’ => ”,

    Note: I have both opening and closing php tags for this file.
    3. In function. php I added your code for suppressing .singular code after the above code and before the closing tag
    4. As for get_sidebar() code, I had to update sidebar_page(‘homepage’) for the sidebar to display.
    Any other option (updating in single.php or page.php or index.php with sidebar_page(‘homepage’) will not display the sidebar text content.
    5. Right no I have the content getting displayed but not on the side but under the content
    6. I updated the style.css with your code

    .single #author-info {
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 2.2em 0% 0 0%;
    padding: 20px 35.4%;

    right below @import

    I tried many different options. I really need your help to fix this as your solutions seem to work. Thank you in advance.

  20. Savedave comments:

    Thanks for this – I am having the same issue as Paul Wandason. My sidebar on posts is now present but appears below the content. I am at, for example: http://nadaav.com/n/pillow-fight-flash-mob-sound-asleep-short-film/

    I read your answer to him but didn’t fully understand it. Can you expand a little on how to resolve this please?

    Also, I edited the single.php in the main theme, but was wondering if it is better to do this in a child theme, and if so, do I need to copy the entire single.php before making the change?

    thanks loads


    • Savedave replies:

      Also, the code from the functions.php now appears on screen at the top of all of my pages and posts, above the header.

      • Savedave replies:

        Oops – I had missed the php code – new to this! for anyone else, you need to have

        at the end.

        Still leaves me with the question – should I have edited the the single.php in the main theme or added something to the child theme?

        thanks kindly

      • Michael replies:

        all edits have to be made in the child theme – the parent theme stays unedited.
        if you still have problems with integrating the code, or have general questions about child themes, please consider to join the WordPress support forum to ask there.

  21. Gautam comments:

    Thank you very much

  22. Paul Wandason comments:

    I’ve followed your steps and I get now get a sidebar on pages and single post pages (many thanks!), but it’s located underneath the content (www.fromadaddy.com). It looks like the content is still centered so the sidebar floats underneath. I’ve tested on Chrome, Mozilla and Internet explorer; I have jetpack installed on wordpress v3.5.
    I think I’ve followed your steps correctly…is there an additional step I need to take to move the content further left?
    With many thanks,

    • alchymyth replies:

      you might have missed something in the code for functions.php, as the .singular class is still present in the single posts.

      • Paul Wandason replies:

        Hi Alchymyth,
        That was it – many thanks!!! I’d missed at the start and end of the code in the functions.php file.
        Many thanks again…it works beautifully!

  23. bizfuzzy comments:


    After following the above steps, i can see side bar for only two of the recent posts, in single post view. For the older posts, in single post view, i can’t see side bar. I have followed first four steps exactly as above. plz check my website and let me know.

    • bizfuzzy replies:

      website in question is http://www.bizfuzzy.com, ust in case if you need to see

    • alchymyth replies:


      this is what I see in one of the older posts:
      <!-- Cached page generated by WP-Super-Cache on 2012-12-11 00:56:12 -->

      have you cleared any existing cache in your site?

      • bizfuzzy replies:

        Hi alchymyth,

        I have set the expiry time and garbage collection to 120 secs now.
        ust wondering, i have WP super-cahce running, is this good or bad say in future when i run ads or want fresh content to be displayed and changes displayed faster?

        Thanks a lot anyway, for your posts here and wordpress support.

      • alchymyth replies:

        for general WordPress questions, particlular plugin related, please ask at http://wordpress.org/support/

  24. Sean comments:

    Thanks dude, this was a big help, clicked on your google ads by way of thanks :)

    • alchymyth replies:

      Hi Sean,
      I’m glad if the info helped you; however, please click only ads you are really interested in.

  25. puaj comments:

    Thank you, Michael. I’ve used your solution and achieved exactly what I was looking for.


  26. Abdul Halim comments:

    I have added the code in both for single.php and page.php but the sidebar is gone down. When I go home page then it is ok but for another page it goes down. Any help will be appreciated. http://www.aas-bd.com

  27. Ruth Maude comments:

    Thank You!! One quick search led me to your post and saved me tons of time – much appreciated.

  28. John Horne comments:

    Hi and thanks so much for the information. I recently updated my site to the twenty eleven theme and used this method to return the sidebar to single posts and pages in my child theme.

    I don’t know if anyone can offer me any help, but after the update I can no longer get the image or any other lightbox plugins to work with the built in gallery function of WordPress. I am very frustrated, but I do not want to return to a design without sidebars.

    I have asked for help at the wordpress.org forum and received some replies from one of thee developers, but nothing more than the usual “turn off all of your other plugins to fine the conflict” advice.

    This seems to be more related to something n the child theme as everything worked fine previously. Any ideas?

    Meant to say the *image carousel* or other lightbox plugins

    …and BTW the site is: http://www.johnhorneguitar.com

  29. kera comments:

    THANK YOU… i thought i was going crazy cuz i could NOT make that darn sidebar appear.

  30. Cryptospy comments:

    author’s bio looks squeezed from both side..it have become narrow and long.
    refer: http://tech-guru.cu.cc

    also is it possible to remove odd 20-30 blank space above the header

  31. Navin Mukhi comments:

    Hi Everyone,
    My URL is paperwalk.in

    I have made some changes in the width of the page template in my CSS style sheet from 67.7% to 100% to make my content appear across the page with just enough margin on either sides of the website pages.

    After doing the same, my site is working fine only on Chrome and I.E and not on MOZILLA where the content and pictures are showing up vertically. However when i reload the page it appears fine.

    Can anyone help me with this please, even the site favicon shows well on Chrome appears broken in Mozzila.

    Thanks for your help in advance,

  32. Rob comments:

    There is a plug in for that! Twenty Eleven extension – http://wordpress.org/extend/plugins/twenty-eleven-theme-extensions/

    • alchymyth replies:

      exactly – that is why I mention the plugin at the bottom of my article; I do recommend the plugin if someone is not comfortable with coding.

    • Mhasizotuo replies:

      Sorry, but it isn’t working right on my side, I get a blank page. Are you sure this works with 2.6? Anyways kthnas for the theme, I’ll try to figure out something.

  33. Zubu comments:

    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.

  34. Jo comments:

    Hi, thanks for sharing this info. I keep coming back to this tutorial every time I need to start a new theme with constant sidebars! It’s the easiest method/code I’ve found so far. Thank you!

    • alchymyth replies:

      thanks for your comment,
      nowadays I do recommend the plugin that I mention near the end of my article.

      • sarah replies:

        Thanks a lot for recommending this awesome plugin. It has been of great help to me since I’m a newbie and I know nothing about coding. Continue to be a blessing!! Cheers! :D

  35. Ron comments:

    Thanks for posting this. Works great, thanks!

  36. Greg comments:

    Thanks for posting this! Worked like a charm.

  37. Robin comments:

    Thanks a lot~
    Thank to your article, I solve this problem~

  38. Alan comments:

    Maybe I am missing the point here? I too was looking for a way to add a side bar to twenty-eleven theme, and being a programmer started to look at your code examples – however when I looked at twenty-eleven it has 3 page templates installed in the current version, one is default (page.php) then there is Sidebar (sidebar-page.php) and Showcase (showcase.php).

    It is just simply a matter of selecting what template you want for each page – simple. Of course if you want to change what the default is that isn’t too demanding either, assuming teh reader knows about child themes, just create a child & copy page.php -> child/sidebar-page.php & sidebar-page.php -> child/page.php

    * Template Name: Sidebar Template
    * Description: A Page Template that adds a sidebar to pages
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0

    • alchymyth replies:

      you are right – you can use the existing page template to have a sidebar in static pages. therefore I added a PostScriptum further down in my article, how to change the suggested code to effect only single posts.

      assuming teh reader knows about child themes, just create a child & copy page.php -> child/sidebar-page.php & sidebar-page.php -> child/page.php

      i don’t agree – try it for yourself; imho, this does not work with the way Twenty Eleven deals with the sidebars.

  39. Sunrise comments:


    thank you for this great and easy tutorial. I’ve just tried it on my blog Question Spy… works great!
    I don’t know why the programmer of WordPress removed the sidebar from the article pages… and without any solution or question in the backend… like “Would you like to have article pages with or without sidebar?”. I love the sidebars :-)


  40. InSight comments:

    Worked like a charm! Thank you so much for sharing this!

  41. Brendon comments:

    So I’ve implemented the above but only for single post pages (my static pages I’ve been using sidebar-page layout). I was already using a child theme, and updated functions.php and single.php as listed above. The changes seem to have taken effect, it’s a two column layout, but the contents of my sidebar (widgets and navigation) are not present. Any idea what I might be missing?

    • alchymyth replies:

      Hi Brendon,
      if you have added ‘get_sidebar()’ in single.php of your child theme, and implemented the changes to functions.php, then it could be a css conflict with other customisations of your theme. do you have a link to your site?

  42. Brendon comments:


    Thanks so much, I was struggling with this exact issue; for my static pages, I just used and modified sidebar-page to great effect. About to give this a try, but Is there any way I can use function.php to just assign single post pages (and, ideally, any category or blog-related pages) to use sidebar-page as a starting point so I don’t have to much with this other CSS parameters? (Not that I’m afraid of the css, just that I’ve deeply customized the theme for my own uses and already have sidebar pages and the elements from content.php working beautifully.)

  43. Joanne the web designer comments:

    Wow thank you alchymyth.

    The part that stumped me was the .singular body class. How did you figure that out? Just adding get_sidebar() wasn’t enough to make the page template entry content fit the sidebar.

    Thanks for figuring it out, and making such an easy-to-follow tutorial.

    (You rock.)

  44. zeaks comments:

    Shouldn’t this also work for gallery attachment page when viewing a single image on gallery page?

    • alchymyth replies:

      good observation – i totally missed that one;
      you need to add the sidebar to image.php as well –
      and you probably need to adjust a few styles – at least this one: .image-attachment div.attachment

      just had a loook: the conditional is_single() is also true for the attachment page; and my code therefore removes the .singular class.

      i am going append a few cases to my post to cover this and provide options.

      thanks for pointing this out.

      • Zeaks replies:

        Thanks for adding that, I’ve used this in my child theme, it works great. You have a small typo in the word attachment though

  45. nilsnh comments:

    Thank you for doing this writeup. Interesting to pick apart the foreach loop.

    The body_class, that is for filtering whatever comes within the body tags? And would you mind explaining this bit of code?

    foreach($wp_classes as $key => $value) {
    if ($value == $val) unset($wp_classes[$key]);

    And where does the $extra_classes come into play, mostly a useful addition?


    • alchymyth replies:

      for info about body_class and the extra_classes, see: http://codex.wordpress.org/Function_Reference/body_class
      the code snippet is standard php manipulation of an array – nothing wordpress specific.
      also, as you can see from the quoted references in my article, I have built the code on existing sources, just adapted and applied to the challenge with Twenty Eleven; therefore no further explanations.

  46. Rev. Voodoo comments:

    I thought I’d already posted here, but I guess not! I posted up your code here http://vudu.me/qq for removing the singular body class. My tutorial is actually for putting 2 little sidebars on each side of the content, but your info got me there! Good stuff!

    • alchymyth replies:

      you have some really good tutorials on your site as well – particular those for Twenty Ten and now for Twenty Eleven, as these themes are not easy to customize. I discover new ‘tricks’ every day, and am just trying to catch up and understand at least some of it. ;-)

      • Rev. Voodoo replies:

        I wish I had a little more time to play around. There’s lots of cool things going on in 2011 that I want to spend more time poking with a stick! I’m glad you like some of the tutorials over there!!

  47. zeaks comments:

    Works great, thanks alchymyth. The other way I was doing this was causing issues and I’d have to remove my changes if I wanted to use the single column layout, this way works much better.

    The only styling issue I found was the above previous and next links and a .nav-previous {float: left;} fixed it.

  48. Niraj comments:

    If any one not interested in coding, then directly use this child theme, just install this and have fun with sidebar on posts and pages


  49. MH comments:


    I’m using this. It’s installed absolutely fine – as far as I can tell, except with a bit of a CSS adjustment required. Working on that now.

    Thanks for posting this! I’ll be even happier once I’ve got the CSS sorted out.

  50. alchymyth comments:

    Hi dave,
    can you give more details?
    - are you referring to the tutorial?
    - or are you referring to this site?
    - which browser are you using (there is a known issue with IE6 and the three columns)?

  51. dave comments:

    Your sidebar bellow the content, check it

Leave a Reply

Your email address will not be published.


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>