If we are following the tutorials then we would have a new set of widgetized areas, in this section we will be working with the right sidebars, we created two right sidebars and will create two template parts and two template pages, we will also need to adjust the inline styles to accommodate the right sidebars.

In this tutorial we will be identifying the structure and the styles we need to change for our right sidebars, we will work with both the default sidebar and second right sidebar.

We will create template pages that can be applied from the admin area with different sidebar combinations, we will also create template parts that will add our new sidebars, this will reuse the new element we created to hold the two sidebars for the two right sidebars page.

Right Sidebar 3

With our favourite text editor create a new file in the child themes folder called sidebar-3.php, and add the code below, this returns a container and the sidebar, notice the differences the div id is now primary, the sidebar name, and the inline style (style=”width:150px”) this is setting a narrow width for sidebar 3.

<?php
/**
* The Right Sidebar Two Secondary widget areas.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?>
<?php
// Right Sidebar Two for Widgets.
if ( is_active_sidebar( 'sidebar-right-two' ) ) : ?>
  <div id="primary" style="width:150px" role="complementary">
    <ul>
      <?php dynamic_sidebar( 'sidebar-right-two' ); ?>
    </ul>
  </div><!-- #primary .widget-area -->
<?php endif; ?>

Two Right Sidebars

With our favourite text editor create a new file in the child themes folder called sidebar-two-right.php, and add the code below, this returns a new container with both sidebars, notice the different inline styles.

<?php
/**
* The Right Sidebars Two Primary widget areas.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
?>
<div id="sidebars" style="float:right; position:relative; width:370px;" >
<?php
  // Right Sidebar One (Default) for Widgets.
  if ( is_active_sidebar( 'sidebar-right-one' ) ) : ?>

    <div id="primary" role="complementary">
      <ul>
        <?php dynamic_sidebar( 'sidebar-right-one' ); ?>
      </ul>
    </div><!-- #primary .widget-area -->

<?php endif; ?>
<?php
// Right Sidebar Two for Widgets.
if ( is_active_sidebar( 'sidebar-right-two' ) ) : ?>
  <div id="primary" style="width:150px;" role="complementary">
    <ul>
      <?php dynamic_sidebar( 'sidebar-right-two' ); ?>
    </ul>
  </div><!-- #primary .widget-area -->
<?php endif; ?>
</div>

That is our two template parts created, these will be called in the template pages with call get_template_part, now we can create two template pages.

Templates

Unlike the left sidebars we only need to create two template pages, the theme already has a default template which has the ‘Right Sidebar One’ 220px sidebar page, this sidebar is shown on all default pages like archives, single post and search results.

Page Sidebar 3

With our favourite text editor create a new file in the child themes folder called page-sidebar3.php, and add the code below, this is our template page with a single narrow 150px right sidebar, populated from the widget area “Right Sidebar Two”, notice the reduced margin inline style 210px as our sidebar is 150px, and the get_template_part call is now at the bottom of the file, as we are calling the right sidebars.

<?php
/**
 * Template Name: Narrow Right Sidebar Content
 *
 * A custom page template with a narrow left sidebar.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>

  <?php /* Style content area only */ ?>
  <div id="container">
   <div id="content" style="margin: 0 210px 0 20px;" role="main">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
     <?php if ( is_front_page() ) { ?>
      <h2 style="display:none;"><?php the_title(); ?></h2>
     <?php } else { ?>
      <h1 style="display:none;"><?php the_title(); ?></h1>
     <?php } ?>
     <div>
      <?php the_content(); ?>
      <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
      <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
     </div><!-- .entry-content -->
    </div><!-- #post-## -->
    <?php comments_template( '', true ); ?>
<?php endwhile; ?>
   </div><!-- #content -->
  </div><!-- #container -->
<?php /* Get the Right Sidebar 2 */ ?>
<?php get_template_part( 'sidebar', 3 ); ?>
<?php //NOT REQUIRED get_sidebar(); ?>
<?php get_footer(); ?>

Here is our page with the narrow right Sidebar:

Page Sidebars Right

With our favourite text editor create a new file in the child themes folder called page-sidebars-right.php, and add the code below, this a new template page with both right sidebars, from the widget area “Right Sidebar One” and “Right Sidebar Two”.

This is the same as the other pages but the template name has changed, template part sidebar is calling ‘two-right’, and the styles margin values have been change to 420px for the wide sidebars, also notice that as the elements are float right, and Right Sidebar One is called before Right Sidebar Two, but two is shown before one on the page.

<?php
/**
* Template Name: Two Right Sidebars Content
*
* A custom page template with two right sidebars.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/
get_header(); ?>
<?php /* Style container and content areas */ ?>
<div id="container" style="margin: 0 -420px 0 0;">
 <div id="content" style="margin: 0 420px 0 20px;" role="main">
  <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
   <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <?php if ( is_front_page() ) { ?>
     <h2 style="display:none;"><?php the_title(); ?></h2>
    <?php } else { ?>
     <h1 style="display:none;"><?php the_title(); ?></h1>
    <?php } ?>
    <div>
     <?php the_content(); ?>
     <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
     <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>', '</span>' ); ?>
    </div><!-- .entry-content -->
   </div><!-- #post-## -->
   <?php comments_template( '', true ); ?>
  <?php endwhile; ?>
 </div><!-- #content -->
</div><!-- #container -->
<?php /* Get the Two Right Sidebars */ ?>
<?php get_template_part( 'sidebar', 'two-right' ); ?>
<?php //NOT REQUIRED get_sidebar(); ?>
<?php get_footer(); ?>

Here is our page with the two right sidebars:

That covers our right hand sidebars, all that is left to do now is test the output, we have tested in FireFox and IE8, please feedback results in other browsers and any comments.