Recently I had my blog posts divided into three columns with different blog posts appearing in each one. I’ve now switched back to two columns, putting my blog design/tech posts in one and my personal/life posts in the other. Here’s how I set it up (and this can be extended to as many columns/areas as you’d like):
- Categorise your posts. I’m using three categories currently: blog design, life and other interests. I use categories to handle where the posts appear on my page and tags for more detailed descriptions of the content. I use a brilliant plugin called Ultimate Tag Warrior to handle the tagging.
- Create your layout. There’s lots of resources to help you create a two column, three column etc layout.
- Decide on where you want different content to go. In my current layout, I want both posts categorised as blog design or other interests to appear on the left and posts categorised as life on the right.
- Create a home page template. If your theme doesn’t have one, go into your theme’s folder, make a copy of index.php and call it home.php. Make it writeable by the server so you can edit it via the WordPress admin system. Edit home.php so that it uses the layout you created.
- Pull in the appropriate posts for each column/area of your layout. Instead of having one WordPress loop which shows your posts, you’ll have multiple loops on the page, one for each column/area. Highlight the WordPress loop code:
<?php while (have_posts()) : the_post(); ?>
and copy and paste that into the different layout areas you want different posts to show up. E.g., in my blog I have two copies of the loop: one in each column.
Before each loop, we need to tell WordPress which posts to display. We add one line of code, which will look something like this:
<?php query_posts('cat=1&showposts=10'); ?>
In that example, it’ll pull in 10 posts from category 1. If I wanted to show posts from two categories (as I do on my blog), it’ll be something like:
<?php query_posts('cat=1,2&showposts=10'); ?>
If you want to show everything but category 1, use:
<?php query_posts('cat=-1'); ?>
You can do a lot with query_posts.
- Customise the look of your posts. You can change the display of posts in different areas quite easily now. For example, if I wanted my life posts to just show the headlines, I’d remove the excess code found in that loop.
I hope this tutorial helps you be more flexible with your blog layouts. If you need any help, or more information please leave a comment.
Get actionable tips to grow your website
Liked this article? I write thoughtful insights (no hype!) into really improving your website through beautiful design and data-driven insights.