How to Display Featured Posts in WordPress

This tutorial will display a list of your Featured Posts with thumbnail images in the sidebar of your WordPress-powered website. The list will be consist of five titles right next to their corresponding images.

Furthermore, this will create a checkbox under each of your posts in the WordPress dashboard. If after reading this article you want a different method of doing the same thing, you may read the article How to Display Recommended Posts in WordPress.

1. Add the lines of code below to the functions.php file.

// START FEATURED POSTS
// Add custom Featured Posts
function carrotpark_custom_meta() {
add_meta_box( 'carrotpark_meta', __( 'Featured Posts', 'carrotpark-textdomain' ), 'carrotpark_meta_callback', 'post' );
}
function carrotpark_meta_callback( $post ) {
$featured_content = get_post_meta( $post->ID );
?>

<p>
<div class="carrotpark-row-content">
<label for="meta-checkbox">
<input type="checkbox" name="meta-checkbox" id="meta-checkbox" value="yes" <?php if ( isset ( $featured_content['meta-checkbox'] ) ) checked( $featured_content['meta-checkbox'][0], 'yes' ); ?> />
<?php _e( 'Check this box if this article is a Featured Post', 'carrotpark-textdomain' )?>
</label>
</div>
</p>

<?php
}
add_action( 'add_meta_boxes', 'carrotpark_custom_meta' );

// Saves the custom meta input
function carrotpark_meta_save( $post_id ) {

// Checks save status
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ 'carrotpark_nonce' ] ) && wp_verify_nonce( $_POST[ 'carrotpark_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';

// Exits script depending on save status
if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
return;
}

// Checks for input and saves
if( isset( $_POST[ 'meta-checkbox' ] ) ) {
update_post_meta( $post_id, 'meta-checkbox', 'yes' );
} else {
update_post_meta( $post_id, 'meta-checkbox', '' );
}

}
add_action( 'save_post', 'carrotpark_meta_save' );
// END FEATURED POSTS

After doing this, you will notice that when you go to Posts > Add New in the WordPress dashboard or edit any of your posts, a Featured Posts section with a checkbox that says Check this box if you want this article to be a Featured Post has appeared under each of your posts.

2. Add the following bits of code to the sidebar.php file:

<div class="widget"><h2 class="widget-title">Featured Posts</h2>
<ul>
<?php
$args = array(
	'posts_per_page' => 5,
	'meta_key' => 'meta-checkbox',
	'meta_value' => 'yes'
	);
	$featured_content = new WP_Query($args);
	if ($featured_content->have_posts()): while($featured_content->have_posts()): $featured_content->the_post(); ?>
	<li>
	<a href="<?php esc_url(the_permalink()); ?>"><?php the_post_thumbnail('excerpt-image'); ?></a>
	<a href="<?php esc_url(the_permalink()); ?>"><?php esc_html(the_title()); ?></a>
	</li>
	<?php
	endwhile;
	endif;
	?>
	</ul>
	</div>

3. Add the following lines to the style.css file:

.widget-title {
font-size: 30px;
font-weight: bold;
padding-bottom: 5px;
}

.widget ul {
list-style-type: none;
text-align: left;
padding-left: 0;
margin-left: 0;
display: block;
}

.widget li {
margin-bottom: 40px;
height: 10px;
display: inline-block;
}

.widget li img {
display: inline-block;
margin-left: 0;
margin-right: 10px;
width: 60px;
height: 40px;
float: left;
}

.widget li a {
vertical-align: top;
}

4. Go to Posts > Add New in the WordPress dashboard and create a new post. Tick the checkbox below the post. Click Publish.

5. Repeat Step 4 as many times as you want.

Using a Plugin to Display Featured Posts

If you do not want to tinker with code, you can install a plugin. Nelio Featured Posts is an excellent plugin that can do the task. After installing and activating it, go to Posts > Featured Posts by Nelio in the dashboard of your WordPress site to configure the plugin. After which, go to Appearance > Widgets to drag the accompanying widget into one of your widget areas.