How to split posts into multiple columns in WordPress

Gday guys and girls, and thanks for been here!

In this tutorial I’m gonna show you how to radically change the front look of the blog page of WordPress. I suggest you to start with the default theme from a WordPress fresh installation, because this code could not works with some heavy customized themes. In this case I’m gonna use the default Twenty Eleven WordPress Theme, so, let’s get started!


Let’s take a look at the final result I want to achive


Our code starts with the classic control provided by WordPress, to check if there are posts published or not

Using this code guarantee a safety check and avoid the print of weird errors into our blog page. Now we have to call our posts with this simple PHP loop.

Now we can easily use the default WordPress codes to retrive our posts infos:

  • the_post_thumbnail()
  • the_title()
  • twentyeleven_posted_on()
  • the_excerpt()
  • comments_popup_link()

Remember to call all of these elements into the <?php ?> tags.

Now we have to create the basic HTML structure around the php code, and for a smart and light alignment, I like to use the <ul> <li> elements. This HTML tags allow me to manage the size and the alignment of every post, all together or one by one.

Wrap your PHP code into the HTML tags, as shown.

Paste this into your index.php file

Now we have our blog page full of posts printed with full size featured images and default text styles. To let the magic happens, we have to use some CSS tricks!

Past this into your style.css file

As you can see the CSS code is really small and easy to understand. Now you have a full blog page large 950 pixels with 3 columns, perfectly aligned .

As I always suggest, feel free to edit the code and try to find your own way or style to do this things, and of course, if you have some troubles or need help, write me a comment.

Thank you everybody, see ya!