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”

categoriesWithin 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.

You May Also Like

About the Author: Guest Author

This post is written by guest author, you can also write one here at socialh.com by contacting me to build traffic to your blog, build your reputation and promote your brand.

8 Comments

  1. Thank You – This is very easy to understand post for adding featured post to wordpress but it would be better if you specify the Particular output of this coding. However in this post you show the 3 Screenshots and all these have different types of featured post.

    1. I am glad this tutorial was easy to understand! Thanks for your comments, I agree this would be useful, but the examples provided use a similar code to the above, it’s just been styled differently!

  2. Great tutorial 🙂
    I hate getting stuck with coding. Fortunately, Genesis Framework has an option for it, so I don’t have to code featured section for me

  3. totally awesome tutorial. I apply this code for most of my sites. I will be applying this for starfallzone as well. thanks admin. great job. cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *