Add sidebar to post view in Twenty Eleven theme

Posted on by

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.



This entry was posted in Uncategorized by Zeaks. Bookmark the permalink.

37 thoughts on “Add sidebar to post view in Twenty Eleven theme”

  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 ↓

  11. BLR on April 26, 12 at 9:06 pm said:

    Zeke, your information is wonderful. I just can’t figure out what I did wrong. My comment #respond, for my blog isn’t working at all. I still get an error.

    http://www.avsoffice.com/what-does-sba-gov-have-to-say/#respond

    I also continue to get the error message: 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); }

    Can you tell me what I did wrong?

    Best regards, and thank you in advance,
    BLR recently posted..What Does SBA.gov Have To Say?My Profile

    Reply ↓

      • Thank you for getting back to me.

        I tried several different ways to add the functions.php code in the CHILD theme.

        a) added to the bottom.
        b) put at beginning.
        c) overwrote the other code in there.

        My pages are fine, it is the posts that are giving me this code. Step 1 at least made some improvement. Which added the sidebar contents, whereas before it was only the error message.

        Thank you again!
        BLR recently posted..What Does SBA.gov Have To Say?My Profile

        Reply ↓

  12. @Blr http://www.avsoffice.com/what-does-sba-gov-have-to-say/ is missing it’s style, I can’t even view the source of your website to see what theme you’re using. (I know it’s twenty eleven or a child theme)

    If you could zip your theme and email it to me, or post it to me as an attachment in a message on the forums I’ll have a look. It isn’t a question of if the code works, it cannot with because it’s not being executed.

    Was this theme installed by your webhost or did you download it from WordPress.org? Sometimes webhosts add their own code to scripts they offer which could be causing issues with this code. This is the same code I use on this site and in NomNom theme.

    Reply ↓

      • Your functons file looks fine, your single.php is missing it’s code, the function does not get added to single.php only the sidebar call as it says. Copy single.php from Twenty Eleven, and add the sidebar call to it. This is why that page is not displaying anything properly.

        Reply ↓

        • Oh Zeaks! I owe you a GREAT BIG virtual hug! Thank you!

          Just one more question, I create child themes for everything. Why would WordPress overwrite those if they are in a child theme folders. I suspect it may be because the opening has to read: /* The Child Template for … */ or reference somewhere in the opening a Child Theme, but I am not positive.

          Respectfully submitted,
          BLR recently posted..An Effective Business Card (Part 2)My Profile

          Reply ↓

          • WordPress won’t overwite them, the template tags don’t matter. As long as the child theme is in it’s own folder and not named the same as the default themes.

          • Thanks, any idea how this can happen then? A couple of times, after I ran an update from WordPress and themes a couple of folks’ websites, I have lost footer information, referencing my services. I usually add a small business graphic and I add it, in addition to the “Proudly Powered by WordPress… and theme info.” Once I rememove the W.P. & Theme info all together, but still, the W.P. & Theme info come back, and my info gets deleted. It’s very frustrating. All child info is in their own folder. It’s bizzarre.

  13. Start a thread on the forums and post the code your using, also mention what files you’re adding it to. When upgrading wordpress the only themes it comes with are Twenty Eleven and Twenty Ten, so there’s nothing that is able to overwrite what is in your child theme.
    The only thing I can think of is you’re upgrading it from your webhost, instead of the upgrade option in WordPress admin, then it may remove the current install and reinstall it. I seem to remember your site being some sort of WordPress install host, I couldn’t even view the source of your page, so this might be the issue.

    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