How to Display “Featured Content” in WordPress

You probably have stories in your blog you want to highlight to your readers. This is commonly referred to as “Featured Posts” or “Featured Content.” If you are using WordPress, displaying these featured posts can be achieved in various ways, one of which is using a plugin like Jetpack.

Jetpack includes features found on WordPress.com. At the time of writing, it offers 30 features including WordPress.com Stats, Photon, Infinite Scroll, and our focus today, Featured Content. Let’s get started.

Add theme support

Update: As of Jetpack 3.7, you can find the Featured Content under Appearance > Customize Menu.

The first thing you need to do is add the add_theme_support function in functions.php of your theme.

add_theme_support( 'featured-content', array(
    'featured_content_filter' => 'mytheme_get_featured_content',
));

After adding it, you will find a new form, Featured Content, under the Settings > Reading page.

Specify the tag name for your featured content, set the number of posts you want to show, and tick the checkbox to prevent the tag from appearing on your blog. Assign the posts you want marked as Featured with the tag.

Displaying the Content

We will add a few lines of code to display the featured content in our theme. As an example in this tutorial, I’m going to use TwentyTwelve.

Usually, the featured content is displayed on the front page. If your theme follows the WordPress standard theme structure, the front page is rendered either in index.php, home.php, or front-page.php.

Open functions.php, and add the following function to get the featured posts and put them in an array.

function twentytwelve_get_featured_content() {
    apply_filters( 'twentytwelve_featured_content', array() );
}

We can further extend that code, like so.

function twentytwelve_get_featured_content( $num = 1 ) {
    global $featured;
    $featured = apply_filters( 'twentytwelve_featured_content', array() );
    
    if ( is_array( $featured ) || $num >= count( $featured ) )
        return true;
    
    return false;
}

The above conditional statement will show the featured content if at least there is one present and while the page is not being paged (it is not on the second page onwards).

Additionally, we can also set a new thumbnail size for the featured content. In this example, I created a new size, which is 250 by 160 pixels. You can add the following code somewhere below the add_theme_support( 'post-thumbnail' ).

add_theme_support( 'post-thumbnails' );
add_image_size( 'twentytwelve-featured-thumb', 250, 160, true );

Next, let’s create a new template called featured.php, and add this code below to put the featured content in a proper HTML structure.

<div class="featured-post clearfix">
    <figure class="post-thumbnail">
        <?php if ( has_post_thumbnail() ) { the_post_thumbnail('twentytwelve-featured-thumb'); } ?>
    </figure>
    <div class="post-entry">
        <h3 class="post-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
        <?php the_excerpt(); ?>
    </div>
</div>

In the index.php, we call that template by using get_template_part() and put it in the loop like so:

<?php if ( twentytwelve_get_featured_content(1) ) : ?>
    <div id="featured">
        <h2><?php _e( 'Featured Content', 'twentytwelve' ); ?></h2>
        <?php foreach ( $featured as $post ) : setup_postdata( $post ); ?>
            <?php get_template_part( 'featured', get_post_format() ); ?>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

At this stage, we are technically done, and after adding some CSS, we will have a nice little section of featured content.

We hope this tutorial will be useful for you, and if you are having trouble following the tutorial, feel free to let us know in the comments.

Note: This post was first published on the Dec 10, 2013.