Split Layouts and WordPress

Recently I was reading the article “Understanding the Split Layout in Web Design” on WebdesignTuts+ and since I needed to update the portfolio section on my own website, I thought I would layout the Portfolio entries in the zig-zag pattern they discuss.

The great thing about WordPress and its PHP/MySQL backend is that you can access all the data and manipulate it any way you choose.

For this task, I already had a custom post type where I could enter the description of my Portfolio projects and upload multiple pictures. I decided to create the layout with the featured image and description alternating sides while the extra pictures float below the description.

Here is how I did it:

FYI: I use Eddie Mochado’s Bones template for the creation of all my WordPress themes.

First I created a custom Portfolio page layout my portfolio entries. Then I began to modify the loop on this page.

Now I set up a new query for my custom post type:

<?php $the_query = new WP_Query( 'post_type=custom_portfolio_post_type' ); ?>

Now I modify the loop for my new query:

<?php if ( have_posts() )
   while( $the_query->have_posts() )
   $the_query->the_post(); ?>

Now I start the layout for posts:

<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<section class="post-content">

Now I start the layout for odd and even posts:

<?php if ( 0 === $the_query->current_post %2 )
// do stuff for even posts

Put all your layout html for the even numbered posts here. Depending on your framework, layout your content according to column classes you are using. Once, that is done, we continue on to the odd numbered posts. For example I used the “3col” and “9col” classes to layout the content in my Portfolio.

// Jump to next post in the loop
// do stuff for odd posts ?>

These posts are using a layout with the columns and content switched from the even posts.

Example:  Odd Posts are 3col -> 9col and Even Posts are 9col -> 3col

That’s it! Now you have zig zagging content and all the work is done for you.