46 | Twenty Eleven – Sidebar on Single Posts and Pages

g+

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;
    else:
	  foreach($wp_classes as $key => $value) {
	  if ($value == $val) unset($wp_classes[$key]);
	  }
    endif;
  }
endif;   // Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes);
}

(resources:

http://dev-tips.com/featured/remove-an-item-from-an-array-by-value

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

PPS

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.

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

  1. Derrick comments:

    Fruits are great and I would never discourage my patients from eating fruit, but if your objective is to lose weight then they
    have to be eliminated, as they prevent Ketosis. Believe it or not, many dieters claimed
    that you can see the result in less than a week;
    you can actually loss 1 to 3 pounds each day. s better not
    to test instead of wasting your health insurance and
    money on these fake, choose nothing diets.

    My blog … weight-loss controversy hcg diet pt 1

  2. Maribel comments:

    The subjects are a lot of pieces, that would bee going personal fitnewss exercise and just pull back and forth.

    If you wannt and go. What you have, hence the name p90x.
    Back on yoir forearms and your right elbow, pull it up over
    thee place! Rather than focus on protein supplementation to be healthy.
    So then you can doo that.

    Allso visit my web site :: vision fitness exercise bike,
    http://www.coreworkouts.info,

  3. Boris comments:

    Hi, Quick issue that’s definitely off subject. Would you know
    the steps to make your blog page mobile-friendly?
    My website looks peculiar when viewing from my
    iphone 3gs. I am trying to locate a theme that’s mobile friendly, and yours really does just that.

    Any advise wjll be much respected. Thank you.

    My web-site … e liquid [Boris]

  4. 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!

  5. 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’) ) {
    register_sidebar(array(
    ‘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.

  6. 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

    dave

    • 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.

  7. Gautam comments:

    Thank you very much

  8. Paul Wandason comments:

    Hi,
    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,
    Paul

    • 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!
        Paul

  9. bizfuzzy comments:

    Hi,

    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:

      @bizfuzzy:

      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/

  10. 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.

  11. puaj comments:

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

    Puaj

  12. Abdul Halim comments:

    Hi,
    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

  13. Ruth Maude comments:

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

  14. 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

  15. kera comments:

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

  16. Cryptospy comments:

    THNX IT WORKS EXCEPT:
    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

  17. 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,
    Navin

  18. 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.

  19. 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.

  20. 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

  21. Ron comments:

    Thanks for posting this. Works great, thanks!

  22. Greg comments:

    Thanks for posting this! Worked like a charm.

  23. Robin comments:

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

  24. 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.

  25. Sunrise comments:

    Hi,

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

    Cheers

  26. InSight comments:

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

  27. 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?

  28. Brendon comments:

    Alchymyth-

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

  29. 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.)

  30. 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

  31. 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?

    Cheers
    NilsNH

    • 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.

  32. 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:

      Thanks,
      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!!

  33. 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.

  34. 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

    http://webstutorial.com/wordpress-twenty-eleven-theme-sidebar-pages-posts/content-management-system-cms

  35. MH comments:

    Hi,

    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.

  36. 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)?
    thanks

  37. dave comments:

    Hi
    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>