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.
How to install WordPress you can read here.
WordPress Theme: You can use any theme which you like the most but here we are using our theme ‘Bharat‘ a simple, beautiful and responsive blog theme.
There are 3 steps for this procedure.
- Creating a checkbox (metabox) in post/page admin area.
- Save meta box value.
- 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’.
You may also be interested in these articles:
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 .
You can also make your posts featured using Free WordPress plugins.
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.
I was looking for this exact thing. Thank you!!
works great..thanks 🙂
I’m new to wordpress and I don’t know why but I had to pass a third parameter to checked() – false. Otherwise it would print checked=”checked” after the input. Can you tell me why? 🙂
why you need it if there is already ‘sticky posts’ functionality in WordPress?
Sticky Post will loop on every wp_query available on the wordpress site.
how to see all featured post in wp rest api response
Wow it’s awesome, very easy
Thank you 😀
That’s what I was looking for, thanks a lot. There’s just one thing… I can’t take the ‘featured-checkbox’ back. So if I checked it once I can’t uncheck it anymore. Any ideas?
Same problem 🙁
Hello Dany,
Please go with the new updated code this will solve your all problems.
Hello Philipp
We have updated this post please go with the new code this will definitely solve your problem.
Wow it’s awesome, very easy
Thank you very much 😀
How can I made , that featured posts will not show on standart loop?
This is my loop –
query_posts(‘post_type=watch&posts_per_page=5&orderby=rand’);
if (have_posts()) :
echo “”;
while (have_posts()) : the_post();
echo ”;
echo “”.get_the_title();
echo the_post_thumbnail(array(220,200));
echo “”;
echo ”;
endwhile;
echo “”;
endif;
wp_reset_query();
I used no instead of yes
3,
‘meta_key’ => ‘meta-checkbox’,
‘meta_value’ => false
);
$featured = new WP_Query($args); ?>
a quick working code , fentestic
Great solution. I was trying something along these lines but didn’t manage it as well. BTW for additional custom post types I duplicated – add_meta_box( ‘sm_meta’, __( ‘Featured Posts’, ‘sm-textdomain’ ), ‘sm_meta_callback’, ‘post’ ); changing ‘post’ to my CPT title and it works great.
Thank you very much for this tutorial, its simple but working, after doing this trik i deleted my freatured post plugin for fastening my blog load, thanks again
Glad to know that the technique worked out for you.
nice. worked like a charm. However, it is working for posts only not for pages. featured checkbox does not appear on pages.
Hello Neha,
Yes, This post is only for creating a featured box section in the post.
you know any hint or guide or tutorial for doing same for pages?? i have googled a lot. but all are for posts not for pages.
Neha, you can also add a checkbox for featured in pages by replacing the ‘post’ slug to ‘page’
For example
add_meta_box( 'sm_meta', __( 'Featured Posts', 'sm-textdomain' ), 'sm_meta_callback', 'page' );thanks.
Hello!
I have been trying to save and display a PAGE as featured content, but the code above only works for POSTS, do you think you can provide the full function code to achieve this? I would really appreciate it.
Thanks
This was so helpful! Thanks!
I have noticed that when you modify the categories using the quick editing of wordpress, the post is automatically unchecked as featured. You must go back to normal editing to recheck the post as featured. There is some way to fix this issue? Thanks again!
Great article 🙂
thanks.
Thank you so much to publish a great article. I need the featured post plugin to work in upwork.
Great tutorial! Saved me hours of work. To make managements of featured posts even easier; Is there a way if adding the check-box to the Posts admin page? This can allow multiple selection of post as featured posts and cut down time editing posts individual posts each time changes need to be done.
Thank you very much…
I am getting “Warning: Cannot modify header information” on two files. wp-includes/pluggable.php and wp-admin/post.php
Do you know why this might be?
Thanks
Just want i was looking for. How do you get it to show the Featured image?
For some features I have moved to WP from sbisitesell. Now, discovering the features one by one! Featured post is one of them i’m looking for. Thanks for sharing.
Hi Poonam! Thank you for your helpful posts.
But I have a problem, there’re two similar post when I choose it as a featured post.
Image: https://prnt.sc/j2xl56
I want to remove the post below and only show 1 featured post on top.
What should I do?
My site is thuthuatios[dot]com
Hi you have a greate site Thank you for sharing with us nice
https://truelightoflife.com/hypnotism
hi
thanks for such a nice tutorial
my question is
how i can use this code for posting my listing through a plugin
i am using listingpro plugin but on add listing page i want to have featured option
but when i add your code it only added on wp add post page not in add listing page
please help or guide
thanks in advance
Thank You for such an easy explanation.
Great!!!!
Thanks for this code. You have describe very clearly that how to use this code without any confusion.
Awesome!!!!
It works! hahaha
thank you so much!
Great tips! Works like a charm.
It is completely awesome. It works exactly the way i wanted.
Very easy to use code.
Do you have any idea to always display the last 3 posts selected?
I’m using ‘posts_per_page’ => 3 but If I have more posts selected than that, the next item selected won’t be shown because is not following a sequential order.
I tried to use ‘orderby ‘=> ‘date’ but doesn’t work properly.
What do you recommend to solve this problem?
Thank you in advance!
I solved the problem using ‘orderby’=> ‘modified’.
This post is still ruling in 2020 🙂 , thank you for sharing. If anyone would like to have the metabox above the publish section you just need to change this add_meta_box( ‘sm_meta’, __( ‘Featured Posts’, ‘sm-textdomain’ ), ‘sm_meta_callback’, ‘post’ ); to this add_meta_box( ‘sm_meta’, __( ‘Featured Posts’, ‘mulk’ ), ‘mulk_sm_meta_callback’, ‘post’, ‘side’, ‘high’ );
Thank you for your effort, it’s great code and it works well.
I am trying to make the code add more than one option together at the same time,
Example: Featured, Trending, Editors’ Choice.
Does the code allow me to do that?
I will be waiting for your response, it means a lot to me.
Thank you!!
Hi, I’m trying to see if this would work with an elementor theme