Maybe you’ve added a custom field to your WordPress posts and want to show only posts with that field. Or you’re trying to make a special page that lists posts with a specific custom field value. You’re not alone!
One of our readers asked how to do this, and we thought it’d be helpful to share the answer with everyone.
Custom fields let you add extra info to your posts and pages. They’re great for organizing and filtering your content. In this article, we’ll show you how to display WordPress posts only if they have a specific custom field.
Note: This tutorial is for displaying WordPress posts if they have a value entered in a specific custom field. If you want to display custom fields on the front end of a WordPress post, then you can read our guide on how to display custom fields in WordPress themes.
Why Display WordPress Posts With a Specific Custom Field?
When you create a post on your WordPress website, you can use custom fields to add additional metadata to the post. Metadata is information about the post, such as the title, author, and publish date.
Custom fields are an advanced WordPress concept, and there are many ways to add custom fields in WordPress. You’ll find lots of helpful tips on how to use and display custom fields in our post, WordPress Custom Fields 101: Tips, Tricks, and Hacks.
One of our users asked us how to display WordPress posts only if a specific custom field was present. This may be useful if you’re looking to create a custom page that lists all of the posts that contain a specific custom field and/or value.
After replying back with the answer, we thought it would be best to share it with everyone else so the larger WordPress.org community can benefit from it as well.
Editing Your WordPress Theme Files: What to Keep in Mind
To be able to follow this tutorial properly, here are some things you should keep in mind:
- This tutorial involves editing your WordPress theme files with code, so it’s not the most suitable for complete beginners. If you’re new to this, then you will need to read our guide on how to copy and paste code in WordPress.
- We recommend backing up your website and/or using a staging environment so that your live site doesn’t get affected when an error occurs. This is because you’ll be adding code to your theme files, which can be risky.
- We recommend understanding how the WordPress template hierarchy works so that you know where to add the code later.
- You will also need to get familiar with how WordPress loops work because we will call these parameters in a WordPress query.
Also, note that this tutorial only works with classic WordPress themes, as block themes have a different set of theme files.
With that being said, let’s take a look at how to display a WordPress post only if it has a specific custom field.
Displaying a WordPress Post Only if It Has a Specific Custom Field
Before we show you the code you need to use, you need to know which theme file you need to add it to. Most likely, that will be a page template, such as index.php, archive.php, or page.php.
Let’s say you want to add it to the index.php file of the Twenty Twenty-One theme. Here is what the WordPress loop part of that file looks like at the moment:
<?php
if ( have_posts() ) {
// Load posts loop.
while ( have_posts() ) {
the_post();
get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) );
}
// Previous/next page navigation.
twenty_twenty_one_the_posts_navigation();
} else {
// If no content, include the "No posts found" template.
get_template_part( 'template-parts/content/content-none' );
}
get_footer();
This code uses the default WordPress loop (have_posts()
and the_post()
) to display posts. This method is suitable for most standard WordPress themes and is used to display posts without any custom filtering or sorting.
Now, let’s say you use the custom field ‘color’ like in the example above. You will need to replace that entire code with the snippet below:
<?php
// The Query to show a specific Custom Field
$the_query = new WP_Query('meta_key=color');
// Load posts loop.
if ( $the_query->have_posts() ) {
while ( $the_query->have_posts() ) {
$the_query->the_post();
get_template_part( 'template-parts/content/content', get_theme_mod( 'display_excerpt_or_full_post', 'excerpt' ) );
}
// Previous/next page navigation.
twenty_twenty_one_the_posts_navigation();
} else {
// If no content, include the "No posts found" template.
get_template_part( 'template-parts/content/content-none' );
}
// Reset Post Data
wp_reset_postdata();
get_footer();
In this new code, we introduced a custom query ($the_query = new WP_Query('meta_key=color');
) to fetch posts based on a specific custom field value (in this case, posts with a custom field ‘color’).
It then uses a custom loop (if ($the_query->have_posts())
) to iterate over the posts fetched by this custom query, displaying each post’s content in the same way as the first snippet.
We also added thewp_reset_postdata()
function to ensure that WordPress returns to displaying all posts correctly after the custom query. This ensures the site functions smoothly and shows the right content to users.
Now, if you want to show specific posts that have a custom field with a specific value, then you just have to change the query from line 3 like this:
$the_query = new WP_Query( 'meta_value=blue' );
This will display all posts that have a ‘blue’ value in any custom field.
If you want to make sure that the ‘color’ field has a ‘blue’ value, then your query code will look like this:
$the_query = new WP_Query( array( 'meta_key' => 'color', 'meta_value' => 'blue' ) );
You can learn about additional parameters you can use in your query on the WordPress WP_Query code reference page.
Once you have saved the code in the page template PHP file, you can check your WordPress site on the front end to see your code in action.
Learn More Ways to Customize Your WordPress Site
Here are more ways you can customize your WordPress pages:
- How to Style Individual Categories Differently in WordPress
- How to Add a Custom Scrollbar in WordPress
- How to Add Custom Styles to WordPress Widgets
- How to Style Each WordPress Post Differently
- How to Use Shortcodes in Your WordPress Themes
- How to Highlight New Posts for Returning Visitors in WordPress
- How to Change the Sidebar Side in WordPress
We hope this tutorial helped you learn how to display a WordPress post only if it has a specific custom field. You may also want to see our complete guide on how to edit a WordPress website and our expert picks of the best Figma plugins for WordPress.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
ahmed
i have a question sir if i want to display single post and custom fields then what i should do.
i dont want to display the post with specific custom fields. i want to display all custom fields of post
Dave101
Hi, thank for the useful tutorial. I have a question, in a wordpress website i set a meta value named “meta_country” and then i set every post with the country of the article, like “us”, “uk”, “fr”… Now I’m trying to add somewhere in the home of the blog a link that show list of all post with a specific country and a specific tag. For example all “UK” post tagged “APPLE”.
I don’t understand how to do that, someone could help me?
Максим Каминский
great thanks, it help wery well!
pjhooker
Thx!
Eduard Unruh
omg finally THANKS!
Mario M
I wasnt able to generate any results unless I included “post_type” parameter into the query.
ie: $the_query = new WP_Query(‘post_type=page&meta_key=color’);
sacha
Wonderful, just so simple and clean.
Thank you.
scottlee.me
@ad Great question! I’m curious too.
ad
Hi,
How could I show posts that DON’T have a specific Custom Field? Any idea?
Thanks!!!
tara tin
as I know from php it must be meta_key!=’your key’
;just you need to know that “!” means “not”
brunobruno2
Beatiful! Many thanks for sharing it. Works like a charm.