When we planned the theme in the earlier tutorial our home page was designed to have a sidebar on each side, we also had four content widgets, we are going to create this as a template page that can be applied to any blog page, with both the left and the right sidebars and four content areas.

In this tutorial we will be identifying the structure and the styles we need to change for our content page layout, we will work with two sidebars and the four content areas.

We will create one template pages that can be applied from the admin area, we will use five of the  template parts we created, this will be another good example on the use of template parts.

Layout

When we designed our home page this was the layout and the one we will create now, however we do not have to use this page.

We can now take any of the layouts we have produced, change the template name in the second line, add our new template parts we will be creating in this tutorial, and save the file with a new name.

There is one part missing from this image and that is the page content, the text we enter when we create the page, that will be included in the new page.

Widgetized Pages

One thing we should be aware of when creating widgetized pages is page load times, it may be better to create a few different template pages with these new content areas.

Widgets slow down the load time of pages, there are a number of cache plugins that will speed up the pages, so plenty of testing is required, there is no point in having a pretty website that takes 10 seconds to load, visitors will just leave.

Content Bottom

With our favourite text editor create a new file in the child themes folder called content-bottom.php, and add the code below, this is the template part for the lower content.

<?php
/**
 * The Content Bottom widget areas.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<?php
 // Content Bottom for Widgets.
 if ( is_active_sidebar( 'content-bottom' ) ) : ?>
  <div id="secondary" style='width: 100%;' role="complementary">
   <ul>
    <?php dynamic_sidebar( 'content-bottom' ); ?>
   </ul>
  </div><!-- #secondary .widget-area -->
<?php endif; ?>

Content Top

With our favourite text editor create a new file in the child themes folder called content-top.php, and add the code below, this is the template part for the upper content.

<?php
/**
 * The Content Top widget areas.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<?php
 // Content Top for Widgets.
 if ( is_active_sidebar( 'content-top' ) ) : ?>

  <div id="secondary" style='width: 100%;' role="complementary">
   <ul>
    <?php dynamic_sidebar( 'content-top' ); ?>
   </ul>
  </div><!-- #secondary .widget-area -->

<?php endif; ?>

Content Middle

With our favourite text editor create a new file in the child themes folder called content-middle.php, and add the code below, this creates the template part for the middle two column content, notice the 50% style for the left and right parts.

<?php
/**
 * The Content Middle Two Secondary widget areas.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<div id="sidebars" style="float:left;">

 <?php
 // Left Sidebar Two for Widgets.
 if ( is_active_sidebar( 'content-left' ) ) : ?>
  <div id="secondary" style="width:50%" role="complementary">
   <ul>
    <?php dynamic_sidebar( 'content-left' ); ?>
   </ul>
  </div><!-- #secondary .widget-area -->
 <?php endif; ?>
 <?php
 // Left Sidebar Two for Widgets.
 if ( is_active_sidebar( 'content-right' ) ) : ?>
  <div id="secondary" style="width:50%" role="complementary">
   <ul>
    <?php dynamic_sidebar( 'content-right' ); ?>
   </ul>
  </div><!-- #secondary .widget-area -->
 <?php endif; ?>
</div>

Content Template

With our favourite text editor create a new file in the child themes folder called page-content.php, and add the code below, this is the template page.

Look for the green comment lines /* this is a comment line */, and the positioning of the three template parts we have just created, top, page content, left and right, then bottom.

<?php
/**
 * Template Name: 3 Column and Content
 *
 * A custom page template with both wide sidebars and content areas.
 *
 * @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 /* Get the top content widgets, we want these above the normal page text */ ?>
  <?php get_template_part( 'content', 'top' ); ?>

<?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 /* Get the middle content widgets, we want these below the normal page text */ ?>
    <?php get_template_part( 'content', 'middle' ); ?>

    <?php /* Get the bottom content widgets, these go before the comment section */ ?>
    <?php get_template_part( 'content', 'bottom' ); ?>

    <?php comments_template( '', true ); ?>

<?php endwhile; ?>

   </div><!-- #content -->
  </div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

 The Page

As a quick test we added the Google adSense code to the top and bottom content areas in a normal text widget.

We then created two new menus in the Appearance > Menus and we called these contentleft and contentright, we went to the top right of the screen and selected screen options and added posts to the menu item lists to do this.

We were then able to add our blog posts to the new menus we created, using the menu widget we added this to our content left and content right widget areas.

This covers our last column layout, if you have followed the tutorials from the start then you will have new tools and a better understanding of some of the new features in WordPress 3.

We will be adding some new learning sections shortly, these will cover extending the code we have already learnt, adding new functions code, and styling the templates.

Lets not leave the learning here, create some new layouts of your own, do not worry about playing with copies of the files we have created, when we say to experiment.

You could take the top content widget and make it site-wide, adding it to the other pages, page.php, single.php, index.php or any of the new template pages we have created (change the template name line 3 and save the file with a new name), this is as easy as adding the two lines outside any loops and before the content, so it is easy.

Study the code and the themes layout as we will be working with this theme for the other tutorials, and the most important thing of all is to enjoy the results you created from what we have learnt.