Build a featured post section within WordPress

This tutorial will detail how to build a Featured Post section within WordPress. The featured area will contain the blog title, date and the excerpt.

Step 1 – Create a category called “Featured”

Within the admin area in WordPress go to: Posts > Categories to create a new category.

Within the “Name” input field enter the name of your Featured category. As you can see from the screenshot, we have called ours “Featured”.

Then within the “Slug” field enter in the URL for the category (I have just set the slug as a lowercase version of the name).

Step 2 – Creat a blog post

Next we will create a new blog post that will become the Featured Post. To do this go to: Posts > Add New and begin to add the title and content to the post as usual.

Once the content has been placed within the post you will now need to assign the post to the Featured category setup earlier.

Click the Publish button to add the post to the website.

Step 3 – Adding the code Part 1

Next we will be adding in the script that calls the Featured Post. To do so, open up the index.php (or the file you wish to place the code on) file within your favoured HTML editor.

<div id="featured"> <?php query_posts('posts_per_page=1&cat=1'); ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <!-- CONTENT GOES HERE --> <?php endwhile; ?> <?php wp_reset_query(); ?> </div><!--featured-->

Firstly, we are going to wrap a div around the featured code:

<div id="featured"></div><!--featured-->

Next we will set the WordPress query to call only one blog post and also call the Featured category. In order to set the Featured category you will need to find out the category ID.

You can find out the category ID by going to Posts > Categories, then hovering over the category name to display the ID within the URL in your status bar

<?php query_posts('posts_per_page=1&cat=1'); ?>

You will need to close the query:

<?php wp_reset_query(); ?>

Step 4 – Adding the code Part 2

Next we will be calling the title, date and the excerpt within the Featured Post. Using the code above we will now insert the specific WordPress tags

Title:

<?php the_title(); ?>

Date (Displayed in the following format 1st January 2012):

<?php the_time('jS F Y'); ?>

Excerpt:

<?php the_excerpt(); ?>

Step 5 – Final Code

Finally, the finalised code to display the Featured Post on a WordPress website is seen below:

<div id="featured"> <?php query_posts('posts_per_page=1&cat=1'); ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('jS F Y'); ?></small> <p><?php the_excerpt(); ?></p> <p> <a href="<?php the_permalink(); ?>">Read More >></a> </p> <?php endwhile; ?> <?php wp_reset_query(); ?> </div><!--featured-->

Step 6 – Examples of featured posts on WordPress

See below examples of websites that use a Featured Post:

Craig Farrall is a Web Developer at Clicky Media ltd, based in Chester, and specialises in cms website design, ecommerce and mobile sites.