Wordpress tutorial: Blog posts in different columns
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(); ?>
...
...
<?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.
- 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.
your thoughts
HandySolo
Dang, I should put links to your stuff in wordpress.org/support more often! Thanks for sharing this stuff — nice and concise.
Rachel
Thanks
Glad to help out.
koronas
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
(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)
Rachel
Hi Koronas - you’ll need to set up a different template for your individual page archives which is different from your home page template.
Stephan L.
wow!
great useful tutorial, it can change my designs phase
derek
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.
koronas
And Rachel, how I can set up a different template for individual page archives?
I hope not to be heavy, thanks.
koronas
Ahh
page.php = template for individual page archive?
Ok thanks
Gordon
A rare skill, to be able to write up a techie subject in such simple terms. Bravo.
*adds to del.icio.us*
Josue
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…
Andrea
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
Rachel
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
Shanta Rohse | Wordpress tutorial: Different entries in separate columns
[...] 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. [...]
koronas desde Cartagena » Rediseño completado
[...] 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. [...]
Shanta Rohse | How to Use Wordpress Multiple Loops
[...] 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
[...] 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. [...]
Blogalistic » 2-column blog layout
[...] How to put your WordPress posts into different columns [...]
You Are Here » Blog Archive » How to Use Wordpress Multiple Loops
[...] 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. [...]
joseluizcoe.com » Blog Archive » links for 2006-03-27
[...] 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) [...]
mashby
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!
cesar
the query_posts has problems with the navigation links, isnt it?
is some kind of fix ¿?
Carey
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!
Rachel
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?
John
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
newdisco
rachel, is there a way to offset a post or two?
Rachel C
Yes, there’s a number of ways. One way would be to have a counter in your loop - if the counter
newdisco
thank you rachel
your blog is really on of the best atound
beej
I’d like to know the answer to Cesar’s question. How do you get the navigation links to work with each category/column?
Rachel
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
Brian Harris
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
oh i just figured it out…
$query =’cat=24&showposts=10′;
if(isset($_GET['paged'])) $query.= ‘&paged=’.$_GET['paged'];
query_posts($query); ?>