Twenty Eleven – Two Sidebars with Content First

The WordPress Twenty Eleven theme only offers 1 sidebar which doesn’t actually appear when viewing single posts. We are going to show you how to add a second sidebar and make both appear when viewing single posts.

The method we use in this example puts the content first. Having your content appear before sidebars in your HTML structure is a good practice and helps indicate the most important content on the page.

Adding your new sidebar

Create a child theme of Twenty Eleven, so that future updates do not erase your changes.

Sidebar.php

1. Copy sidebar.php to your child themes folder, and rename to sidebar-left.php
2. Open sidebar-left.php and find this line:

   <div id="secondary" class="widget-area" role="complementary">
   	<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

3. Replace with:

   <div id="tertiary" class="widget-area" role="complementary">		
   	<?php if ( ! dynamic_sidebar( 'sidebar-6' ) ) : ?>

Functions.php

1. Create functions.php in your child theme folder
2. Add the following lines:

   <?php 
   add_action( 'after_setup_theme', 'my_child_theme_setup' );
   
   function register_new_sidebar() {
   	register_sidebar( array(
   		'name' => __( 'Left Sidebar', 'twentyeleven' ),
   		'id' => 'sidebar-1',
   		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
   		'after_widget' => "</aside>",
   		'before_title' => '<h3 class="widget-title">',
   		'after_title' => '</h3>',
   	) );
   }
   
   function my_child_theme_setup() {
   	add_action( 'twentyeleven_widgets_init', 'my_unregister_sidebars', 11 );
   	// IF you don't want sidebars on author pages or on single.php, remove the next line
   	remove_filter( 'body_class', 'twentyeleven_body_classes' );
   }
   

   Note: DO NOT add a php closing tag!

Style.css

We need to add the CSS styling for #tertiary. You should have already created a copy of the stylesheet in your child theme.

1. Find these lines:

   ]#primary {
   	float: left;
   	margin: 0 -26.4% 0 0;
   	width: 100%;
   }
   #content {
   	margin: 0 34% 0 7.6%;
   	width: 58.4%;
   }
   #secondary {
   	float: right;
   	margin-right: 7.6%;
   	width: 18.8%;
   }

2. Replace with:

   #primary {
   	float: left;
   	margin: 0 -100% 0 0;
   	width: 100%;
   }
   #content {
   	padding: 0 26% 0 26%;
   	margin:0;
   	width: 48%;
   }
   #secondary {
   	float: right;
   	margin-right: 2.6%;
   	width: 18.8%;
   }
   #tertiary {
   	float: left;
   	margin-left: 2.6%;
   	width: 18.8%;
   }
   

3. Find:

   /* Simplify the basic layout */
   	#main #content {
   		margin: 0 7.6%;
   		width: auto;
   	}
   	#nav-below {
   		border-bottom: 1px solid #ddd;
   		margin-bottom: 1.625em;
   	}
   	#main #secondary {
   		float: none;
   		margin: 0 7.6%;
   		width: auto;
   	}

4. After, Add:

   	/* Simplify the basic layout */
   	#main #content {
   		margin: 0 7.6%;
   		width: auto;
   		padding:0;
   	}
   	#nav-below {
   		border-bottom: 1px solid #ddd;
   		margin-bottom: 1.625em;
   	}
   	#main #secondary {
   		float: none;
   		margin: 0 7.6%;
   		width: auto;
   	}
   	#main #tertiary {
   		float: none;
   		margin: 0 7.6%;
   		width: auto; 
   	}
   	#primary {
   		width:100%;
   		margin: auto;
   		width: 100%; 
   	}

Update your theme files

1. Copy the following files to your child themes folder:
   category.php, archive.php, author.php, index.php, search.php, sidebar-page.php, tag.php
2. Within each, Find:

   <?php get_sidebar(); ?>

3. Before, Add:

   <?php get_sidebar('left'); ?>  

I’ll be creating a child theme and uploading it within the next week when I find the time. I’d also like to hold off on releasing a child theme here until I have fully tested the cross browser functionality.

Enjoy!