When we planned the theme in the earlier tutorial our home page was designed to have a sidebar on each side, we are going to add and create another layout, not as just the home page but as a template page that can be applied to any blog page, with both the left and the right sidebars.

In this tutorial we will be identifying the structure and the styles we need to change for our three column layout, we will work with four sidebars both the wide and narrow sidebars.

We will create two template pages that can be applied from the admin area with different sidebar widths, we will use the template parts we created earlier to add our sidebars, this will be a good example on the use of template parts.

Layout

As we did not include this layout we will create a new image or sketch for our new page, these layouts can be reused for other themes, and added to as more layouts are required.

Three Column Wide Sidebars

With our favourite text editor create a new file in the child themes folder called page-sidebars-wide.php, and add the code below, this page uses the template part for sidebar 1 the left wide sidebar.

The right sidebar is the default and called with get_sidebar, notice the inline styles for the container and content margins, spend some time with FireBug and explore these settings.

<?php
/**
 * Template Name: Both Wide Sidebars Content
 *
 * A custom page template with both wide sidebars.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>
 <?php /* Get the left Sidebar */ ?>
  <?php get_template_part( 'sidebar', 1 ); ?>

  <?php /* Style the container and content area's */ ?>
  <div id="container" style="margin: 0 -240px 0 -220px;">
   <div id="content" style="margin: 0 280px 0 240px;" 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_sidebar(); ?>
<?php get_footer(); ?>

Three Column Narrow Sidebars

With our favourite text editor create a new file in the child themes folder called page-sidebars-narrow.php, and add the code below, this page uses the template part for sidebar 2 the left narrow sidebar and sidebar 3 the right narrow sidebar.

Both the sidebars are called with the get_template_part(), notice the inline styles for the container and content margins, spend some time with FireBug and explore these settings.

<?php
/**
 * Template Name: Both Narrow Sidebars Content
 *
 * A custom page template with both narrow sidebars.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
get_header(); ?>
 <?php /* Get the Left Narrow Sidebar */ ?>
  <?php get_template_part( 'sidebar', 2 ); ?>
  <?php /* Style the container and content area's */ ?>
  <div id="container" style="margin: 0 -150px;">
   <div id="content" style="margin: 0 180px;" 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 Narrow Sidebar */ ?>
 <?php get_template_part( 'sidebar', 3 ); ?>
<?php //NOT REQUIRED get_sidebar(); ?>
<?php get_footer(); ?>

That covers our three column layouts, if you have followed the tutorials from the start then you can see how it is all fitting together, 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.