We tackled the two content columns a few times for different themes in the past, now we want to look at the new WordPress default twenty eleven theme.

We are going a little further with a content file with arguments we can set for thumbnails.

We cannot just re-use the code from our twenty ten theme as the twenty eleven theme will re-size itself for different browsers, if we just transfer a bit of code from twenty ten, what will we have.

Full Browsers

This would be our output for two post column’s in the twenty eleven theme, if we follow the older solutions, it looks as expected full posts to the left and right columns.

Child Theme Download

You may download the file here or visit the All Downloads page for other files.

index.php

In the index.php we add a counter and some conditional code, we add two additional classes for our left and right columns, this is a code snippet of the final index.php code.

We initialise the counter, the $class is a switch that divides by two if there is a remainder then returns true for column one, this has a right margin and clear: both styles, it will return false for column two.

The $first variable is used later to switch off a top-border style for the first two posts in row one.

<?php /* Start Two Column Support */ ?>
<?php $counter = 1; ?>

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

   <?php /* Two Column Support get class */ ?>
   <?php $class = ( $counter % 2  ? ' one' : '' ) ?>
   <?php $first = ( $counter < 3  ? ' first' : '' ) ?>

   <?php /* Two Column output open the div class */ ?>
   <div class="column<?php echo $class; echo $first; ?>">

      <?php get_template_part( 'content', 'index' ); ?>

   </div>

   <?php $counter++; //Update Counter ?>
<?php /* End Two Column Support close div class */ ?>

<?php endwhile; ?>

Mobile and Handheld Browsers

As we can see there would be a problem with small browsers on handheld or mobile devices, on smaller screens the headings are just to big.

Twenty Eleven will resize the post heading, but we have wrapped it in a new div, so we will need to deal with the headings styles.

.column {
   float: left;
   position: relative;
   width: 46%;
   border-top: dashed 1px #ccc;
}

.one {
   clear: both;
   margin-right: 7.6%;
}

.first {
   border-top: none;
}

.column h1,
.column h2 {
   color: #777;
   font-size: 16px;
   font-weight: bold;
   line-height: 1.25em;
   padding-bottom: 0.3em;
   padding-top: 0.4em;
   padding-left: 0.3em;
}

In a mobile browser we still have two columns so this will also need to be adjusted in the stylesheet.

we add a new style to our style.css we now have a single column on our mobile devices.

/* Change the Layout for mobile version   */
@media handheld, only screen and (max-width: 767px) {
   .column {
      width: 99%;
      margin-right: 0;
   }
}

content-index.php

As an additional feature we created our own loop, by setting some defaults we can control the output of excerpts and post images.

Based on the number of posts per page we could decide what output we want for our website.

We copied content.php from the twenty eleven theme to our child theme and renamed it as content-index.php, this now matches the get template part call we edited in the index.php file.

We wanted to make it easy to adjust the output, we have done this by using two array variables, here is the code snippets for our additions or changes, see the download files.

Added these lines:

<?php
/** Create an array of options
* Set the different dispaly variables to suit the output
*/
$display=Array(
   'thumbnail' => true,
   'thumb_size' => 'thumbnail', //'thumbnail' or 'medium'
   'thumb_align' => 'alignleft', //'alignleft' 'aligncenter' 'alignright'
   'content' => 'excerpt' //'excerpt' or 'default'
);
$size=Array(80,80); //width x height
?>

Edited this line:

<?php if ( is_search() || $display['content'] == 'excerpt' ) : // Only display Excerpts for Search and chosen option ?>

Added this block twice:

<?php /* Do we have a thumbnail to display */ ?>
<?php if( $display['thumbnail'] && has_post_thumbnail() ) : ?>
<div class="<?php echo $display['thumb_align'] ?>">
   <?php echo get_the_post_thumbnail( $post->ID, $size , $display['thumb_size'] ); ?>
</div>
<?php endif; ?>

This layout uses the ‘thumb_size’ = ‘thumbnail’ and the array 100 * 100, Array(100,100), also the ‘excerpt’ for our two column view.

This layout uses the ‘medium’ thumbnail at 250 * 200, that is about the maximum width we can use for two columns.

functions.php

We might want a small image and less words in the excerpt, we have set this in functions.php, this will set the excerpt size for all list views, in our child theme we have set it as 20 words.

This is a code snippet from functions.php see the file in the download for the full code.

/* Remove the default excerpt length for smaller blocks */
remove_filter( 'excerpt_length', 'twentyeleven_excerpt_length' );

/* Change the return value for smaller blocks */
function twentyeleven_child_excerpt_length( $length ) {
   return 20;
}
add_filter( 'excerpt_length', 'twentyeleven_child_excerpt_length' );

This layout uses the ‘thumbnail’ at 80 * 80, and in functions.php we have set the excerpt words to twenty, notice the dotted border and how the posts are all the same height side by side.

The Structure

Here we can see a screenshot of the new two post structure, this is with FireFox and the addon FireBug, the blue area is the column div and the yellow is the margin.