How to Create Featured Posts Section in WordPress

Anil kumar

WordPress is well known for its great powerful customization feature. Whenever you feel something is required, you can easily achieve that in many ways such as:

  • WordPress plugins
  • Adding functions
  • Editing previously created functions.

Here we are going to learn how to add a featured posts section or featured content in your WordPress. Featured contents are used to highlight some content to your visitors. Sometimes it is mandatory to display some important posts first to your audience. So in this tutorial, we’ll learn to make featured posts section.

Add a featured posts section

There is a simple step by step procedure to follow.

Before we proceed let’s take a quick look at what we will need:

WordPress: Yes, an obvious one – you’ll need it installed either locally or on your web server.

There are 3 steps for this procedure.

  1. Creating a checkbox (metabox) in post/page admin area.
  2. Save meta box value.
  3. Display the featured posts on the frontend.

Step 1- Creating a check-box

To add a checkbox to pages/posts edit screen add the following function to your theme’s functions.php file.

<?php function sm_custom_meta() { add_meta_box( 'sm_meta', __( 'Featured Posts', 'sm-textdomain' ), 'sm_meta_callback', 'post' ); } function sm_meta_callback( $post ) { $featured = get_post_meta( $post->ID ); ?> <p> <div class="sm-row-content"> <label for="meta-checkbox"> <input type="checkbox" name="meta-checkbox" id="meta-checkbox" value="yes" <?php if ( isset ( $featured['meta-checkbox'] ) ) checked( $featured['meta-checkbox'][0], 'yes' ); ?> /> <?php _e( 'Featured this post', 'sm-textdomain' )?> </label> </div> </p> <?php } add_action( 'add_meta_boxes', 'sm_custom_meta' ); ?>
After adding this code you will find a checkbox field in your post admin area as shown in the image below:

You just have to enable this checkbox.

Step 2 – Save meta box value

We have done creating a check box in post/page edit screen. Now it is the time to save the value of the checkbox weather checkbox enabled or not.  Now we will create a function to save or update the checkbox value. Add

Add the following code to your function.php file. This code will go just below the above code we created earlier.

<?php /** * Saves the custom meta input */ function sm_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[ 'sm_nonce' ] ) && wp_verify_nonce( $_POST[ 'sm_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', 'sm_meta_save' ); ?>
The update posts meta function will update or save the data to the database of a meta key ‘meta-checkbox’.

Step 3- Displaying the Featured Posts on the Frontend

Now we are in the final step and in this step, we will display the featured posts on the frontend. To display the featured posts we will make a page template in our theme’s directory and add the below code

<?php $args = array( 'posts_per_page' => 5, 'meta_key' => 'meta-checkbox', 'meta_value' => 'yes' ); $featured = new WP_Query($args); if ($featured->have_posts()): while($featured->have_posts()): $featured->the_post(); ?> <h3><a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></h3> <p class="details">By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?></p> <?php if (has_post_thumbnail()) : ?> <figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a> </figure> <p ><?php the_excerpt();?></p> <?php endif; endwhile; else: endif; ?>
Hurray!!

You have done the task successfully .

Hope this article will help you in adding the featured posts functionality in your theme.

Please do Comments if you have any queries. I would love to hear your awesome responses in commenting section.

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.