Query_Posts and Your Homepage Design: Part 2
Last week, I went through the process of adding the content of a single WordPress “page” to your homepage. But there would be no reason to do that with WordPress’s new ability to make any “page” your homepage … unless … you wanted both the content from a single “page”, as well as the latest entry excerpts from your blog to all be on the homepage. For that, we needed a custom homepage.
In case you missed it, head over here and catch up.
So, in order to add the title and excerpt from the latest entries in our blog to our homepage, we’re going to employ, once again, the WordPress developer’s best friend, query_posts.
In all honesty, I have no idea how you’ll want to style your blog entries. I’ve had clients want to put them in the sidebar, some wanted them in an inline list under the page content, and others who wanted them in a new column that only displayed on the homepage. Whatever your styling preferences are, this is the code you’ll want to use:
<?php query_posts(‘showposts=3&cat=-1); //pull latest 3 entries, exclude entries from category 1 ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; endif; ?>
Some may be wondering why I put the “cat=-1” qualifier in the query_posts parenthesis. I’ve had trouble in the past with the query_posts settings being retained throughout the entire page, even to the next instance of the query_posts qualifier. Since we used the first instance to call a page, the second instance might still think it’s calling a page as well. I’m not saying that this will always happen, but if it does, just add that cat=-1 qualifier. And just so you know, make sure you either delete the “uncategorized” category, or don’t post anything under that category. The “-1” means to exclude that category from getting listed. Didn’t want you to get a nasty little surprise :-)
OK, so now you have you latest 3 blog entries displaying on your homepage as well. In closing, I’m going to suggest some styling elements to add to the code above so you can have complete control over how it looks by styling the elements in you CSS file:
First, the H2 element. Notice it’s being used to display the title of the post. Make this look however you want, but be sure to style it somehow, or else the browser defaults come into play, and they rarely look good.
Second, remember that the_excerpt will be wrapped in the appropriate <p> tags, so be sure to style them as well.
I would also recommend wrapping the whole blurb in a div class of your choice. It will give you greater control over the elements within the div. For even more control over the individual posts, place the <div class=”divname”> under the loop opener (<?php if (have_posts()) : while (have_posts()) : the_post(); ?>) and the closing </div> before the closing of the loop (<?php endwhile; endif; ?>) That way, a new div will be created with each cycle of the loop. You can use the CSS file to float the divs inline so they’re all side by side.
Finally, you can add a line that mimics the <!–more–> tag output on most blog pages. Directly under the call for the_excerpt, insert the following code:
<p><a href="<?php the_permalink() ?>">Click here to read the rest of this post</a></p>
The anchor links to the permalink of the post. It gives your readers an easy way to get to your post.
I really hope this tutorial has been helpful. I realize that most of it is pretty technical, but if you’re interested in what’s going on under the hood of your theme, and I’m sure you are :-), then this should have been interesting to you.
Keep Coding! Happy Coding!
Nathan is a blogger and freelance web designer, specializing in WordPress theme development. He runs his own blog at NathanRice.net ranging in topics from web design, to WordPress tips, and is a contributer at Performancing, The Blog Herald, and WordPressThemes.com.
Thanks this was great. IT was a great starter for me. Then i discovered that i could add functions under the theme folder which made it more easy for example if you want to trim the lenght of posts.