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’
Thank you for every other informative site. The place else could I am getting that type of information written in such a perfect method? I’ve a undertaking that I am just now running on, and I’ve been at the glance out for such information.
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.
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!
thanks for your comment,
nowadays I do recommend the plugin that I mention near the end of my article.
Thanks for posting this. Works great, thanks!
Thanks for posting this! Worked like a charm.
Thanks a lot~
Thank to your article, I solve this problem~
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
*/
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.
i don’t agree – try it for yourself; imho, this does not work with the way Twenty Eleven deals with the sidebars.
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
Worked like a charm! Thank you so much for sharing this!
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?
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?
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.)
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.)
Shouldn’t this also work for gallery attachment page when viewing a single image on gallery page?
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.attachmentjust 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.
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
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_classescome into play, mostly a useful addition?Cheers
NilsNH
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.
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!
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.
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!!
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.
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
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.
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
Hi
Your sidebar bellow the content, check it