If you’ve visited the Urban Mainframe website a few times, as opposed to reading the articles in an RSS reader, you may have noticed that the layout of the front-page recently changed. I have opted for a more compact format for the page and have reworked my Loop so that I can adjust the page a little more easily.

The previous front-page displayed the ten most recent posts in full, or at least up to the More link. This meant that the page was long and had a large download time. The new front-page is approximately a third lighter (circa 250 KiB rather than the 750+ KiB it was previously). It’s still a large download, but it’s a big improvement on the previous version.

One thing I definitely wanted on the front page was either a “Featured Article” or the most recent post to be displayed in full (or up to the More link). A “Featured Article” would be established by using WordPress’ 2.7+ “Sticky Post” option. Thus the “Featured Article” will not be pushed out of the principle slot by subsequent posts.

I wanted to follow the “Featured Article” with a further nine “Latest Articles”. Of those, the most recent four should be displayed with excerpts while the remaining five should be simple links from the article’s title.

I was surprised to discover that this wasn’t too difficult to achieve. All I really needed inside my Loop were a counter – to keep track of my position, and a few conditional snippets of code to handle the three different renderings.

If there are posts to display I start by establishing the counter and setting it to “0”:

<?php if (have_posts()) : ?>
<?php $count = 0; ?>

For each post, increase the counter by 1:

<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>

Is this the first post?

<?php if ($count == 1) : ?>

It is! Okay, is it a “Featured Article” or just the most recent post?

<?php
if ( is_sticky() ) {

This is a “Featured Article”. I’ll let the visitor know:

echo '<div class="featuredArticleBadge">// Featured Article</div>';

If it isn’t a “Featured Article” then I indicate this by displaying the article’s publication date:

} else {
echo '<div class="starDate">// '; echo the_time(__('d.M.Y','options')); echo '</div>';
}
 ?>

Then comes the code for displaying the “Featured Article” or latest post. For the sake of brevity I’ll skip this but you can download the full source later in this article and review it there.

The next step is to process the remaining post(s):

<?php else : ?>

If this is the second post then display the “Latest Articles” header first:

<?php if ($count == 2) : ?>
<h4>Latest Articles</h4>
<?php endif; ?>

Which is followed by the code that outputs the post title, comment counter and publication date of the remaining nine articles.

Then we have another little bit of trickery:

<?php if ($count <= 5) : ?>
<div class="theFrontPageExcerpt"><?php the_excerpt(); ?></div>
<?php endif; ?>

The code above is responsible for adding the excerpt to the first four of these nine posts (remember that the first post has already been handled). It simply queries our counter and if that counter is less than or equal to “5” then it appends the excerpt.

Now we can end the loop and close the outstanding conditional test:

<?php endif; ?>
<?php endwhile; ?>
<?php else: ?>
<p><?php _e('Sorry, no posts matched your criteria.','options'); ?></p>
<?php endif; wp_reset_query(); ?>

I am making the full source of my home.php file available for review and reuse. Feel free to take from it anything that’s useful to you. As usual I’d appreciate a credit/link if you do, but you are under no obligation to provide either.

That’s not the end of the story either. Other changes I’ve made include:

• Displaying the tag cloud and Flickr feed on the front-page only.

• Having a different sidebar on the front-page to reduce the clutter of interior pages (by using Slayer’s Custom Widgets plug-in)
• Introduced an iPhone/iPod touch/Android specific theme with the WPtouch plug-in.

So what do you think? Is the new front-page an improvement or did you prefer the previous version? Any suggestions as to how I can improve it further? Let me know in the comments.