The seventh in this series of tutorials is adding a two column post content template part, this is one of the most asked for features.

If we follow the steps in this tutorial we will be able to add a two column content template part to our WordPress theme, with a conditional switch, conditional post images, and looked at how we can add the template part to our theme.

We will need to do the following steps, create the template parts, styles and add left and right columns to our theme, and code to switch between the columns.

If you have not worked through the first tutorial you can download the starting theme from the downloads page or from getting started two, this code does require the sample theme, as the post image sizes have be set in the earliar tutorial.

In the download for this tutorial are all the files, in the changes folder are the parts of code we will be adding to existing files, in the final folder are the files after the changes so we can compare our code and a new ‘template part’ files that we will be creating.

Download Support Files: Tutorial 2 Two Post Columns (1527)

Stylesheet

In the changes folder find the file called lesson-7-style.css, this is the code below and should be added to our child themes style.css file.

/* Lesson 7 style Starts here */
.column-left
{
 float: left;
 position: relative;
 margin-right: 20px;
 width: 310px;
}
.column-right
{
 float: left;
 position: relative;
 width: 310px;
}
/* Lesson 7 style ends here */

The first ‘section’ is the left column, notice the margin-right: 20px, that is just to seperate the two columns, we have fixed the width at 301px.

Loop Columns Part

In the child themes folder we create a new file called loop-columns.php and add this code and save the file, or copy the file contents from the final folder.

<?php
/**
 * The loop that displays two columns of posts image and excerpt only.
 *
 * <code>get_template_part( 'loop', 'columns' );</code>
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div id="nav-above" class="navigation">
  <div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyten' ) ); ?></div>
 <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyten' ) ); ?></div>
</div>
<!-- #nav-above -->
<?php endif; ?>
<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>

<div id="post-0">

<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
<div class="entry-content">
<?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?>
   <?php get_search_form(); ?>
  </div>
<!-- .entry-content -->
 </div>
<!-- #post-0 -->
<?php endif; ?>
<?php /* Start the Loop.*/ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* start our two column support */ ?>
<?php $counter+=1; ?>
<?php if($counter % 2) : ?>
<div  class="column-left">
<?php else: ?>

<div  class="column-right">
<?php endif; ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h2><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

<div  class="entry-meta">
    <?php twentyten_posted_on(); ?>
   </div>
<!-- .entry-meta -->
 <?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>

<div class="entry-summary">
    <?php /* Add a conditional image and excertp output */ ?>
    <?php if(has_post_thumbnail()): // Start the condition ?>

<div class="alignleft" style="margin: 0 0 10px 0">
     <?php the_post_thumbnail('small-thumbnail'); ?>
    </div>
     <?php the_excerpt(); ?>
    <?php else : // Offer an alternative ?>
     <?php the_excerpt(); ?>
    <?php endif; // end the condition ?>
   </div>
<!-- .entry-summary -->
 <?php else : ?>

<div  class="entry-content">
    <?php /* Add a conditional image and excerpt output */ ?>
    <?php if(has_post_thumbnail()): // Start the condition ?>

<div class="alignleft" style="margin: 0 0 10px 0">
       <?php the_post_thumbnail('small-thumbnail'); ?>
      </div>
       <?php the_excerpt(); ?>
    <?php else : // Offer an alternative ?>
     <?php the_content( __( 'Continue reading <span>&rarr;</span>', 'twentyten' ) ); ?>
    <?php endif; // end the condition ?>
    <?php wp_link_pages( array( 'before' => '<div>' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
   </div>
<!-- .entry-content -->
 <?php endif; ?>

<div  class="entry-utility">
    <?php if ( count( get_the_category() ) ) : ?>
     <span class="cat-links"><br />
      <?php printf( __( '<span>Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
     </span>
     <span  class="meta-sep">|</span>
    <?php endif; ?>
    <?php $tags_list = get_the_tag_list( '', ', ' ); if ( $tags_list ): ?>
     <span class="tag-links"><br />
      <?php printf( __( '<span>Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
     </span>
     <span  class="meta-sep">|</span>
    <?php endif; ?>
    <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
    <?php edit_post_link( __( 'Edit', 'twentyten' ), '<span>|</span> <span>', '</span>' ); ?>
   </div>
<!-- .entry-utility -->
  </div>
<!-- #post-## -->
  <?php comments_template( '', true ); ?>
<?php /* end our two column support */ ?>
</div>
<?php endwhile; // End the loop. Whew. ?>
<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>

<div id="nav-below" class="navigation">

<div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentyten' ) ); ?></div>

<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentyten' ) ); ?></div>
    </div>
!-- #nav-below -->
<?php endif; ?>

All we have done here is used the code from the twenty ten loop.php, removed the if statement for the asides and gallery categories, added about 20 lines of code for columns and to set the output to post image and excerpt.

• Lines 034 – 040 is the conditional column change based on the counter is divisable by 2 true or false
• Lines 056 – 065 this block (repeated) shows the post thumbnail and excerpt or just the excerpt.
• Lines 106 – 107 Closes the column container

We can add the template part to our pages as we want, in the next tutorial we will use this template part to display two columns of a specific category.