Twenty Eleven Two Post Columns

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.

Twenty Eleven Two Columns

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.

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

15 thoughts on “Twenty Eleven Two Post Columns

  1. Thank you very much for your tutorials, I’m learning quite a bit from them. This particular feature is of great interest to me,however I’m attempting to “kick it up” one more notch. Basically I would like to have a “featured post” area that spans the two columns created. I realize this needs to use a multiple loop technique but for the life of me I cannot get it to work. When placing a simple loop prior to the two column-code all I get is the columns. Any ideas on how to proceed? Thank you!

  2. Thanks great post, I realy want to have 2 columns for my twentyeleven theme. So far I have on top of every post a pic or video with width of 550-590pixel. When having two columns there must be a stylesheet code enforcing those many pics and videos to have only half, approx 280pt width. Otherwise those big pics simply mess up in 2 columns. Thanks for any help!

  3. Firstly, thanks for this great resource. I have a question regarding pulling in custom post types that I’ve created into a page template. And actually I’ve tried both content-about.php and about-page.php. Here’s what I’ve done:

    In your index.php I have changed this piece:

    and in content-about.php in the post types part I have changed this piece:

    ‘myposttype’ is registered in the functions.php file correctly. I’ve had it working on 1 column but now I need the 2-col.

    My post type is not displaying at all but regular post types are displaying nicely in the 2-col format.

    I would really appreciate your help. Thanks.

      • Thanks David for taking a look. I basically just created a page template…page-about.php and added it to your theme folder, and pointed my posts to it in the dashboard settings:
        http://pastebin.com/kYXibm9L

        The only other change I made to the folder was to register the post type, so your functions file ended up looking like this:
        http://pastebin.com/9yCs7QxP

        I have been tinkering with this and just can’t for the life of me figure it out. Really appreciate and help.
        -Lee

      • Hi David,

        I was wondering if you had a chance to look at how to make this 2-col code work within a custom post type?
        And also whereabouts to put a paragraph of static text like an intro above the posts?
        I’ve been stumped on this and would really appreciate some pointers.
        Thanks again. Pastebin is below.

        -Lee

  4. I am trying to add a header for all of the posts on my page. I tried placing it in my page template (page-about.php) and also in the content page with the two-col code, but it added it to each post instead of one header over all the posts. Any ideas?

  5. I am trying to have up to 4 columns displaying my posts. so far I was able to find the following code which supposedly doesn’t work with twenty eleven quiet yet. Hope someone in here can assist.

    	<table cellpadding="0" cellspacing="0" border="0">
        <?php $column = 1; ?>
    	<?php while (have_posts()) : the_post(); $bfa_ata['postcount']++; ?>
      	<?php if ($column == 1) echo "<tr>"; ?>
           	<td class="column<?php echo $column;?>" style="vertical-align: top">
    				
    				</td>
        <?php $num_columns = 4; //set the number of columns here//
    	if ($column == $num_columns) echo "</tr>"; $column++; (($column>$num_columns) ? $column=1 : $column=$column); ?>
    	<?php // END of the LOOP
    	endwhile;
    	if ($column != 1) do { echo '<td class="column'.$column.'"></td>'; $column++;
    	} while( $column <= $num_columns );
    	if ($column != 1) echo "</tr>";?>
    	</table>
    

    And I got no clue where to add the loop!

  6. Thanks for this post. I have 2 colunms now for my twentyeleven theme. But I want to have all post from 1 category in column 1 and all other posts in column 2. I have not figured out how to do this. I would really appreciate your help. Thanks.

  7. I am presently using a theme called Magazine Premium. I am moving an HTML website to WP for SEO reasons. The Sixties link above.

    What I want is to have two columns in all 80 category pages. Several articles down the left column and then continuing at the top of the right column. I don’t need anything other than that.

    I am a not a coder but then I neither am a newbie. So not quite sure which files to use and exactly where and how to use them. But I did download them!
    Am willing to donate to get this resolved and get to work on it.
    Thanx
    Mr Fun

  8. Is there a possibility to publish a similar post with this approach for twenty-twelve?

    Thanks in advance!

    Peter Luit
    The Netherlands

  9. Hi David,

    When I install this child theme, I have to merge it with my existing child theme. This kind of backfired a couple of times as I got many errors like not being able to upload feature image anymore nor being able to save edited functions.php and index.php. After some undoing and redoing, I managed to implement your code and actually get two columns. I would like to rearrange the posts in a way that on the left it shows the thumbnail and to the right the title and excerpt. Is that possible? You see, most of the posts won’t have any excerpt text as the site I am building is going to display cartoons in the main loop. Cartoons with just a title as only text.

    Can you please advise?
    http://audiencesnow.nl/knudde/

  10. Hi David,

    When I install this child theme, I have to merge it with my existing child theme. This kind of backfired a couple of times as I got many errors like not being able to upload feature image anymore nor being able to save edited functions.php and index.php. After some undoing and redoing, I managed to implement your code and actually get two columns. I would like to rearrange the posts in a way that on the left it shows the thumbnail and to the right the title and excerpt. Is that possible? You see, most of the posts won’t have any excerpt text as the site I am building is going to display cartoons in the main loop. Cartoons with just a title as only text.
    This will also solve the problem of the thumbs shifting down when a title has more lines than a title in a different post (skewing the posts in relation to eachother).

    Can you please advise?
    http://audiencesnow.nl/knudde/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More