WordPress custom fields: definition, tutorial, and use cases

WordPress custom fields let you store and display additional information like pricing, product details, or author notes – all without cluttering your main content. Even better, they can make your site feel more dynamic and personalized.

If you’re looking to learn more about WordPress custom fields and how to use them, this article will walk you through everything you need to know. We’ll also provide some examples of use cases that you can use as inspiration.

Let’s start!

What are WordPress custom fields?

WordPress custom fields are extra data fields that let you display information beyond the default.

Some examples are product prices, time to complete an action, event dates, or post ratings. This makes your website content more dynamic and tailored to your specific needs.

People often use WordPress custom fields together with custom post types and custom post templates to enhance their websites.

If you aren’t familiar with these, custom post types let you organize content according to your specific needs, freeing you from WordPress’ default blog-like post structure.

Meanwhile, custom post templates ensure unique layouts matching the type of content you want to display.

With these three elements, you can tailor your website’s content structure and design to fit your exact vision.

For instance, if you’re running a real estate website, you can create a custom post type to display property listings, use custom post templates to arrange the layout, and add custom fields for the property details.

How to enable custom fields in WordPress posts and pages

By default, the WordPress custom fields feature is disabled, so you’ll need to enable it first. Here’s how to do so:

1. Open your WordPress post or page editor. 
2. Locate the Options menu (the three-dot button in the upper right corner).
3. Select Preferences, scroll down to the Advanced section in the General menu.
4. Toggle the Custom fields option. 
5. The Show & Reload Page button will appear. Click on it to finish. 

After that, the Custom Fields panel will appear at the bottom of the content editor.

The Name and Value fields function like key/value pairs. The key is the custom field’s name, and the value is the specific information associated with it.

For example, we’ll create a custom field to display a sponsored post disclosure. Click the Enter new button to create custom fields.

In this example, we name it sponsored_post with this text value:

This is a sponsored post. However, we make sure to only feature products and services we find valuable for our readers.

Finish by clicking the Add Custom Field button.

Note that WordPress only keeps custom field values on the back end. We’ll need to edit the theme files to display the custom field data on the front end.

How to display the custom fields

Before proceeding to the steps, we recommend creating a child theme so you can experiment freely without affecting the main theme. Doing so also ensures that your changes remain intact even when the theme version is updated.

Since the steps for displaying custom fields differ between classic and block themes, we’ll cover each separately.

Classic themes

Navigate to Appearance → Theme File Editor from your WordPress admin dashboard. Then, find the Single Post (single.php) file where you’ll add the extra code lines.

Here’s an example of a common code snippet to display custom fields using the get_post_meta() function:

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

Be sure to change the ‘key’ placeholder to match your custom field name.

Keep in mind that the example above shows a basic function of WordPress custom fields. You will need to do some extra coding to apply more complex actions.

Now, we want to add this code line to display the sponsored post custom field:

$sponsored = get_post_meta(get_the_ID(), 'sponsored_post', true);

if (!empty($sponsored)) {

    echo '<p class="sponsored-disclaimer"><strong>Disclaimer:</strong> ' . esc_html($sponsored) . '</p>';

}

To display this information at the top of a post, add the code right after the while ( have_posts() ) : the_post(); line. However, you can also place it differently to display the message in another part of the post.

Once done, click the Update File button to save the changes.

The code we apply tells WordPress to look for posts with the sponsored_post custom field and display their value with an added Disclaimer text.

Block themes

If you’re using a WordPress block theme, you won’t have access to the single.php file. You’ll need to create a shortcode instead.

Using the same example, we will show how to display the custom field with the Twenty Twenty-Five block theme.

Navigate to Tools → Theme File Editor and open the Theme Functions (functions.php) file. Scroll down to the bottom and add this code snippet:

function display_sponsored_disclaimer() {

    $sponsored = get_post_meta(get_the_ID(), 'sponsored_post', true);

    if (!empty($sponsored)) {

        return '<p class="sponsored-disclaimer"><strong>Disclaimer:</strong> ' . esc_html($sponsored) . '</p>';

    }

}

add_shortcode('sponsored_disclaimer', 'display_sponsored_disclaimer');

Feel free to tweak the code if you want to change any details. Then, hit the Update File button to implement the changes.

Now, open the post editor. Go to the part where you want to display the custom field, click the Add block (+) button.

Select Shortcode, and the field will appear on the post editor. Input your created shortcode there.

Type [sponsored_disclaimer] as we set it in the theme file earlier. Hit Save to apply the change.

You’ll see the sponsored post disclaimer appear on the front end.

How to use a WordPress plugin to manage custom fields

While manually adding custom fields requires editing theme files, you can simplify the process with plugins. Some of the best WordPress custom field plugins include Secure Custom Fields, Meta Field Block, Pods, Custom Field Suite, and CarbonFields.

Using the same sponsored post disclaimer example, we’ll show you how to display the custom field without coding with Secure Custom Fields and Meta Field Block plugins.

So, the first thing you need to do is to install and activate both plugins on your WordPress dashboard. Once done, follow these steps to add the custom field in WordPress:

1. Navigate to the SCF menu from your WordPress dashboard. 
2. Click the Add Field button in the field group editor interface.

3. Give the Field Group a name. It can be something that reflects its purpose.
4. Choose Text as the Field Type, as we want to display simple text this time.
5. Fill the Field Label box to give an idea of the custom field. 
6. The Field Name box auto-fills based on the field label, but you can edit it if needed. 
7. Type in the Default Value to appear in the custom field. You can also leave it blank if you want different data values for each post.

8. Scroll down to the Settings box to change the custom field’s configurations. 
9. This time, we’ll only set the Location Rules, which will determine where the custom field will appear. In this example, we want it to appear on every post. 

10. Hit the Save Changes button in the upper right corner. 

With these settings, the custom field section will appear in every WordPress post editor interface.

Do note that your custom field configurations will determine how the section looks. For example, the text box will be blank if you don’t set a default value.

At this point, the field and its value will only appear on your dashboard. Normally, you’ll need to tweak the code in your theme file to show the metadata on the front end.

Using the Meta Field Block plugin, you can simplify the process with these steps:

1. Open the post or page editor where you want to show the custom field.
2. Choose any area to display the custom field and click the Add block button. 
3. Select Meta Field Block. You’ll see the Meta field settings section on the block settings panel. 
4. Choose ACF – Advanced Custom Fields from the FIELD TYPE drop-down menu. 
5. Enter the field name you set. For this example, we’ll input sponsored_post according to what we’ve set earlier.

6. Save the post to implement the change. 

As a result, the text will now appear in the actual post.

Benefits of WordPress custom fields

The primary purpose of WordPress custom fields is to store and display additional data that isn’t included in the default content editor. So, they can help with:

• Improving content organization – custom fields provide better data structuring by allowing users to add specific details related to a post. 
• Enhancing website customization – custom fields let you go beyond WordPress’s default metadata, giving you more flexibility to customize your site exactly as you want. 
• Adding custom data without plugins – while many WordPress plugins provide extra fields, using native custom fields keeps websites lightweight. 
• Streamlining data management for dynamic content – websites with structured content, such as directories, portfolios, or ecommerce stores, can efficiently store and retrieve product specifications, customer testimonials, or booking details. 
• Enhancing SEO and user experience – custom fields can hold structured data (schema markup) for improving visibility in search engine result pages. They also enhance user experience by making your website content easier to scan and interact with.

Popular use cases of WordPress custom fields

There are many ways you can improve your WordPress site with custom fields. Here are some real-life examples:

Real estate listings

Use custom fields to store property details such as price, location, square footage, number of bedrooms/bathrooms, and availability status. This allows for structured and filterable listings, improving user experience on real estate websites.

Ecommerce products

If you run an online store, custom fields can be beneficial to add extensive product details like SKU numbers, discount percentages, stock status, manufacturer details, and product dimensions.

Event listings

Event websites can include custom content for the event date, time, venue location, ticket prices, performer lineups, and RSVP links. Displaying such information improves the user experience by letting visitors find all relevant event details in one place.

Recipe websites

Take advantage of custom fields to add structured recipe details such as preparation time, cooking time, number of servings, ingredient lists, calorie count, and dietary restrictions. This improves readability and helps users follow recipes easily.

Book reviews

A book review website can display extra information like author name, book genre, publication year, number of pages, average reader rating, and personal review scores. This provides readers with a quick summary before diving into a full review.

Portfolio websites

If you’re a freelancer or are running an agency, consider showcasing your work by adding custom fields for client names, project descriptions, technologies used, project completion dates, and links to live projects.

Conclusion

WordPress custom fields let you add extra information to your content, making your site feel more dynamic and personalized.

In this guide, we’ve covered the steps of creating and using custom fields in WordPress manually and by using plugins. We also provided some examples of how you can utilize them best for your needs.

We hope this guide helps you apply and display custom fields on your WordPress site. Start experimenting and let us know how it goes.

WordPress custom fields FAQ