Query_Posts and Your Homepage Design

WordPress has a fantastic little loop qualifier. I’ve written on it for the last 2 weeks, and this week I want to go a little deeper, moving more toward the direction of using WordPress as a real content management system using the built in page feature that WordPress added a while back.

Although WP also recently added the ability to use any page as your homepage, most people running a business want a bit more complicated homepage. For instance, I’ve had clients that wanted to have both the content of a page, and the latest 3 blog entries on the homepage. Now, you may want a homepage that is more or less complicated than that, but you can take the principles outlined here and apply them to you own homepage design.

The Page Content

As you may remember, we can use the query_posts to allow the loop to pull just about any kind of information you can imagine! In this case, we’re going to use it to pull the information from a particular page. We’ll name it “homepage”. The first thing to do is actually create the content and post slug for the homepage. Go into your WordPress admin panel and click “Write” –> “Page”. Type the title and body of your content (whatever you want to be the homepage message for your readers) and then over on the right hand side of the page, you should see something that says “Post Slug” with a plus sign next to it. Click that and type “homepage” in the text box (without the quotes). Now, we code…

Fire up your favorite text editor and open up either your home.php or index.php template. Assuming you know how to code HTML and CSS, I’ll not go into how to markup your page. However, once you’ve got a place marked up to place your homepage message and title, insert the following code:

<!–the loop–>
<?php query_posts(‘pagename=homepage’); //pull contents from homepage ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<?php the_content(""); ?>
<?php endwhile; endif; ?>

What this will do is pull the title and content (including all styling elements). That means you’ll need to style the paragraph and header tags. Also, feel free to wrap the blurb above in a div to give you more control over the look.

Next week, I’ll go through how to add a section to you homepage that displays the title and excerpt from the latest entries in your blog. I post on Thursdays, so be sure to check back!


  1. says

    Good to see a tutorial going a little deeper than a lot I tend to read.

    I recently had to redesign the site for company I work for. As a WordPress fan, I thought I’d test its CMS powers, but found it lacking.

    Still too much additional code was needed to be added to source files or to putting HTML in to the post editor. It quickly became more trouble than it was worth to achieve what I wanted to do.

    Although, I thought it was perfectly capable for simpler layouts as soon as any degree of complexity comes in WP isn’t the best CMS.


Leave a Reply

Your email address will not be published. Required fields are marked *