Wordpress tutorial: Blog posts in different columns

March 9, 2006

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):

  1. 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.
  2. Create your layout. There’s lots of resources to help you create a two column, three column etc layout.
  3. 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.
  4. 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.
  5. 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(); ?>
    ...
    ...
    <?php endwhile;?>

    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.

  6. 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.

See also
Comments

  1. Dang, I should put links to your stuff in wordpress.org/support more often! Thanks for sharing this stuff — nice and concise.

    — HandySolo, March 9, 2006

  2. Thanks :) Glad to help out.

    — Rachel, March 9, 2006

  3. Nice! I am making a new template for mi blog with 3 columns like than the recent design of this blog and this can help me enough.

    Thanx and greetings from spain :)

    — koronas, March 9, 2006

  4. (first sorry by my bad english :_()

    ouh ouh rachel, i have a doubt:

    I organice the 3 columns with the posts in each one, but i want that when I go into a post, i want that the width of the post occupy the 100% of screen and not the percentage of before.

    like obtaining this?

    Thanx and I am waiting for your help. Greetings.

    (sorry by my bad english)

    — koronas, March 9, 2006

  5. Hi Koronas - you’ll need to set up a different template for your individual page archives which is different from your home page template.

    — Rachel, March 9, 2006

  6. wow!
    great useful tutorial, it can change my designs phase ;)

    — Stephan L., March 9, 2006

  7. so that’s how the query_posts can be used. now i know how to go about doing this on my page. i’ll display “design / tech” related posts up top and more personal posts at the bottom.

    — derek, March 9, 2006

  8. And Rachel, how I can set up a different template for individual page archives?

    I hope not to be heavy, thanks.

    — koronas, March 10, 2006

  9. Ahh

    page.php = template for individual page archive?

    Ok thanks :)

    — koronas, March 10, 2006

  10. A rare skill, to be able to write up a techie subject in such simple terms. Bravo.

    *adds to del.icio.us*

    — Gordon, March 10, 2006

  11. Thanks Rachel!

    Is it possible to call posts from different databases?

    Like in jjblogs.com I want to show the last posts from

    jjblogs.com/justjosue
    jjblogs.com/justpastors

    etc…

    — Josue, March 10, 2006

  12. Hey, that’s a really good idea! Reading your blog has inspired me to do a number of changes with my blog’s layout.

    I have one comment about Step 5 of your tutorial. When I first read your description of what you did with query_posts, I thought “how bothersome, then you’d have to change the second call to query_posts whenever you add a category?” On the Codex page you link to is an example for querying *all but one* category. Maybe you should show that in your tutorial instead of “use this to query two categories”. To me at least, it’s more intuitive to have “one category”/”everything but one category” as example than “one category”/”two categories”. But of course, maybe that’s just me ;)

    — Andrea, March 11, 2006

  13. Thanks Gordon, that’s high praise and I really appreciate the compliment.

    Josue - yes it’s also possible but since you’re working with two different databases, you’d need to write/call a function to connect to the other one. The other way would be just to use an RSS reader to pull in the other entries.

    Thanks Andrea, I’ll update that so the instructions are more generic than for my situation :)

    — Rachel, March 11, 2006

  14. [...] The Loop is that fundamental bit of programming in any Wordpress template that shows a group of entries to a visitor. Multiple Loops gives you a means to display groups of entries differently from one another on the same page. Web designer Rachel Cunliffe offers a nice tutorial on the most common use of multiple loops and the global $wp_query object: showing two lists of posts from different categories on the same page. Her explanation is procedural enough that you do not have to know how query_posts are designed in order to set up to blog columns. [...]

    — Shanta Rohse | Wordpress tutorial: Different entries in separate columns, March 14, 2006

  15. [...] También debo dar las gracias a Daniel Mota (IceBeat) y Boja (La maté por un yogur) por sus numerosas ayudas. También recomendar el blog de Rachel Cunliffe (Cre8d design) donde he podido encontrar bastantes tips sobre la creación de diseños para wordpress. [...]

    — koronas desde Cartagena &#187; Rediseño completado, March 14, 2006

  16. [...] Web designer Rachel Cunliffe offers an easy to follow tutorial on the most common use of the Wordpress multiple loops and the global $wp_query object: showing two lists of posts from different categories on the same page. [...]

    — Shanta Rohse | How to Use Wordpress Multiple Loops, March 18, 2006

  17. [...] Web designer Rachel Cunliffe offers an easy to follow tutorial on the most common use of the Wordpress multiple loops and the global $wp_query object: showing two lists of posts from different categories on the same page. [...]

    — How to Use Wordpress Multiple Loops | Shanta Rohse, March 19, 2006

  18. [...] How to put your WordPress posts into different columns [...]

    — Blogalistic &#187; 2-column blog layout, March 21, 2006

  19. [...] Web designer Rachel Cunliffe offers an easy to follow tutorial on the most common use of the Wordpress multiple loops and the global $wp_query object: showing two lists of posts from different categories on the same page. [...]

    — You Are Here &#187; Blog Archive &#187; How to Use Wordpress Multiple Loops, March 23, 2006

  20. [...] Wordpress tutorial: Blog posts in different columns — cre8d design blog Post ensinando a customizar a saída de conteúdo do Wordpress. É uma boa para quem gosta de mexer no visual do blog toda hora (como eu) :) (tags: wordpress) [...]

    — joseluizcoe.com &#187; Blog Archive &#187; links for 2006-03-27, March 27, 2006

  21. This tutorial has helped me a great deal, thank you for writing it.

    The only problem I’ve run into is with my individual pages (aka single.php). Since I have tell Wordpress which posts to display, what do I put for single.php?

    My attempts have only enabled me to show the same post.

    Thanks in advance!

    — mashby, March 31, 2006

  22. the query_posts has problems with the navigation links, isnt it?

    is some kind of fix ¿?

    — cesar, June 22, 2006

  23. Could I ask for a bit of clarification? This is EXACTLY what I’ve been trying to do for weeks and was so happy to find you post.

    The “home.php” page you say to create, is that for single post pages?

    Because when I try to click through to a single post from the main page I get a syntax “T_ENDWHILE” error after adding your query_post code in the index.

    Any suggestions? Thanks so much!

    — Carey, July 21, 2006

  24. The home.php is for the front page of your blog - it’s not used for single post pages.

    Check your index.php code to see if there’s an error there on your single post pages?

    — Rachel, July 21, 2006

  25. Hi Rachel,

    A user named Josue asked if it were possible to call posts from a different database and you responded to the post saying you’d have to write/call a function to connect to the database.

    My question is could you point me in the right direction on how to do that? I’ve searched for the solution for many days, but since I’m not sure what I’m looking for, it’s been very difficult

    thanks

    — John, August 8, 2006

  26. rachel, is there a way to offset a post or two?

    — newdisco, August 15, 2006

  27. Yes, there’s a number of ways. One way would be to have a counter in your loop - if the counter

    — Rachel C, August 15, 2006

  28. thank you rachel
    your blog is really on of the best atound

    — newdisco, August 17, 2006

  29. I’d like to know the answer to Cesar’s question. How do you get the navigation links to work with each category/column?

    — beej, September 8, 2006

  30. Hi, yes you can - using previous_post and next_post and using the “exclude” parameter for the function. Unfortunately there is a bug in the Wordpress core for this exclude parameter function. The patch for this is found here:

    http://trac.wordpress.org/changeset/3508

    — Rachel, September 10, 2006

  31. brilliant, very concise. i have been trying to do this for the past couple of days and accomplished it using some very messy code — this cleaned it all up.

    one question. i am doing the same as you are two types of posts in one column and one category in the other. Does this method support multiple pages? ie, for the left column i would like to have a a previous post link.

    Thanks,

    — Brian Harris, October 26, 2006

  32. oh i just figured it out…

    $query =’cat=24&#38;showposts=10′;
    if(isset($_GET['paged'])) $query.= ‘&#38;paged=’.$_GET['paged'];
    query_posts($query); ?&gt;

    — Brian Harris, October 26, 2006