How to Display a WordPress Post Only if It Has a Specific Custom Field

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.

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:

1. 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.
2. 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.
3. We recommend understanding how the WordPress template hierarchy works so that you know where to add the code later.
4. 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.