Codeable info

Setting Up A Multiple Column WordPress Blog

Posted on by in WordPress Tutorials

Most blogs follow a basic structure which consists of a single or central column for featured posts, one or two sidebars and a heading and footer. This layout is simple, traditional and most of all comfortable seeing as almost every blog out there uses it. But what about the bloggers that wish to break from the crowd and use multiple post columns?

There aren’t many options save some pre-configured WordPress themes and various external plugins. So in this tutorial we’re going to set up a template that supports multiple post columns with simple separation options all organized by category. What this means is that each of the columns we choose to display will have a specific category. In order to get the post in question to show up in one column and not the others we will assign it the related category.

Steps To Take Before Starting This Tutorial

There are some things that must be done before starting the work in this tutorial. This paragraph will list what needs to be done beforehand and give a small description of each task.

Step 1: Design Your Layout/Theme

Multiple Column LayoutMake sure to design a unique layout or theme that supports displaying multiple post columns. Obviously you don’t want to integrate the code from this tutorial into a single column layout.

Shopping around for a blog layout or theme is extensive and incredibly personalized, hence why it needs to be done before attempting this tutorial. A good layout is hard to find, so take your time and find something right for your WordPress site or blog.

But before you begin shopping decide how many columns you would actually like to see on your blog or WordPress enabled site and find a matching layout.

Step 2: Choose How To Implement The Content

You must decide where the content will be placed in your layout. For instance if you decide to have one column dedicated to your personal life and a second column dedicated to your business life figure out which will be positioned on the right and which will be positioned on the left. If you have three or more columns, decide which category will be positioned in the center and so on and so forth.

Everything begins with a centralized plan, and that is exactly what you are generating during this step so things aren’t all willy nilly when you go to implement the related code.

Step 3: Copy Your Source Files

Copy the “Index.php” and “Page.php” active theme source files into a new file and rename it to whatever you wish. This is the file we will be editing to increase the amount of columns that display.

Input the following code at the very top of the new file:

  Template Name: Multi Column Home

This will basically turn the new file into a page template. This template can be added to any new page in WordPress through the dashboard’s theme editor. All that is required is to select the new template in the related drop-down menu for each new page.

Step 4: Always Categorize Your Posts

This should really be the final step, however it is not a step related to the integrated code so it belongs here.

Remember each time you finish writing a post and set it up to publish; always, always, always, categorize it accordingly. If you use the method described in this tutorial and do not categorize your post it will not appear correctly on your blog.

If you have taken care of the steps listed above it’s time to move on.

Multiple WordPress Loops

In order to generate multiple post columns you will need to reproduce the WordPress “Loop” multiple times depending on how many total columns you choose to display. As the “Loop” ultimately determines what posts appear first and foremost and how they appear each new copy we implement will also determine how a specific column appears and functions.

Our first step here is to copy the entire “Loop”. So open your template file (which you created earlier) and look for the beginning and end tags listed below.

The WordPress “Loop” begins with the following code:

<?php while (have_posts()) : the_post(); ?>

And ends with the following:

<?php endwhile;?>

Make sure to copy the entire section, and after doing so paste the newly copied code directly below it. Basically you will end up with two identical sections of “Loop” code, one positioned below the other. As of now this will show two identical columns in our WordPress blog.

In order to customize the content which appears in each column the following code needs to be implemented before each “Loop” segment you have added (before each new column).

<?php query_posts('cat=1&showposts=10'); ?>

What this code basically does is query posts from a certain category and display them accordingly in the related column. The “cat=1″ section within the parentheses determines the category displayed, while the “showposts=10″ section determines how many total posts to query and display.

So for instance, if I wanted my first column to display categories 1, and 3 and show the last 20 posts from each category I would implement the following code before the related “Loop” segment.

<?php query_posts('cat=1,3&showposts=20'); ?>

The best part about utilizing this code is that you can customize the way each column displays. For instance you can have one column display only images, while the other displays headlines or post excerpts. Better yet, you only have to edit the “Loop” code for the related column which makes things much easier. This feature is not always available when using plugins or themes that natively support multiple columns.

That’s it for now. If you have implemented the code above correctly you can select your new template for various WordPress pages and they will now display multiple blog posts in different columns. Make sure to design and customize each column to your liking after implementing the code in this tutorial.


Codeable info

Comments (3)

Comment by Andrew says:

is there a plugin that will do this to?

Comment by Stu says:

Hi Briley
I happened across your excellent advice when trying to present a WP blog according to categories to make them appear and behave as if they were two separate blogs on the one CMS. I attenpted to use the concepts you described for multi-column blogs to try to achieve what I was after.
I would welcome it if you would check out the Codex thread “Two Blog Pages for One WordPress Site” and consider providing your wisdom.

Comment by Adam says:

Hi Briley,

Thank you so much for this tutorial. It is exactly what I need.

I have a question however.

I have a theme, Platform (free) by Pagelines, that does not have multiple columns but I really like how it looks and do not want to change it if at all possible. Can I modify it to work?

I do not know any code beyond basic html and css.


Codeable info