How to Add and Display Custom Fields in WordPress Without Plugin

Custom fields in WordPress provide a way to add additional data to posts, beyond the default fields like post content, title, and post meta. They are particularly useful when you need to store extra information for specific posts.

For instance, imagine you are building an E-Book seller website. In addition to the standard post content and title, you may want to include specific details such as price, author, publication date, and more for each item listing. By utilizing custom fields, you can easily store and associate this information as metadata with each individual post.

WordPress provides a built-in interface to create and manage custom fields. You can access it within the post editor screen, allowing you to input and associate the desired data with each post. However, to display the data without relying on a plugin or a page builder, only can be accessed programmatically using APIs provided by WordPress, therefore, you might need some PHP knowledge for that.

To help you gain some insight into how to display the custom field in a post without relying on a plugin, we will show you how to add the custom field data on a new post and then display it on the front end of your website using custom PHP snippets.

Adding and Displaying Custom Fields in WordPress Without Plugin

Adding the Custom Fields

Before you can go adding custom fields to your post, you may need to enable the built-in custom field feature first if it’s not active yet.

To do so, open up a Gutenberg editor either by adding a new post or editing an existing one, click the three-dot icon and click on the Preference settings → General, on the Advanced section, toggle on the Custom fields option then click on the Enable & Reload button save the setting.

Once you’ve activated the feature, you’ll get a new Custom Fields panel at the bottom of the editor. Now you can start adding custom metadata for your post with it.

Each custom field will consist of a Name field, which will serve as the key to call upon the metadata, and a Value field, which will hold the corresponding value of the metadata in simple text format.

For this tutorial, we will create an e-book listing items for example using the following metadata:

• book_author
• book_price
• publication_date

Proceed to enter a new name for the first custom field and type the value you want then click the Add Custom Field button to save it and to continue adding more custom fields.

And after saving the custom field, the custom field name will be available for you in the dropdown when you create a new post.

The dropdown list limit is only 30 items. So, if you already reached the limit, your new custom field name won’t show on the list. Worry not, you can use the following code snippet and place it in your theme functions.php file to increase the limit.

function cf_limit_increase( $limit ) {
  $limit = 100;
  return $limit;
}
add_filter( 'postmeta_form_limit', 'cf_limit_increase' );

The code above will increase the dropdown list limit to 100 and if you want more you always can change the $limit = 100; value to your desired number.

Displaying the Custom Field

To display custom fields of a post, you need to utilize PHP code with the custom field APIs. For the purpose of this tutorial, we will include these code directly in the theme file, eliminating the need for a separate file.

Go to the updated section for a more efficient and safer way to add the code to your child theme functions.php instead of the content.php.

Now for the theme, we use the Twenty Twenty theme. In the Twenty Twenty theme, you can utilize the content.php file to display metadata not only on a single post but also on the blog archive.

It’s worth noting that not all themes support this method, but most of the Twenty themes do.

To access the file, go to your WordPress dashboard and navigate to Appearance → Theme File Editor. Open the Template-Parts folder and select the content.php file. Insert the code after the title and before the content. Here is an example of how the code should be placed:

There are several WordPress APIs to display the custom field, but we will use two commonly used ones :

• the_meta(); this API is primarily used for debugging purposes as it lists all the custom fields of a post.

• get_post_meta(); to retrieve the value of a single custom field of a post.

The ‘the_meta‘ function is no longer available for use since WordPress version 6.0.2, as it has been deprecated by WordPress.

Let’s try using the_meta() to display the custom fields on a post .

As you can see from the above screenshot, the_meta() might not provide a consistent or styled output, so it’s often better to use get_post_meta() for more control over the display.

Now that we know the code is working, let’s use the get_post_meta(); API so we can customize how the data is displayed. To do so, we need to get the value for each custom field first. The API format to get the value of each custom field is as follows:

• $custom_field_value = get_post_meta( $post_id, 'custom_field_name', true );

For the $post_id since we use the current post ID, replace it with $post->ID, and replace the 'custom_field_name' with the name of the specific custom field you want to retrieve. Here is a code example to list the metadata on a post:

<?php 
    //variables to get the value of each custom field 
    $bauthor = get_post_meta($post->ID, 'book_author', true); 
    $bprice = get_post_meta($post->ID, 'book_price', true);
    $bpublishdate = get_post_meta($post->ID, 'publication_date', true);
?>
<h3><hr></h3>
<ul>
  <?php
    //call the variable and place the value on a list with custom key 
    echo '<li>Author : '.$bauthor.'</li>';
    echo '<li>Price : '.$bprice.'</li>';
    echo '<li>Published : '.$bpublishdate.'</li>';
  ?>
</ul>

Here is what the code looks like on our content.php file.

And after we update the file, the result is as follows.

Now, the metadata is lined up nicely on a list with author, price, and published value displayed after each custom key.

Update: Adding Code Snippet to the functions.php File

We are introducing an additional method for showcasing custom field values on your post without relying on plugins.

This method leverages the ‘the_content’ filter, eliminating the necessity to directly access the content.php file. Without further delay, here is the code.

add_filter('the_content','wpp_custom_field');

function wpp_custom_field($content){
  if ( is_singular() && in_the_loop() && is_main_query() ) {
    
        global $post;  
        $post_id = ( empty( $post->ID ) ) ? get_the_ID() : $post->ID;
        $bauthor = get_post_meta($post_id, 'book_author', true); 
        $bprice = get_post_meta($post_id, 'book_price', true);
        $bpublishdate = get_post_meta($post_id, 'publication_date', true);
        if(empty($bauthor)){  
            return $content;
        }else{
            $cflist='<h3><hr></h3>
            <ul>
                <li>Author : '.$bauthor.'</li>
                <li>Price : '.$bprice.'</li>
                <li>Published : '.$bpublishdate.'</li>      
            </ul>';

          $content = $cflist . $content;
  
          return $content;
      }
    }
}

The provided code examines the author value. If it is empty, the post will simply return the content as is.

However, if the author value is present, the code will display the metadata just above the content. Feel free to modify the code to suit your requirements.

The Bottom Line

Custom fields are useful for storing additional information for specific posts in WordPress. Thankfully, WordPress provides a built-in interface to create and manage custom fields within the post editor screen. You can input and associate the desired data with each post using this interface. However, if you prefer not to use plugins for security or performance reasons, you may need some PHP knowledge to work with custom fields. This tutorial aims to provide you with insights on how to add custom field data to a new post and display it on the front end of your website using custom PHP snippets.