Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donee quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Another Recent Item

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et

And Another

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et

Read More.

One More

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et

Read More.

Figure 5.1. A big feature area

Setting Up Post Thumbnails

First, we'll need to include post thumbnail support for our theme. Post thumbnails were introduced in version 2.9 of WordPress, enabling you to attach a feature image when you create a post. Your theme can provide support for this feature, define a number of various thumbnail sizes, and use different versions of the thumbnail in various listings. For example, you might want to use a small, square-sized thumbnail for search results and archive listings, a medium square for the home page, and a large, full-width size for single posts.

To enable thumbnail support in our theme, let's add this code to functions.php:



set_post_thumbnail_size is the WordPress function used to specify a default size for the image, while add_image_size defines other thumbnail sizes. Our home page is likely to be the only place where we'll want a square image of this size; if we want to add thumbnails to other parts of the template, such as the single post template, they'll almost certainly be a different size. So let's make the default one nice and big, and choose a medium size for the home page image:


set_post_thumbnail_size(540, 300, true); add_image_size('homepage-thumbnail', 300, 200, true);

Both of those functions accept the same three parameters: the width of the thumbnail, its height, and a Boolean option that tells WordPress whether or not to hard crop the images. If you set this to false or omit it, the images will be scaled to fit in a box of the given dimensions while retaining their proportions; if you set it to true they will be cropped to exactly those dimensions—a hard crop, if you like. From now on, whenever a user of the theme attaches a new featured image, WordPress will create those two sizes for us. Sorted!

Building The Loop

Our next task is to create a function to build a new Loop. As Brandon mentioned back in Chapter 2, The Loop is a process that grabs one or more posts, and it's used wherever you need post information to appear. Any code that lives inside The Loop will appear for every post in the list. You can read all about The Loop on the WordPress Codex.17

On a blog's home page, The Loop grabs a list of the most recent blog posts. The number of posts it retrieves for listing pages is defined in the WordPress settings, under Reading. We only want four posts on our home page, so if we wanted to be lazy we could ask our users to enter 4 in that field. But this is impractical; that setting would also be used for search results, category and tag pages, and monthly archives, too. Instead, we should be polite and override that behavior just for our home page.

To start with, we'll use WordPress's function for retrieving lists of posts: query_posts. This way we can choose what sorts of posts should appear in a list, in which order, and the amount. Our needs are simple: we just want the four most recent posts. We'll create a new function, wicked_indexloop, and call on query_posts like so:


chapter_05/v6/wicked/functions.php (excerpt)

function wicked_indexloop() { query_posts("posts_per_page=4");

This will grab the first four posts to display on the front page. Next, we'll include the loop—excuse me, The Loop—in our function:

chapter_05/v6/wicked/functions.php (excerpt)

function wicked_indexloop() { queny_posts("posts_per_page=4");

if (have_posts()) : while (have_posts()) : the_post(); ?> Q

: we'll do some stuff here <?php endwhile; else: ?> Q

: if there are no posts, we'll display an error <?php endif; wp_reset_query(); Q

These statements check to see if we have posts; for each post, we'll display some content, though we don't need to worry about that just yet.

^ If the query fails to find any posts, we'll display a message.

Finally, we tidy up The Loop by using wp_reset_query, which destroys the query we started with—failing to do so could interfere with conditional tags further down the page.

Vj^ The Loop Is Your New Best Friend

As you become a more accomplished themer, you'll find that query_posts18 and The Loop19 will become some of your favorite tools. When you're done playing with these examples, it's well worth your time to check out the Codex entries for each.

Advanced Querying query_posts replaces the active Loop on a page. If, down the road, you find yourself wanting to display your custom Loop in addition to the default Loop, or if you want multiple custom Loops, you'll need to dig into the documentation for the WP_Query20 class—a more flexible way of using The Loop. It's beyond the scope of what we want to do here, but you might want to become familiar with it as you become more experienced with WordPress.




We're now ready to start plugging in the code that will make our posts appear. Remember earlier in the chapter when we went hunting for the function thematic_single_post? It'd be great for our custom Loop to still have all that juicy Thematic functionality, so we'll reuse some of the functions we found there: thematic_post_class, which generates that big collection of classes we find on every post, and thematic_postheader, which builds a heading, byline, date, and edit link.

We also need to include the post's thumbnail for the first item only, so we'll use a counter to figure out which post we're up to. If the counter is at 1, we'll include the post's home page thumbnail using the WordPress template tag the_post_thumbnail. At the end of The Loop, we'll increment the counter by 1. Below is the first part of The Loop:

chapter_05/v6/wicked/functions.php (excerpt)

query_posts("posts_per_page=4"); $counter = 1;

if (have_posts()) : while (have_posts()) : the_post(); ?>

<div id="post-<?php the_ID() ?>" class="<?php thematic_post_class() ?>"> <?php thematic_postheader(); if ($counter == 1 && has_post_thumbnail()) {

the_post_thumbnail('homepage-thumbnail'); } ?>

<div class="entry-content"> <?php the_excerpt(); ?>

<a href="<?php the_permalink(); ?>" class="more"><?php echo more_text() ?>

Was this article helpful?

0 0

Post a comment