How To Add A Sidebar To The Posts Page In The Default 2011 WordPress Theme



How To Add A Sidebar To 2011 Posts Page

How to add a sidebar to the post page in the 2011 themeI simply love the default 2011 theme. It has its pros & cons, but for me, there are more pros than the cons.

One of the cons is that there is not a sidebar for your individual posts pages like in the 2010 default theme.

This post will change that for you because I will show you how to add a sidebar to your posts pages.

For those of you that want to jump ahead (I applaud your enthusiasm) I have included a link to download a child-theme for you to install that contains all the goodies you need to add the sidebar. The child-theme also does a couple other modifications that are described in the video I’ve included in this post.

So if you want to learn how to install the child-theme or learn about the other goodies I’ve added to the child-theme, then you’ll just have to spend a little less than 4 minutes and watch this video.

 

Here is a detailed breakdown of what is in the child-theme.

This child-theme contains 4 items. The style.css, single.php, functions.php & the screenshot.png thumbnail image to show off in the WordPress dashboard in the themes area.

Here are the added styles or elements that make adding the sidebar happen.

The easiest way is to just use this child-theme I made for you and install & activate it as shown in the above video.

CLICK HERE TO DOWNLOAD CHILD-THEME

There are a few different variations to this but these will do the trick.

The style.css should have the following added: (always add new elements to the bottom of the existing elements)

/*
1 - A few adjustments for adding sidebar to post pages
---------------------------------------------------*/

.nav-previous {

float: left !important;

}

#respond {

margin: 0 auto 1.625em;

padding: 1.625em;

position: relative;

width: 88.9%;

}

.commentlist {

width: 78.9%;

}

/*
2 - DESCRIPTION: Adjust author bio
------------------------------*/

.singular #author-info {

margin: 2.2em 0 0;

padding: 20px 5.4%;

width: 550px;

}

/*

3 - LAYOUT: One column, no sidebar
DESCRIPTION: Adjustments-make the percentage between 70%-99%
-----------------------------------------------------------*/

.singular .entry-header,

.singular .entry-content,

.singular footer.entry-meta,

.singular #comments-title {

margin: 0 auto;

width: 90%;

}

/*
4 - Remove the Previous & Next navigation links
-------------------------------------------- */

.nav-previous {
float: left;
width: 50%;
display: none;
}
.nav-next {
float: right;
text-align: right;
width: 50%;
display: none;
}

/*
5 - Remove the Edit link from the
-------------------------------- */

.singular .entry-meta .edit-link a {
bottom: auto;
left: 50px;
position: absolute;
right: auto;
top: 80px;
display: none;
}

The last 2 elements (numbers 4 and 5) are optional because (as shown in the video above) they remove the ‘previous’ ‘next’ & ‘EDIT’ links from your post pages and your single pages respectively.

Next is the single.php file.

At the bottom of the file, just above the ‘get_footer’ element, you need to add the following:

<?php get_sidebar(); ?>

 

how to add sidebar to 2011 theme

 

By the way, I should also mention what I figure to be the obvious, but be sure to save after any changes are made.

The last file to edit or add to your child theme if you are not using the one I’ve furnished, is the functions.php file .

If you are going to be stubborn and I’m being nice when I say that, and not use a child-theme for these customizations, then you need to add the following code to the bottom of your parent themes functions.php file

 

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);

}

 

Now for everyone that wants to do it the right way ;-) then you will open a text document in your notepad or better yet, a free text editor like notepad ++ and add the following code and save as functions.php. Then add this functions.php file along with your single.php file to your own child theme folder. That and the newly added elements to your child themes style.css file and you are now sporting a sidebar in your posts pages.

 

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

}

 

I think that should just about do it.

Between this, the video above, and the included child-theme, you should be able to add the modifications to your WordPress site so you can get your sidebar on your post pages.

If you would like to learn more about WordPress then you should look at my series of WordPress videos at EzWP3.com

Please let me know your input by leaving a comment and if you liked what I posted, please hit the +1 & the Like buttons and let others know.

Thanks so much for checking out my post.

- Steve Dougherty

About

Steve Dougherty | My Facebook Profile | My YouTube Channel
Steve Dougherty is the owner and admin of PLR Video Direct. Steve creates re-brandable training videos.

Share and Enjoy:
  • Digg
  • StumbleUpon
  • Facebook
  • Reddit
  • LinkedIn
  • Tumblr
  • Twitter
  • Shelle-K

    Thanks for the child theme and customization tips Steve! Always appreciate your work :-)

    Shelle

    • http://www.plrvideodirect.com Steve

      Hi Shelle,

      You are very welcome.

      Thank you for stopping by & please let me know if there is anything I can help you with Shelle.
      - Steve D.

  • http://Uconcept.com Janet Garcia

    Great post Steve. I was working on some training videos when I found that the 2011 didn’t included the sidebar on pages.

    • http://www.plrvideodirect.com Steve

      Hi Janet,

      Thank you and I hope you are able to get some use out of the other 2011 customizations :-)

      - Steve D.

  • http://thelakengroup.com Jeff Q.

    Awesome bit of Sharing there Steve!

    Very Grateful as Always,

    Jeff

    • http://www.plrvideodirect.com Steve

      Hey there Jeff,

      Thank you. Glad you are liking the goods.

      - Steve D.