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.