Though WordPress websites often have a very similar look and feel (lists of blog posts), it is actually very customizable. In this article, we explore a way to make a unique home page that displays a list of articles with thumbnails (see the final screenshot below).

To keep this article simple, I’ve chosen to show how to modify the default theme that comes with WordPress (Kubrick). With little or no effort, the same scheme will work with other themes.

Publishing Articles

A typical WordPress post consists of a title, one or more categories, and the post content. To create articles that can be displayed as shown in the demo screenshot, we will need to use two advanced features: Custom Fields and Optional Excerpts.

First, create your post as normal: add a title and add your post content. Add a category to your post called “Article”. This will be used to identify special posts that should be displayed with thumbnails while not effecting other posts.

Next, create a thumbnail picture for your article and upload it to the article. Add a custom field called “thumbpic” and drag the image from the upload browser to the value box for the field. When you do this, WordPress adds the link and the title to the value box. Remove the title from the value box (second line).

Finally, add your description of the article to the Optional Excerpt box. This is the text that will displayed under the article’s title and to the right of the article’s thumbnail picture.

Use this procedure each time you want to display a new article to your home page.

Now that we have some posts to work with, let’s modify the WordPress theme to display them.

Modifying the Theme

WordPress will automatically load home.php (if present) when a visitor views the home page of your blog. Create this file in your theme directory, with the following contents:

Hello World!

If you visit your site’s home page, you will now see “Hello World!” If you navigate to other parts of the site (using direct links, as your home page now has none) you will find that no other pages have been changed.

Now that WordPress is using the new home page it is time to add some code to display the articles. Remove “Hello World!” from home.php and add the following lines:

<!-- Gets the header for the page. -->
<?php get_header(); ?>

<!-- Starts the content section of the page. -->
<div id="content", class="widecolumn">
<h2>Recent Articles</h2>

<!--
  Queries for the 6 most recent posts with the category "article".
  Change x in showposts=x to show a different number of articles.
-->
<?php
  query_posts('category_name=article&showposts=6');
  while (have_posts()) : the_post();
?>

<div id="post-<?php the_ID(); ?>" class="home-article">
  <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
    <h3><?php the_title(); ?></h3>
    <div class="entry">
      <!--
        Display a thumbnail for the article. Get this from the custom
        value 'thumbpic'.
      -->
      <div class="thumb">
        <?php if(get_post_custom_values('thumbpic')) : ?>
          <img src="<?php echo get_post_meta($post->ID, 'thumbpic', true); ?>" />
        <?php endif; ?>
      </div>
     
      <!-- Display only the excerpt of the article. -->
      <?php the_excerpt(); ?>
      <div class="clearfix">&nbsp;</div>
    </div>
  </a>
</div>

<?php endwhile ?>
</div>

<!-- Get the footer for the page. -->
<?php get_footer(); ?>

Specifically for the Kubrick theme, we must also make a change to header.php to prevent it from drawing the sidebar for our home page. Change the following:

<?php
// Checks to see whether it needs a sidebar or not
if ( !$withcomments && !is_single() ) {
?>

to

<?php
// Checks to see whether it needs a sidebar or not
if ( !$withcomments && !is_single() && !is_home() ) {
?>

Now, we see that the articles are displayed on our home page, though rather plainly.

We can provide some simple styling to the list of articles by modifying style.css and adding the following lines:

.thumb
{
    float: left;
    width: 100px;
    margin-right: 10px;
    border: 1px solid #000000;
}

.home-article
{
    margin: 0;
    padding: 0 1em 1em 1em;
}

.home-article:hover
{
    background-color: #aaaaaa;
}

.home-article h3
{
    border-bottom: 1px solid #404040;
}

.clear-fix
{
    clear: both;
}

Now, the page will look like:

Conclusion

While this article is rather simple, I hope that it gives you an idea of some of the advanced customizations you can make to your WordPress site. This example alone would not make for a great home page, but can be used and expanded to give your site a unique feel. You might try any of the following or come up with something even more unique:

• Move the article navigation to the sidebar so it is available anywhere in your site.
• Add a “most recent post”, which may or may not be an article to the top of your blog.
• Add another list of the most popular or frequently viewed articles on your site.
• etc…

The thumbnails used in the demo site were found at stock.xchng.

August 2nd, 2006 @ 9:19 pm
Webdesign