Create feature post option in admin area in WordPress custom theme

October 30, 2018174
Share Tweet Pin it

Add a featured posts section

There is a simple step by step procedure to follow.

  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.

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 .