Add sidebar to post view in Twenty Eleven theme

Posted by Zeaks in Code Snippets, Twenty Eleven and tagged with , ,

By default Twenty Eleven doesn’t display a sidebar on the post view page, but this can be added fairly easy.
TricksMommy.com describes how this can be done by editing CSS.

I ran into a few issues doing it this way. Using this method when the single column layout is selected, pushes the content to the left without a sidebar showing, it also causes issues with the edit post link and the author Bio if active, there may be other areas not displaying right. These can easily be fixed by adjusting the css.

That might not effect most users, but since I usually allow downloads of child themes I make I needed a better way.

The method I used curtsey of TransformationPowertools.com worked best with very few issues. (slight css edit for next/previous links and resize author bio)

Start off by creating a child theme, this is always the best way to go I don’t care who says it isn’t.

Open single.php and near the bottom add 

<?php get_sidebar(); ?>

right above 

<?php get_footer(); ?>

Now create a functions.php file for your theme and add this to it

<?php
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);
}

Here are a few css adjustments I added, the nav next/previous one is really all that’s needed though.

.nav-previous {
float: left !important;
}
#respond {
margin: 0 auto 1.625em;
padding: 1.625em;
position: relative;
width: 88.9%;
}
.commentlist {
width: 78.9%;
}
/* adjust author bio */
.singular #author-info {
margin: 2.2em 0 0;
padding: 20px 5.4%;
width: 550px;
}

Now your site should display a sidebar properly using any layout.



16 Responses

  4. Your tutorial is the only one that’s actually worked for me. Sigh. However, my real goal was to put two sidebars with the content between in my posts, but the other tutorials I’ve found online have not worked. Is that layout for the post pages just a lost cause?
    Darleene recently posted..Awesome ceiling decorationsMy Profile

    Reply

  5. I was reading your post on wordpress.org, the suggestion given http://wordpress.org/support/topic/twenty-elevel-3-column?replies=18#post-2486487 was right.

    In my NomNom theme I added an extra sidebar. It can still be used for 2 column layouts, but it’s displayed directly under the default sidebar, so it looks like one in all layouts except for 3 column.

    If you were to use a conditional as webmystery mentioned for single post pages, you could use the 3 column layout instead.

    Using the tutorial on voodoopress which you mentioned, would probably do what you needed as well. I remember reading that while I was creating the 3 column layouts for my theme.

    If you can’t get it working, let me know on my forums and I’ll try and help.

    Reply

  7. Thanks for posting this! I’ve been messing around with this for a few hours now. The only problem is that it also aligned my single pages to the left. Do you know how I could keep that from happening? My single pages have no sidebar and I would like to have them still be center aligned.

    Thanks,
    Botzi

    Reply

    • Hi Botzi. Thanks for pointing this issue out. The reason it’s doing this is because I’ve added is_paged to the function. I did this to also include the media pages, guess I’ll have to find a different way to include them.

      Anyways, just remove || is_paged() from the function you added to functions.php so it looks like this

      <?php
add_filter('body_class', 'blacklist_body_class', 20, 2);
function blacklist_body_class($wp_classes, $extra_classes) {
if( is_single()  ) :
// 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);
}
      Reply

  8. Hi,

    You say : “Now create a functions.php file for your theme and add this to it”
    but I stil have a functions.php file !?! What should I do ?

    - Create another functions.php file ? If yes where to put it ?
    - Add the php code (you give) in the existing functions.php ? If yes, where exactly ?

    Thanks in advance.
    Ludovic
    Ludovic recently posted..Implantez vous sur le marché de la perte de poids, et gagnez des milliers d’euros en recommandant le produit d’affiliation Fourneau Bruleur de Graisse…My Profile

    Reply

    • If you already have a functions.php then add the code after your current code. It’s assumed you are using a child theme when following this tutorial.

      If you get errors, I’ll need to take a look at your functions.php file, you’ll have to post it on the forums, or send me a private message on the forums.

      Reply

Leave a Reply

Please use the forums for questions that do not relate to this post.
Wrap code in [code] Your Code Here [/code] tags.

Your email address will not be published. Required fields are marked *

*

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>

CommentLuv badge