WordPress blogs typically display the latest 10 or so posts on their front page. One  problem with this is that displaying them in their entirety can make for a very long page. So I looked at customising my front page to hold more posts using excerpts and featured thumbnail images. This post is about how I did it, which in keeping with my attempts to hack things is more pragmatic than perfect!

More, more, more…

inserting a more tag in wordpress

I started off simply trying out the more tag. This button has stared me in the face for years, but to my shame I’d never thought what it might be for. In case you haven’t either, it allows you to truncate a post at a chosen point so that content above it goes on the homepage, with a link being added to the rest of the post.

While that’s quick and simple, there are some problems, at least for what I wanted to do. Using this method means that the post snippet used on the homepage includes everything above the more tag, which for my posts often  includes full-width banner images. This looked really odd and what I really was to use thumbnails of the same image. More on that in a moment.

Manual excerpts

So, instead, I used manual excerpts. This allows you to write a custom description of each post for use in places where that would make more sense out of the context of the whole post, such as on the front page and in search results. One place I was pleased to find it doesn’t get used is in the RSS (unless you set this to summary only), meaning that those who choose to read elsewhere still get the full post.

To get excerpts to appear on the front page, you need to change the main_index.php file of your theme as follows.

Find the code…

[php]<?php the_content();?>[/php]

and change this to:

[php]<?php the_excerpt();?>[/php]


Get the Picture – featured thumbnails

To go with these summaries, I also used the featured thumbnail feature of WordPress.

First, you need to make sure this feature is enabled in your theme functions (functions.php) using the code:

[php]<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(200,200), array("class" => "alignleft post_thumbnail")); } ?>[/php]

This function can take a range of arguments to control image properties such as size (200,200) and class for CSS styling (alignleft and post_thumbnail), as well offering some more sophisticated ways of being used.

When you create a new post, you should now see the Featured Image box.

As I have banner images at the top of most of my posts, I used thumbnails of these to represent the post on the front page. However, you can choose any image you want and WordPress will let you resize and crop it to look better as a thumbnail.

To display these images, you can use the following code:

[php]<?php the_post_thumbnail(); >[/php]

That gets you the image, but I wanted to have this linked to the post, so wrapped it in a bit more code:

<a href="<?php the_permalink() ?>" title="<?php the_title() ?>">
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(array(200,200), array("class" => "alignleft post_thumbnail")); } ?>

I added this code to my front page by changing the Main Index Template (index.php) and the search results pages by changing search.php.

Having started playing with the code I realise it’s pretty easy to do lots of things with WordPress, thanks to the great community and resources that are out there. That led me into making some Custom Post Types, but that’s will be a separate post…

Image credit: Jacob Botter via Flickr | CC BY

Related posts: