How to Display Your 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, a checkbox will be created 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 Your Recommended Posts in WordPress.

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

// START FEATURED POSTS
// Add custom Featured Posts
function conceptchaser_custom_meta() {
add_meta_box( 'conceptchaser_meta', __( 'Featured Posts', 'conceptchaser-textdomain' ), 'conceptchaser_meta_callback', 'post' );
}
function conceptchaser_meta_callback( $post ) {
$featured_content = get_post_meta( $post->ID );
?>

<p>
<div class="conceptchaser-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', 'conceptchaser-textdomain' )?>
</label>
</div>
</p>

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

// Saves the custom meta input
function conceptchaser_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[ 'conceptchaser_nonce' ] ) && wp_verify_nonce( $_POST[ 'conceptchaser_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', 'conceptchaser_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.