Bainternet WordPress Consultant
  • WordPress Services
  • Blog
    • Fancy Functions
    • ShortCodes
    • How To’s
  • Plugins
    • Post Editor Zen Coding
    • Advanced Code Editor 2.0
      • other older versions
    • ShortCodes UI
    • User specific Content
    • Simple QR Code
    • Sidebar per user role
    • Simple TOC
    • Post Creation Limits
      • Posts Creation Limits older versions
    • User Ranks
      • Bainternet User Ranks v1.0
    • Custom Category Template
    • Author category
    • Simple Gist Embed
    • WordPress Simple Instant Search Plugin
    • GoTo Redirect
    • Simple Google +1 plugin
  • About Me
    • Donations
  • Contact me

Add Sidebar on Single Posts and Pages in Twenty Eleven

Posted on Jul 14, 2011
Ohad Raz
27 Comments
How To
  • Share on Facebook.
  • Share on Twitter.
  • Share on Google+
  • Share on LinkedIn
Add Sidebar on Single Posts and Pages in Twenty Eleven

Background

The New default Twenty Eleven theme that comes with WordPress 3.2 is one of the most functional filled themes ever ,with more comments the code, this theme is aimed to show almost all of the WordPress templates system for theme developers. Which is great for people who know code but not for the rest of the world.

One major change was the wide post and page layout without a sidebar (probably the first version of WordPress that comes with a default theme with no sidebar in posts since sidebars came out). I’ve been asked over and over how to get the sidebar back by bloggers who love the theme but hate to loose there navigation menus and advertisements that used to be in the sidebar.

Twenty Eleven post sidebar

Twenty Eleven post sidebar

Lets Get Started

Since Twenty Eleven is a theme that comes with WordPress, that means that all of the changes you make to that theme will be lost on the next time you update WordPress so to avoid that you will need to create a child theme first, so

  1. Create a new directory under wp-content/themes/ and name it as your child theme (I’ll call it TWchild for the sake of the tutorial bit you can call it what ever you want).
  2. Create a new file in that directory and name it functions.php
  3. Create a new file in that directory and name it style.css
  4. Open up the newly created style.css file and enter this to it:
/*
Theme Name: TWchild
Author: Bainternet
Description: 2011 child theme for WordPress
Author URI: http://en.bainternet.org/
Template: twentyeleven
*/
 
@import url(../twentyeleven/style.css);

That’s all we need to start with a new child theme.

Edit Code

Do not be sacred since you are editing a child theme noting can go wrong with the original theme and you can always go back and start over.

  1. Copy page.php and single.php from the twentyeleven directory to your new child theme’s directory
  2. Open page.php and single.php from your new child theme directory and add
    <?php get_sidebar(); ?>

    just above the line:

    <?php get_footer(); ?>

Next we need to remove the `singular` class from the body class and to do so we need to create a simple function in our functions.php

  1. Open up your newly created functions.php and add this code to it:
<?php
add_filter('body_class', 'fix_body_class_for_sidebar', 20, 2);
function fix_body_class_for_sidebar($wp_classes, $extra_classes) {
	if( is_single() || is_page() ){ 
	   if (in_array('singular',$wp_classes)){
			foreach($wp_classes as $key => $value) {
				if ($value == 'singular') 
					unset($wp_classes[$key]);
			}
		}
	}

	 return array_merge($wp_classes, (array) $extra_classes);
}
?>

Finishing Touches

You will need to edit your theme’s CSS and to do so you will once again only make changes to your newly created files, so open up the style.css we have created and add at the end of it:

.single #author-info {
   background: #f9f9f9;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   margin: 2.2em 0% 0 0%;
   padding: 20px 35.4%;
}

that is it hope you get the point, as a side not this was written when version 3.2 came out and just a week later we already have a new version 3.2.1
make sure to update.

Incoming search terms:

  • wordpress twenty eleven show last five posts
  • blog sidebar wordpress twenty eleven
  • twenty eleven single category
  • twenty eleven single php
  • twenty eleven theme make menu appear in sidebar
  • twenty eleven theme wordpress can i have a tab for writing
  • twenty eleven use sidebar template as default
  • Twenty Eleven wordpress add sidebar to pages

Related posts:

  1. Posts Creation Limits
  2. Custom Post type getting 404 on Permalinks
  3. How To – list categories with Images






Loading comments...
  • About the author

    Ohad Raz

    I'm a WordPress Consultant, a WordPress Developer and a WordPress Freelancer
    Currently in my third year of Software Engineering B.Sce Degree.
    I've been developing Websites and web applications on WordPress for over 5 years.
    I live in Kiryat Gat , Israel.

    • Write an E-Mail
  • Other Methods of contact

    My profile on WordPress Answers

    profile for Bainternet at WordPress, Q&A for WordPress developers and administrators

    • My Code Poet listing

    • My Careers 2.0 Profile

    • My Gravatar.com Profile

    • My About.Me Profile

    • Contact Form

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.





  • Recent Comments

    • WordPress Developer Ohad Raz on Advanced Code Editor 2.0
    • WordPress Developer anupam on Advanced Code Editor 2.0
    • WordPress Developer Ohad Raz on how to – WordPress Category Extra Fields
    • WordPress Developer Luismin on how to – WordPress Category Extra Fields
    • WordPress Developer Ohad Raz on Advanced Code Editor 2.0
  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

  • Top Posts & Pages

    • WordPress Taxonomies Extra Fields the easy way
    • how to - WordPress Category Extra Fields
    • How I add a WordPress MetaBox
    • My Options Panel


  • About Me
  • Blog
  • Contact me
  • disclaimer
  • Donations
  • home posts
  • WordPress Services
© 2011 by Bainternet WordPress Consultant