Query_Posts and Your Homepage Design

Filed as Features, Guides on June 21, 2007 12:43 pm

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!

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.

Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. By Ian posted on June 22, 2007 at 4:16 am
    Want an avatar? Get a gravatar! • You can link to this comment

    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.

    Reply

  2. Query_Posts and Your Homepage Design: Part 2 : The Blog HeraldJune 29, 2007 at 11:34 am
  3. Weblog Tools Collection » Blog Archive » The “More” Tag on a WordPress PageJuly 9, 2007 at 11:25 pm
  4. The “More” Tag on a WordPress Page | AdivorBlogJuly 9, 2007 at 11:58 pm
  5. BloggingPro China » 如何为Page增加"more"标签July 10, 2007 at 10:47 am
  6. BloggingPro China » 如何为Page增加"more"标签July 10, 2007 at 10:47 am
  7. By gary posted on July 19, 2007 at 7:20 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    thank you so much

    Reply

  8. By gary posted on July 19, 2007 at 7:21 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    u guys are awesome thank you so so so so much

    Reply

  9. WP From the Vault » Reader Appreciation ProjectAugust 6, 2007 at 5:40 pm

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.

    Current ye@r *