I decided to add some sidebar action to the single post view of twentyeleven. It was actually a tough decision. I really did like the clean, distraction free, clutter free single post view that the theme has by default. However, I noticed a sharp drop in my adsense revenue. I’m not making a killing here, heck, I don’t even cover my hosting costs. But the little bit I did get was nice, like a little reward for trying to help the community. So I decided to drop in a sidebar. And, because I’m always trying to make things difficult on myself, I added in 2 sidebars, one on each side of the content. Let’s check out how to get that done.
So the first thing I had to do was a little bit of thinking. What size to make my sidebars? Well, the twentyeleven theme is flexible, but I don’t want my sidebar to be flexible. Ads will always be the same size. I see the common size for affiliate ads is a 125x125px box. And google has a vertical tower that is 120px wide I believe. So I’m thinking 140px is a good width. Since I wrap my widgets in a nice box, they need a bit of padding.
The first thing to do is get the sidebars all up and functioning properly. After that, I can worry about styling. So first up, is registering me some sidebars.
//ADD 2 SINGLE VIEW SIDEBARS
function voodoo_widgets_init() {
register_sidebar( array(
'name' => __( 'Single View Right Sidebar', 'twentyeleven' ),
'id' => 'singleright',
'description' => __( 'The sidebar displayed to the right of the single post view', 'twentyeleven' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Single View Left Sidebar', 'twentyeleven' ),
'id' => 'singleleft',
'description' => __( 'The sidebar displayed to the left of the single post view', 'twentyeleven' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
/** Register sidebars by running voodoo_widgets_init() on the widgets_init hook. */
add_action( 'widgets_init', 'voodoo_widgets_init' );
BY now I’m sure many of you are familiar with how to use register sidebar, but if not, there is the block of code for you to look through. We simply name them singleleft and singleright. The structure for them was grabbed straight from twentyeleven so I could ensure consistency. That is all you need to do to have the sidebars functioning. Of course, they don’t display anything yet, but if you go to your widgets menu, they will appear there.
Next up, I decided to use sidebar files for these. I probably could have just hard coded the widget areas into my single.php, but that seemed a pain. This was the simplest method in my mind. So make 2 new files named sidebar-singleleft.php and sidebar-singleright.php and we are good to go. If you named your sidebars something different, you’ll need to adjust the names of your files accordingly. Notice the file name reflects the sidebar name. So here is the code for each sidebar:
- sidebar-singleleft.php:
<div id="singleleft" class="widget-area" role="complementary"> <?php if ( ! dynamic_sidebar( 'singleleft' ) ) : ?> <aside id="archives" class="widget"> <h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3> <ul> <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?> </ul> </aside> <?php endif; // end sidebar widget area ?> </div><!-- #singleleft .widget-area -->
- sidebar-singleright.php
<div id="singleright" class="widget-area" role="complementary"> <?php if ( ! dynamic_sidebar( 'singleright' ) ) : ?> <aside id="meta" class="widget"> <h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </aside> <?php endif; // end sidebar widget area ?> </div><!-- #singleright .widget-area -->
Nothing groundbreaking here. It’s again all stolen from twentyeleven’s sidebar.php. Each sidebar has a default widget, basically for testing. Those default widgets will go away when you put your own content in there. We use dynamic sidebar in there to do that check for dynamic widget content.
THat’s it for the sidebar setup. We have the files, the files reference the registered sidebars. Now we need to place them. Anyone who has kept up on VoodooPress knows I hate bringing unnecessary files from the parent theme to the child. Unfortunately the only way to add those sidebars in just right is to copy single.php. So let’s grab single.php from the twentyeleven theme and drop it into our child theme.
We just have a couple of real simple edits to make to add both of our sidebars. Up at the top of the file, just under get header, we have to call our sidebar left with get_sidebar. I know we are used to seeing all the sidebars added at the bottom of the code, but to make life easiest I had to add it at the top to float it left of the content easily. Here’s the top part of single.php now with my code added.
<?php
/**
* The Template for displaying all single posts.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
get_header(); ?>
<?php get_sidebar('singleleft'); ?>
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<nav id="nav-single">
We have our left sidebar placed, now we need to add our right sidebar. This one goes down at the bottom right above the get footer call, just like we are used to seeing.
<?php get_template_part( 'content', 'single' ); ?>
<?php comments_template( '', true ); ?>
<?php endwhile; // end of the loop. ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar('singleright'); ?>
<?php get_footer(); ?>
And that is it for the functionality. If you check out your site now, you will see the 2 sidebars! Unfortunately, they are under the content, and the entire width of the screen. So now we have to do some work on styling. This is a bit more in depth than just a simple css tweak, but bear with me. First we need to dive into some functions.php code. I’m going to give you 2 options here, take your pick.
This is the bit of code I use. I did not write this, but I forget where I grabbed it from, I was in a hurry. I’ll look around Google shortly, find it, and give some credit where it’s due. it was grabbed from this tutorial here, made by Alchymyth, one of the mods on the WordPress support forum. If it’s yours, lemme know! Anyway, this filter works for me in my functions.php:
// GOTTA GET RID OF THAT SINGULAR CLASS
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);
}
That runs through and removes the singular body class from single view. Twentyeleven uses a fair bit of css to set up the single, non sidebar having view. It is easier to drop the class than to try to counter the css. Another bit of code I saw over here on Future Web Blog is much smaller.
// In child themes the functions.php is applied before the parent
// theme's functions.php. So we need to wait for the parent theme to add
// it's filter before we can remove it.
add_action( 'after_setup_theme', 'my_child_theme_setup' );
function my_child_theme_setup() {
// Removes the filter that adds the "singular" class to the body element
// which centers the content and does not allow for a sidebar
remove_filter( 'body_class', 'twentyeleven_body_classes' );
}
I have not tested this one. But give it a try if you like. It removes the twentyeleven_body_class which is set up by the parent theme. Just notice that it removes the singular class, but also removes the single-author class. I haven’t looked into what that second class does, so I don’t know what the consequences would be.
So now that we have removed the singular body class, we are nearly there. Just some css left to do. Here’s what I have:
.single #primary {
width: 95%;
}
#singleleft, #singleright {
width: 140px;
margin-top: 6%;
}
#singleleft {
float: left;
margin-left: 4%;
}
#singleright {
float: right;
margin-right: 4%;
}
#respond {
width: 90%;
}
.commentlist {
width: 100%;
}
So, what’s with all the random rules? Well, leaving the #primary div at full width would drop the right sidebar under the content. So shrinking it just a bit worked great for me. Then we set up the width of both sidebars, and I added a top margin to make the sidebars start where twentyelevens title starts. Next up we float each sidebar in the proper direction, and give them some margin away from the edge. The consequence of shrinking up the primary area was that the comments area looked all squished. So the last 2 items simply get the comments looking good again.
Well, that was a bit of effort eh? I’ll admin, this solution may not be for everyone. It definitely clutters things up a bit. You’ll have to weigh your options here. Maybe you just want to add one sidebar like they did on Future Web Blog. You could also add a sidebar under your first paragraph if you like. I think we will cover that shortly. But if you want 2 skinny sidebars like we have here on VoodooPress, well, now you see how we did it!
EDIT: I had to make a final tweak to this. I hadn’t tested this fully with very short posts. It seems with short posts and a wide commentlist, the avatar for top level comments overlaps the sidebar content if it is far enough down. If you run into that, my solution was to narrow down the commentlist a bit, and move the avatar in a bit.
.commentlist {
width: 85%;
}
.commentlist .avatar {
left: -80px;
}
So you can see I took the commentlist from my original 100% to 85%. Twentyeleven sets the left positioning of the avatar at -105px. I just moved it in 25px. I think it looks fine on my site. But I’m open to suggestion if somebody has a more elegant way of doing this.
Pingback: Replace/Remove Default Header Image Twenty Eleven Theme | WP TIPS
Thanks for this post. I’ve been trying to create a left and right sidebar layout for Twenty Eleven. I managed to add a new layout to theme options in a child theme, and add a new widget area. Was trying to use the new widget area for the left widebar, and keep the original on the right. Having alot of problems getting the css right though. Any suggestions? http://pastebin.com/r7XCjtTp
Hard for me to say without knowing exactly what the problem is? My experience was that I needed to add the left sidebar above the post content in the code, and I had to remove the singular body class before my dual sidebars would work. But I don’t know what you’ve done, and what problems you are having, to be able to help further.
Pingback: Customizing Twentyeleven | Miguel Martinez
What I want to do is the same thing for Pages as you have done for Posts – i.e. have a left and a right sidebar with content in the middle. I want to create a new Page Template to do that. Do you know how I can do that? One problem is that I don’t see where Page templates are – it is not obvious like in twnetyten. Thanks
The main page template is page.php. You can copy that to your child theme and edit it just like above to have sidebars on all pages. Or you can copy it, add the page template header to it, then do the sidebar edits if you only want to assign it to certain pages.
that is a great post. worked on this overnight and it has help me implement this site I am working on for a client http://thetelescopejournalisticmedia.com
Hey that’s cool! Glad it worked well for you!
Hi, I keep getting an error when I try to register the left and right sidebar. this is what the error says when i try to update it.
Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ‘)’ in /home/queeny03/public_html/risap.com/wp-content/themes/2011 child theme/functions.php on line 386
I even tried removing the removing the left/right sidebar code but I keep getting the same error.
Thanks
sorry forgot to add the line. This is where line 386 is in bold. This is the in the function.php file after I restored it to its default settings
register_sidebar( array(
‘name’ => __( ‘Showcase Sidebar’, ‘twentyeleven’ ),
‘id’ => ‘sidebar-2′,
‘description’ => __( ‘The sidebar for the optional Showcase Template’, ‘twentyeleven’ ),
‘before_widget’ => ”,
‘after_widget’ => “”,
‘before_title’ => ”,
‘after_title’ => ”,
I think I see the problem there. You need to have your punctuation in pairs. In my example for some reason, I switch between using double quotes and single quotes for some reaon, dunno why I do that. But whether you are using single or double quotes in your code, you need opening and closing. SO in the before_widget line, as well as in the before_title, and after_title, you need either 2 double or single quotes rather than one double quote.
Thank-you so much! It works.
Awesome! Thanks for letting me know!
hy sir i have read your post regarding adding sidebars,nice one.actually i am also using the same theme and i want to add a single narrow sidebar at right side along with my existing right sidebar,i.e.two sidebars at right side,kindly help me regarding code,i am not much familiar with this php language.
I haven’t tested this, but as a guess it should be fairly simple. It’s all going to work pretty similar to what I have above. The only thing that should need to change is the placement of the get_sidebar calls we have in our template above. In my code above we have get_sidebar( ‘singleleft’ ); up at the top of the template, right under get_header. Instead of putting it there, you would move it down to the bottom of the template under the sigleright call. So you wouldn’t add anything at the top, and the bottom would look like:
</div><!-- #content --> </div><!-- #primary --> <?php get_sidebar( 'singleright' ); ?> <?php get sidebar( 'singleleft' ); ?> <?php get_footer(); ?>And then, in the css I gave, you would change #singleleft from float:left to float:right. That should do it. If it doesn’t work out, let me know, and I can try to set it up on my test site to troubleshoot.
So I’ve followed your steps several times – both to the letter and in combination with advice I’ve found from other sites – but I continue to have problems with this method. Can you please tell me what I’m doing wrong. The css seems to have worked, since the content is now in the center, but I have all sorts of funky code on the page.
How are you making your file edits? Directly in WordPress? Or elsewhere and pasting into the editor? Or making the file elsewhere and uploading it? Something seems to be going way wonky with your code.
I am editing in notepad and uploading via FireFTP
Er, I mean TextEdit
Oh…darn. I was hoping you were editing in word or something…. that would bring over strange encoding. But yer doin_it_right(); I just noticed…. on your site you got that extra code all cleared up. On my single.php, I have my left sidebar up above the main content, and my right sidebar in the original place down at the bottom. Are you trying to do what I was doing, with a sidebar on each side? Or do you want them next to each other on the right, or where are you trying to get them?
Firstly i like to thank you for this great post. I tried it and (after getting what i child theme is) got it working. On single.php everything looks perfect, but when i try to get it on page.php the right sidebar is on the right side bottom and not top. The page is local, so i can’t provide a link to it. Something must push it under the page, but i have no clue what that could be. Do you have an idea – even without seeing some code?
I never tried messing with dual sidebars on a page, since the single sidebar option provided was enough for me. Do you use firebug at all? My guess would be a simple css issue. I’m sure the css for pages is different than for single. With firebug for firefox you can do experimental css edits on a live site and poke around to see what css is applying where. You can try to sort the css issues that way. There probably just isn’t enough room for both sidebars + content
OK after some testing i can say it is the width of the sidebar causing this. If i do a width of sidebar left/right of 90px it shows up correct on page.php with 130px its ok on single.php.
But i need a with of 170px for both.
Can you help?
You would need to work with the padding and margins of the content area most likely. Reduce the content area possibly, or reduce margins or padding. It’s hard for me to help without having it set up. Maybe I can try running this on my test site soon and see what I can see….
it was just a wrong padding – mixed numbers
Thanks for the clue. Can you mail me your contact data, as i see you know wordpress, maybe we can do business from time to time.
Thanks for letting us know what worked, in case it helps the next person along figure things out!!
Hi,
I am looking to add side bar widgets onto the other pages of my site, specifically the store page to enable me show the shopping cart on the right hand side of my store page. Its right now its restricted to my blog page only.
Any advice on how to add/show these widgets on the other the other pages would be highly appreciated.
Many thanks for your help.
Navin
Are you using the 2011 theme? If so, you have the option to add a sidebar using a different template when you edit your page. If not, it may not be too hard to add a sidebar or just a widget area… but how to do it depends on what theme you are using.
Hi
Thanks for yr reply, yes I am using the twenty eleven theme, can u please explain how to add the widget on the other pages especially my store page, to enable me show the wordpress simple shopping cart in the right hand of the page as well.
Are the physical pages, like, if you go to your pages menu, can you see them? If so, you can go to edit the page, and over on the right under page attributes you can select the sidebar template. After doing that you could use a plugin like widget logic
http://wordpress.org/extend/plugins/widget-logic/
To decide which pages get to see certain widgets.
We could also code up a different sidebar for the page… but I think this technique might be easier.
Hi,
Thanks so much the plugin worked. I am able to see the sidebars on all the pages.
Can I decide which sidebar should appear in which page? How does do that ?
You don’t decide which sidebar is on which page. But, what that plugin allows you to do is place certain widgets on certain pages. Take a look at the documentation for the plugin. For instance on the screenshot:
http://wordpress.org/extend/plugins/widget-logic/screenshots/
You can see that each widget you place in your sidebar now gets an extra field for you to fill in with a conditional. Read about them here:
http://codex.wordpress.org/Conditional_Tags
So, you can use things like:
!is_home()
Which would tell the widget to appear everywhere EXCEPT the home page (The ! means not… so is_Home means to only show on the home page, !is_home means to show everywhere but the home page)
So you can either use your shop’s page ID, or page name.
Then, lets say you have a widget you want to appear everywhere except the shop, you could put
!is_page( ‘shop’ )
But for your shopping cart widget, you want that only on your shop page so you would use
is_page( ‘shop’ )
So by filling in conditionals for each widget, you can customize where certain widgets appear
I’m a newb at wordpress coding, and I just want to say after nearly pulling my hair out over this. THANK YOU! You explained it so simply!
I’m quite glad you found the post useful!!
Hi, I’ve been following this to add an extra side bar to the right of the single post template. I’ve managed to add the side bar but it is to the left of the content. So it goes like “Sidebarleft – Sidebarright – Content” rather than “Sidebarleft – Content – Sidebarright”.
Any idea why this is and why it isn’t sitting correctly, i.e. floating right?
Cheers
It would be hard to say without seeing the site. It should be a simple fix, but a couple of things could be causing it.
Вуду, я пробовал то, что предлагаешь ты. Но у меня ничего не получалось. Потратил две недели на попытки и случайно наткнулся на готовый вариант.
Если кому смогу помочь – пожелайте мне здоровья
http://zeaks.org/child-themes/three-column-twenty-eleven/
Translation:
Voodoo, I tried what you suggest. But I could not. Spent two weeks on trying and stumbled on the finished version.
If anyone can help – wish me health