WordPress Theme Tutorial: MSNBC-like Home Page Category Listing

By default, the home page of a WordPress blog will show a list of most recent blog posts. That is simply the usual behavior of a blog. But then, if you’d like to use WordPress as a content management system, then you might want things to show a little differently. This is especially true when creating a magazine style WordPress theme.

Take a look at MSNBC.com. There, if you scroll down a little bit, you will be able to see a list of category blocks (”U.S., World and Politics”, “Business”, “Sports”, and so on). Within each block you can see one most recent post with excerpt, then a list of seven previous posts.

This article will discuss a way to do that with WordPress.

The General Idea

This is what we want to achieve:

1. Create good HTML markup for the listing.
2. Grab all available categories.
3. For each category, grab some of its most latest posts.
4. For the first post, display its title and excerpt.
5. For the rest of the posts, only display the titles and put them inside an unordered list.
6. Apply CSS to display everything in an interesting way.

Not too complicated, eh?

Also, please note that since this is to be displayed on the front page, then the following codes should be placed inside index.php.

1. Create good HTML markup for the listing.

Let’s use something like this:

<ul id="cat-listing">
  <li class="cat-block">
    <h3>Category Name</h3>
    <div class="cat-most-recent">
      <h4><a href="#">This is post #1</a></h4>
      <div class="cat-list-excerpt">
        This is the excerpt for post #1. You could expect a few sentences here. Like this one.
      </div>
    </div>
    <ul class="cat-recent-list">
      <li><a href="#">This is post #2</a></li>
      <li><a href="#">This is post #3</a></li>
      <li><a href="#">This is post #4</a></li>
      <li><a href="#">This is post #5</a></li>
      <li><a href="#">This is post #6</a></li>
      <li><a href="#">This is post #7</a></li>
    </ul>
  </li>

  <li class="cat-block">
   ...etc
  </li>
</ul>

2. Grabbing all available categories

$categories = get_categories();

This is the most simple code that can be used. There are a few parameters you can use for the get_categories() function, but for our example using the default (leaving the parameter empty) is fine.

3. For each category, grab some of its most latest posts.

<ul id="cat-listing">
<?php
  $categories = get_categories();
  foreach ($categories as $cat) {?>
  <li class="cat-block">
  <h3><?echo $cat->name; ?></h3>
<?php
  $catID = $cat->$cat_ID;
  query_posts("showposts=3&cat=$catID");
?>
  </li>
<?php } //end foreach ?>
</ul>

The basic idea is that, after getting the list of categories, we put it inside a foreach where we will construct the cat-block list item. Inside that list item we do the query_post for the category ID.

4. For the first post, display its title and excerpt.

Next, we zoom in and start working inside the foreach.

  foreach ($categories as $cat) { ?>
  <li class="cat-block">
    <h3><?echo $cat->name; ?></h3>
    <?php
    $catID = $cat->cat_ID;
    query_posts("showposts=8&cat=$catID");
    $first=1;
    while (have_posts()) : the_post();
      // Latest post with excerpt
      if($first) {
    ?>
    <div class="cat-most-recent">
      <h4><a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php the_title(); ?></a></h4>
      <div class="cat-list-excerpt">
        <?php the_excerpt(); ?>
      </div>
    </div>
    <?php
      } // end if
    ?>
    <?php endwhile; ?>
    </ul>
  </li>
  <?php } //end foreach ?>

The usage of $first is simply to differentiate between the first post and the rest of the posts. query_posts uses showposts=8 as parameter, one first post with excerpt and the rest for the list. Also, you should see that the cat-recent-list unordered list is still empty, we’ll get to that next.

5. For the rest of the posts, only display the titles and put them inside an unordered list.

Now, let’s take a look at the code within The Loop:

    query_posts("showposts=8&cat=$catID");
    $first=1;
    $ul=0;
    while (have_posts()) : the_post();
      // Latest post with excerpt
      if($first) {
    ?>
    <div class="cat-most-recent">
      <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
      <div class="cat-list-excerpt">
        <?php the_excerpt(); ?>
      </div>
    </div>
    <?php
        $first=0;
      } // end if
      else {
        if ($ul==0) {
          echo '<ul class="cat-recent-list">';
          $ul=1;
        }
    ?>
      <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
      <?php } // end else ?>
    <?php endwhile; ?>
    <?if ($ul) echo '</ul>' ?>
  </li>

And we’re done. Yay! Not too complicated, I hope. $ul is used to add the necessary unordered list tag, and is only added if there is actually more than one post per category.

To recap, here’s the complete code from beginning to end:

<ul id="cat-listing">
<?  foreach ($categories as $cat) { ?>
  <li class="cat-block">
    <h3><?echo $cat->name; ?></h3>
    <?php
    $catID = $cat->cat_ID;
    query_posts("showposts=8&cat=$catID");
    $first=1;
    $ul=0;
    while (have_posts()) : the_post();
      // Latest post with excerpt
      if($first) {
    ?>
    <div class="cat-most-recent">
      <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>
      <div class="cat-list-excerpt">
        <?php the_excerpt(); ?>
      </div>
    </div>
    <?php
        $first=0;
      } // end if
      else {
        if ($ul==0) {
          echo '<ul class="cat-recent-list">';
          $ul=1;
        }
    ?>
      <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
      <?php } // end else ?>
    <?php endwhile; ?>
    <?if ($ul) echo '</ul>' ?>
  </li>
  <?php } //end foreach ?>
</ul>

6. Apply CSS to display everything in an interesting way.

This is going to be quick. To display it somewhat like MSNBC’s listing, here’s a very basic CSS:

.cat-block {
  width: 500px;

.cat-most-recent {
  width: 200px;
  float: left;
}

.cat-recent-list {
  width: 290px;
  float: right;
}

The general idea is to float the .cat-most-recent to the left, and .cat-recent-list to the right. Give it the necessary margins, paddings, the usual, and you should be right on track.

Closing

That is all for the tutorial. Also note that this code will display every single category, including subcategories. If you take a closer look at MSNBC’s listing, it only shows posts from the parent categories, while the subcategories are displayed as links to the right of the list of posts.

With more code tweaks the same effect should be achievable. Anyways, here’s more references to the WordPress functions being used:

• get_categories() function.
• query_posts() function.
• The Loop

That is all. If you have questions or new ideas, let me know!