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 left sidebars, we created two left sidebars and will create three template parts and three template pages, we will also need to adjust the stylesheet blocks to accommodate the left sidebars.

In this tutorial we will be looking at the themes page layout with FireBug, identifying the structure and the styles we need to change for our left sidebars.

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 mean creating a new element to hold the two sidebars for the two left sidebars page.

FireBug

If you installed FireBug in the getting started tutorial the use this to look at the structure of a WordPress page, we are interested in the in the container, content and primary elements.

The image below shows us that the content area has a small left margin and a large right margin, these are the yellow areas, we will adjust this later in the tutorial, spend some time looking at the different elements including the ‘primary’ which holds the right sidebar.

We had a comment about firebug and how to use it, this short and crude clip may help as we explore our new sidebars.

Stylesheet

Our left hand sidebar will need a page theme element, in the Twenty Ten theme the developers already have two ‘primary’ and ‘secondary’, the primary container is used for the right sidebar, and the secondary was to hold the second right sidebar widgetized area.

We will use the secondary container for our left sidebars, we also need a new element, this will contain both left sidebars, open the child themes style.css and add these lines.

/* Switch sidebar to the left */
#secondary {
    float:left;
}

/* Container for two sidebars  */
#sidebars {
    overflow:hidden;
    width:370px;
}

The first block changes the float of the secondary container to the left of the theme, this overrides the float in the parents style.css file.

Block two ‘sidebars’ is just a wrapper container, we will be including both the ‘Left Sidebar 1′ and ‘Left Sidebar 2′ inside this container, for a double sidebar template page. 

Left Sidebar 1

We know there are plugins that will allow different widgets to output on different pages so why are we using three sidebars, as WordPress evolves many less supported widgets stop working, however core functions will continue to be supported.

We also want different widths, Left Sidebar 1 will be same as the default 220px, but our second sidebar will be 150px.

With our favourite text editor create a new file in the child themes folder called sidebar-1.php, and add the code below, this returns a container and the sidebar.

<?php
/**
 * The Left Sidebar One Secondary widget areas.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<?php
    // Left Sidebar One for Widgets.
    if ( is_active_sidebar( 'sidebar-left-one' ) ) : ?>

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

<?php endif; ?>

 Looking at the code element of this block WordPress will look to see if Sidebar Left One is populated with widgets

If it has widgets then it will output the secondary container element and the sidebar widgets into an unordered list, this code was copied from the sidebar.php and altered for our own use.

Left Sidebar 2

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

<?php
/**
 * The Left Sidebar Two Secondary widget areas.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<?php
    // Left Sidebar Two for Widgets.
    if ( is_active_sidebar( 'sidebar-left-two' ) ) : ?>

        <div id="secondary" style="width:150px" class="widget-area" role="complementary">
            <ul class="xoxo">
                <?php dynamic_sidebar( 'sidebar-left-two' ); ?>
            </ul>
        </div><!-- #secondary .widget-area -->

<?php endif; ?>

Two Left Sidebars

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

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

    <?php
    // Left Sidebar One for Widgets.
    if ( is_active_sidebar( 'sidebar-left-one' ) ) : ?>

        <div id="secondary" class="widget-area" role="complementary">
            <ul class="xoxo">
                <?php dynamic_sidebar( 'sidebar-left-one' ); ?>
            </ul>
        </div><!-- #secondary .widget-area -->
    <?php endif; ?>

    <?php
    // Left Sidebar Two for Widgets.
    if ( is_active_sidebar( 'sidebar-left-two' ) ) : ?>

        <div id="secondary" style="width:150px" class="widget-area" role="complementary">
            <ul class="xoxo">
                <?php dynamic_sidebar( 'sidebar-left-two' ); ?>
            </ul>
        </div><!-- #secondary .widget-area -->
    <?php endif; ?>
</div>

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

Template Pages

With WordPress we can have different page layouts for different pages, to do this we use a copy of the page.php file and modify this for our template page, WordPress looks through the files in the template directory looking for the template pages.

For us to tell WordPress that this is a template page we add a tag at the first lines in the file, lets look at the file in the twentyten parent directory called onecolumn-page.php

<?php
/**
* Template Name: One column, no sidebar
*
* A custom page template without sidebar.
*
* The "Template Name:" bit above allows this to be selectable
* from a dropdown menu on the edit page screen.
*
* @package WordPress
* @subpackage Twenty_Ten
* @since Twenty Ten 1.0
*/

 We will look at the first 13 lines, these are all comment lines, the one that WordPress is interested in is the tag line * Template Name: One column, no sidebar, this lines tells WordPress this is a template page called ‘One column, no sidebar’.

If we went to the admin area of WordPress and Pages > Pages selected any page and Quick Edit we will see a dropdown with the different template pages.

We could declare our template pages with just three lines but the comments lines will help us keep track, and we could add some comments to help us later.

Page Sidebar 1

With our favourite text editor create a new file in the child themes folder called page-sidebar1.php, and add the code below, this is our first template page with a single 220px left sidebar, from the widget area “Left Sidebar One”.

<?php
/**
 * Template Name: Left Sidebar Content
 *
 * A custom page template with a single left sidebar.
 *
 * @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 0 0 -220px;">
            <div id="content" style="margin: 0 0 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 class="entry-title" style="display:none;"><?php the_title(); ?></h2>
                    <?php } else { ?>
                        <h1 class="entry-title" style="display:none;"><?php the_title(); ?></h1>
                    <?php } ?>

                    <div class="entry-content">
                        <?php the_content(); ?>
                        <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
                        <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
                    </div><!-- .entry-content -->
                </div><!-- #post-## -->

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

<?php endwhile; ?>

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

<?php //NOT REQUIRED get_sidebar(); ?>
<?php get_footer(); ?>

What we have done here is copied the page.php file, added the code to output our theme, notice the style changes to the container and content elements, our changes are as below.

• Lines 1 – 10 are the template name declaration and our comments
• Lines 14 – 15 this is where we add sidebar 1 to the page
• Lines 17 – 19 we have added style code for the container and content to adjust where the content is output
• Line last but one added //NOT REQUIRED this disables the right sidebar, this line could be deleted

Page Sidebar 2

With our favourite text editor create a new file in the child themes folder called page-sidebar2.php, and add the code below, this is our first template page with a single 150px left sidebar, from the widget area “Left Sidebar Two”.

This is the same as Page Sidebar 1 but the template name has changed, template part sidebar is calling 2, and the styles margin values have been change for the narrow sidebar.

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

get_header(); ?>

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

        <?php /* Style the container and content area's */ ?>
        <div id="container" style="margin: 0 0 0 -150px;">
            <div id="content" style="margin: 0 0 0 170px;" 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 class="entry-title" style="display:none;"><?php the_title(); ?></h2>
                    <?php } else { ?>
                        <h1 class="entry-title" style="display:none;"><?php the_title(); ?></h1>
                    <?php } ?>

                    <div class="entry-content">
                        <?php the_content(); ?>
                        <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
                        <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
                    </div><!-- .entry-content -->
                </div><!-- #post-## -->

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

<?php endwhile; ?>

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

<?php //NOT REQUIRED get_sidebar(); ?>
<?php get_footer(); ?>

Page Sidebars Left

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

This is the same as the other pages but the template name has changed, template part sidebar is calling ‘two-left’, and the styles margin values have been change for the wide sidebars.

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

get_header(); ?>

        <?php /* Get the two left Sidebars */ ?>
        <?php get_template_part( 'sidebar', 'two-left' ); ?>

        <?php /* Style the container and content area's */ ?>
        <div id="container" style="margin: 0 0 0 -370px;">
            <div id="content" style="margin: 0 0 0 370px;" 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 class="entry-title" style="display:none;"><?php the_title(); ?></h2>
                    <?php } else { ?>
                        <h1 class="entry-title" style="display:none;"><?php the_title(); ?></h1>
                    <?php } ?>

                    <div class="entry-content">
                        <?php the_content(); ?>
                        <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
                        <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="edit-link">', '</span>' ); ?>
                    </div><!-- .entry-content -->
                </div><!-- #post-## -->

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

<?php endwhile; ?>

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

<?php //NOT REQUIRED get_sidebar(); ?>
<?php get_footer(); ?>

That covers our left hand sidebars, all 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.