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

Close


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.

If you have no idea what a child theme is or why you would need one then here is a video that should help answer both questions.

 

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 sets of WordPress videos at White Label PLR Videos Volumes 03, 08 & 13.

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 a creator of private label training videos for the technical side of the internet marketing niche.

He earned his Real Estate Sales then Brokers licensee for Missouri in the early 90's. Then he opened, owned & operated 3 Real Estate offices in the St.Louis area until 2000. In 2006 Steve began his new calling with online marketing. In 2008 he started PLR Video Direct and has created 100's of white label and private label training videos since.

Steve lives just outside Kansas City Missouri on 5 acres and when he is not creating videos he is outside gardening & enjoying the wildlife that county living provides.

You can reach Steve at steve @ plrvideodirect.com and if you do not hear back from him within 24 hours then he did not receive it & you should send it again.

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

6 thoughts on “How To Add A Sidebar To The Posts Page In The Default 2011 WordPress Theme

    1. Steve Post author

      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.

      Reply

Leave a Reply

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


*

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>