WordPress Custom Fields and get_post_meta Tutorial

In most cases, WordPress Custom Fields are used to display any kind additional information related to a certain post or page. Although there’s a wide variety of custom fields uses in WordPress, this tutorial will focus on the basic implementation. We’ll show you how to manually enable, create and display WordPress Custom Fields.

Understanding WordPress Custom Fields

Custom fields are a part of the WordPress metadata, additional information related to a post or page. Most common WP metadata information are usually author’s name and publishing date. With the implementation of custom fields you can extend the default metadata with any kind of additional info specific for your project. So, how does it work in practice?

Let’s take for example a cooking blog, publishing various recipes. By default, under it’s title each recipe will show the post author and the publishing date. It would be a great idea to expand that info with preparation time and experience level. To achieve that we’ll have to use WordPress Custom Fields, one for each recipe information we wish to display.

Beginners Tip: Custom fields can be added to WordPress in two ways. One approach is by editing template files, which require some knowledge of PHP and understanding the WP files structure. The other approach is by using a plugin, such as Advanced Custom Fields. This tutorial is meant for those who avoid using too many plugins and have at least intermediate coding experience. If you feel more comfortable using a plugin, there’s a nice choice of Custom fields plugins in the WordPress repository.

Enabling Custom Field functionality in WordPress

Custom fields in WordPress are not enabled by default. Therefore, to start using them firstly you have to enable that option inside the post or page editor. If you use a WP version prior to 5.0 you enable it by marking the Custom Fields checkbox in Screen Options on the top the editor.

In the Gutenberg editor (WP version 5.0 and higher) firstly you click on the three dot button in the top right corner of the screen. Secondly, you click Options on the bottom of the menu. Finally, you have to mark the checkbox Custom fields and confirm the action by clicking the Enable & Reload button.

Upon activation, scroll down to the bottom of your post editor. The WordPress Custom Fields block should be there, ready for action.

The appearance of the Custom Fields block within the WordPress Post Editor.

How to create WordPress Custom Fields and add values

Once enabled, your WordPress page or post editor is expanded with a custom fields block on the bottom of the editor. To create a custom field you simply enter it’s name in the left form field and it’s value in the right form field. Confirm the action by clicking the Add Custom Field button and updating your post. The value of the custom field is specific for the post you are editing, but the field itself is now available in all your posts.

The WordPress custom field name must be a text string. On the other hand, the value can plain text but aslo HTML code. You can display even images as custom field values using the <img> HTML tag.

Let’s get back to our example of a cooking blog and create some custom fields. Firstly we’ll create a custom field named Preparation Time with the value of 30 minutes. We’ll name our second custom field Experience Level and add a plain text value Intermediate to it. Finally, we’ll save the changes by updating the posts. Our additional post information is now ready to be displayed within the post template.

Display custom field value inside the WordPress post template

Now that we enabled the WordPress custom fields functionality and created our first fields, it’s time to display their values within the post template. Firstly we have to locate the template file that generates the post content. This PHP code location may vary from theme to theme. In most themes the post content is generated by the single.php template files, so that’s the place to start from. In some themes, such as WP default Twenty Nineteen, the single.php calls additional template parts that generate the content itself.

Once the post content template file is located, we need to chose a position inside the template file where we wish to display our custom fields values. This position must be located inside the post loop, which means somewhere between <?php while ( have_posts() ) : and endwhile; ?> loop statements. Developers with basic knowledge of PHP and understanding of the WordPress structure shouldn’t have troubles determinating that position.

The WordPress function that displays custom field values is the following:

<?php echo get_post_meta($post->ID, 'Field Name', true); ?>

Now, let’s customize the function according to our example. We have to call the function twice with different Field Name arguments, since we created two custom fields earlier. Arguments are case sensitive so we have to make sure we use exact field names created earlier. Furthermore, we’ll wrap it with a couple of HTML tags for CSS styling purpouses.

In our cooking blog example we decided to display our metadata right under the post title, which in most templates looks looks simmilar to <?php the_title( ‘<h 1 class=”entry-title”>’, ‘</h 1>’ ); ?>. Here’s how the final code looks after the customization:

<div class="recipe-info">
<p>Recipe preparation time: <span><?php echo get_post_meta($post->ID, 'Preparation Time', true); ?></span></p>
<p>Cooking experience: <span><?php echo get_post_meta($post->ID, 'Experience Level', true); ?></span></p>
</div>

Optionally, you can add some CSS styles and make the meta box blend into your theme perfectly:

.recipe-info { margin: 15px 0 ; text-align: center ; }

.recipe-info p { display: inline-block; margin: 0 1% ; }

.recipe-info span { font-weight: bold ; }

Our imaginary Cooking Blog post title with custom post metadata underneath, after slight CSS styling.

Spicing things up

The previous example shows the basic implementation of Custom Fields in WordPress. We’ll move a step further and expand our custom metadata code snippet with some additional functionality. Let’s display post information only if there is a custom field value. If the custom field values in some posts are left empty, the Field description itself won’t be displayed either. For example, if we fill the Preparation Time field and leave empty the Experience Level field, our metadata block will display only Recipe preparation time: 30 minutes.

We’ll achieve that by adding a conditional statement to our example code snippet:

<div class="recipe-info">
<?php 
 $time = get_post_meta($post->ID, 'Preparation Time', true);
 if ($time) { ?>

 <p>Recipe preparation time: <span><?php echo $time; ?></span></p>

 <?php } 
else {  }
 ?>

<?php 
 $experience = get_post_meta($post->ID, 'Experience Level', true);
 if ($experience) { ?>

 <p>Cooking experience: <span><?php echo $experience; ?></span></p>

 <?php } 
else {  }
 ?>
</div>

In the code above, firstly we created a $variable from the WordPress custom field value. If the custom field doesn’t have a value set, the $variable won’t get created. Secondly, the conditional statement checks if there’s a $variable and displays the paragraph containing the field description and the $variable as field value. In case the custom field is empty and accordingly there’s no $variable, nothing gets displayed.

Learn more about the get_post_meta function

With this tutorial, we only scratched the surface of all the possibilities that WordPress Custom Fields offer. Fell free to experiment with our example code snippets and modify them according to your needs. To learn more on this topic, the WordPress Code Reference is a good place to start exploring.