The twentyeleven wordpress theme is the default theme in the latest version of wordpress and probably the first theme you will dig around in to see how it works in WordPress.

Modifying the theme to have 3 columns on the front page is surprisingly easy and after creating a few files you can make your front page look rather different to the original them.

The layout I wanted was to be able to have the latest post as a full width chunk at the top of the page with 6 excerpts in columns see figure 1.

WordPress has the ability to use a file called home.php for its home page if it exsits in the root of your template folder. This is handy because we can then create a copy of the index.php file and edit that rather than modifying the index.php directly.

The PHP script comprises of 4 different loops. 1 loop to do do the top section and 3 other loops to fill out the posts in the columns.

To do this, each loop must have 3 bits of information to allow the loop to display the correct amount of posts in the correct order across the columns.

showposts=2
numberposts=2&offset=5
$count0 == “2″

The ‘showposts’ argument determines how many posts wordpress gets from the database. ‘Numberposts’ determins how many posts are displayed within the loop its self and the ‘offset=0′ argument determines how posts to skip before displaying the correct post. This allows us to make sure that every post is unique and in order. The final bit of code is the ‘$count0 == “2″‘ which determines how many times the loop must loop to complete.

The Code

File header section

This is the standard code taken from the index.php which has just been modified to reflect the new file information.

<?php
/**home.php
 * The main home template file.
 *
 *
 *
 *
 * @package WordPress
 * @subpackage lightningone
 */

get_header(); ?>

		<div id="primary">
			<div id="content" role="main">

			<?php if ( have_posts() ) : ?>

				<?php twentyeleven_content_nav( 'nav-above' ); ?>

Top Section, loop 1

This is the start of the post content displayed in the top section of the page. This will display a chunk of the post with a ‘more’ link at the bottom allow the reader to carry on reading.

<?php /* THIS IS THE START OF POST 1 IN THE VERY TOP SECTION OF THE LAYOUT */ ?>
	<header class="entry-header">
	<?php /* LETS THE WORDPRESS LOOP KNOW HOW MANY POSTS TO SELECT - 1 IN THIS CASE, WHICH WILL START WITH THE LATEST POST (OFFSET=0 AND THE COUNT OF 1 TO ONLY LOOP ONCE */ ?>
	<?php query_posts('showposts=1'); ?>
	<?php $posts = get_posts('numberposts=1&offset=0'); foreach ($posts as $post) : start_wp(); ?>
	<?php static $count1 = 0; if ($count0 == "1") { break; } else { ?>
	<?php/* TITLE OUTPUT WITH LARGE HEADING AND LINK TO POST*/?>
	<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
	<?php if ( 'post' == get_post_type() ) : ?>
		<div class="entry-meta">
		<?php/* DISPLAY DATE OF POST*/?>
		<?php twentyeleven_posted_on(); ?>
		</div><!-- .entry-meta -->
		<?php endif; ?>
	<?php/*DISPLAY POST CONTENT*/?>
	<?php the_content(); ?>
	<?php $count0++; } ?>
<?php endforeach; ?>
</header>
<?php /* END SECTION TOP SECTION WITH A THIN LINE <HR></HR> */ ?>
<div class="hr"><hr /></div>

First column , loop 2

This is the start of the first column and uses the second loop to display posts 2 and 3. We use the <div id=”column_01″> to allow our css to format the column.

<?php	/* START OF THE FIRST COL LOOP */ ?>
	<div id="column_01">
	<?php /* IN THIS COL WE TELL WORDPRESS TO SHOW 2 POSTS WITH AN OFFSET OF 1 MEANING IT WILL START WITH THE SECOND NEWEST POST FIRST */ ?>
	<?php query_posts('showposts=2'); ?>
	<?php $posts = get_posts('numberposts=2&offset=1'); foreach ($posts as $post) : start_wp(); ?>
	<?php static $count1 = 0; if ($count1 == "2") { break; } else { ?>
	<?php/* TITLE OUTPUT WITH SMALL HEADINGS AND LINK TO POST*/?>
	<h1 class="entry-title-small"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
	<?php if ( 'post' == get_post_type() ) : ?>
	<div class="entry-meta">
	<?php/* DISPLAY DATE OF POST*/?>
	<?php twentyeleven_posted_on(); ?>
	</div><!-- .entry-meta -->
	<?php endif; ?>
	<?php/*DISPLAY POST EXCERPT*/?>
	<?php the_excerpt(); ?>
	<div class="hr"><hr /></div>
	<?php $count1++; } ?>
	<?php endforeach; ?>
	<?php /* END FIRST COL */ ?>
</div>

Second column , loop 3

As with the first column this uses the third loop to display posts 4 and 5. Colums 2 and 3 use a wrapper div (<div id=”column_wrap”>) to make sure the forming of the columns work properly.

<?php/* START OF SECOND COL LOOP WITH SAME CODE AS ABOVE ONLY THIS TIME THE OFFSET IS 3 SO THAT THE COL WILL START WITH THE 4TH NEWEST POST */?>
	<div id="column_wrap">
		<div id="column_02">
		<?php query_posts('showposts=2'); ?>
		<?php $posts = get_posts('numberposts=2&offset=3'); foreach ($posts as $post) : start_wp(); ?>
		<?php static $count2 = 0; if ($count2 == "2") { break; } else { ?>
		<?php/* TITLE OUTPUT WITH SMALL HEADINGS AND LINK TO POST*/?>
		<h1 class="entry-title-small"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
		<?php if ( 'post' == get_post_type() ) : ?>
		<div class="entry-meta">
		<?php/* DISPLAY DATE OF POST*/?>
		<?php twentyeleven_posted_on(); ?>
		</div><!-- .entry-meta -->
		<?php endif; ?>
		<?php/*DISPLAY POST EXCERPT*/?>
		<?php the_excerpt(); ?>
		<div class="hr"><hr /></div>
		<?php $count2++; } ?>
		<?php endforeach; ?>
	<?php /* END SECOND COL */ ?>
</div>

Third column , loop 4

Again, the third column uses the last loop to display posts 6 and 7.

<?php/* START OF THIRD COL LOOP WITH SAME CODE AS ABOVE ONLY THIS TIME THE OFFSET IS 5 SO THAT THE COL WILL START WITH THE 6TH NEWEST POST */?>
	<div id="column_03">
	<?php query_posts('showposts=2'); ?>
	<?php $posts = get_posts('numberposts=2&offset=5'); foreach ($posts as $post) : start_wp(); ?>
	<?php static $count3 = 0; if ($count3 == "2") { break; } else { ?>
	<?php/* TITLE OUTPUT WITH SMALL HEADINGS AND LINK TO POST*/?>
	<h1 class="entry-title-small"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
	<?php if ( 'post' == get_post_type() ) : ?>
	<div class="entry-meta">
	<?php/* DISPLAY DATE OF POST*/?>
	<?php twentyeleven_posted_on(); ?>
	</div><!-- .entry-meta -->
	<?php endif; ?>
	<?php/*DISPLAY POST EXCERPT*/?>
	<?php the_excerpt(); ?>
	<div class="hr"><hr /></div>
	<?php $count3++; } ?>
	<?php endforeach; ?>
	<?php /* END THIRD COL */ ?>
	</div>
</div>

File footer section

As with the the header section this is just a section of code taken from the index.php file in the twentyeleven theme.

<?php twentyeleven_content_nav( 'nav-below' ); ?>
<?php else : ?>
<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header><!-- .entry-header -->

	<div class="entry-content">
	<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
	<?php get_search_form(); ?>
	</div><!-- .entry-content -->
	</article><!-- #post-0 -->
	<?php endif; ?>
	</div><!-- #content -->
	</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

CSS to format columns

The 3 column layout requires a bit of CSS to format the divs located in between the code. Without this CSS the layout wont work.

/* three column layout */
div#column_01 {
	float: left;
	clear: none;
	width: 30%;
	}
div#column_wrap {
	float: right;
	clear: none;
	width: 68%;
	}
	div#column_02 {
		float: left;
		clear: none;
		width: 45%;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		padding-left: 5%;
		padding-right: 5%;
		}
	div#column_03 {
		float: right;
		clear: none;
		width: 45%;
		}

Reference site: http://perishablepress.com/press/2008/09/01/multiple-loops-and-multiple-columns-with-wordpress/

Lightningone.co.uk

Web Dev, Design & Tech playground of Luke Jeffries

3 columns in twentyeleven WordPress theme