Beginner’s Guide to Custom Fields in WordPress: Explanation + Tutorial

Chưa được phân loại

It can become time-consuming to repeatedly add the same information to multiple posts, especially for content-heavy sites such as blogs. This is a task you can accomplish much faster using custom fields in WordPress.

With custom fields, you can create a place in the editor to add a specific type of information to each of your posts or pages. For instance, you may incorporate a product rating for reviews or a disclaimer for affiliate content.

In this post, we’ll explain what custom fields in WordPress are and how they work. We’ll also walk you through the process of adding and using them. While this is a somewhat advanced technique, it’s simpler than you might expect. Let’s get to work!

An introduction to custom fields (and where to find them in WordPress)

The custom fields feature is hidden by default in WordPress, but it can be a useful option to know about. In a nutshell, it lets you customize your posts and pages by adding extra metadata to them.

For instance, let’s say you run an affiliate website and frequently publish new product reviews. You can add a custom ‘score’ field to your posts in order to clearly display a rating for each product:

An example of a custom field on the back end.

In the above example, the custom field’s name is Review Score, and the value is the score itself (e.g., 3.5/5). When added to a post, custom fields are stored as ‘metadata’. This is information that’s associated with a particular piece of content (such as post titles, meta descriptions, and other elements).

After you store and categorize your custom metadata, you can display it on the front end so your site’s users can see it. In the review score example above, for instance, you might want to show your product rating using a star system (which is how most review plugins work, in a nutshell).

If this all seems a bit abstract, don’t worry. We’ll continue demonstrating how custom fields work throughout the rest of this post.

How to use custom fields in WordPress (in three steps)

A quick note: In this section, we’re going to show you how to use the native WordPress custom fields function because it’s useful to understand the basic principles. However, most people find it easier to use custom fields plugins such as Advanced Custom Fields (ACF), Pods, Toolset, or Meta Box. More on these later.

There are two ways you can go about adding custom fields in WordPress. One is to use a plugin, such as Advanced Custom Fields. The second is to use WordPress’ native functionality. It’s not as straightforward, but tackling custom fields manually means you have absolute freedom over the metadata you include. Even if you use a plugin, it’s also useful to understand what’s going on underneath the hood.

Below, we’ve demonstrated how to access and use this feature. Note that we’re going to edit some of your theme’s core files during these steps, so we recommend that you have a recent backup in place and that you use a child theme. If possible, try this on a staging site first.

Step 1: Enable the custom fields option in the WordPress editor

As we mentioned, you typically have to enable custom fields in WordPress before you can see them.

In the Block Editor, click on the three-dot icon to open the settings menu:

Opening the Block Editor settings menu.

Then select Options:

Opening the Block Editor options.

This will open a pop-up window. Select the Custom Fields checkbox, then click on the Enable button:

Enabling custom fields in the Block Editor.

Reload the post, and you’ll find the custom fields section below the editor:

An empty custom fields section in the Block Editor.

Now that the WordPress custom fields feature is visible, you can start adding metadata.

Step 2: Add a new custom field

To create a custom field, click on the Enter New option in the custom fields section below the editor:

The Enter New custom field option.

Then give it a name and a value. For instance, let’s say you wanted to add a short disclaimer just to your sponsored posts. You could call the associated field Sponsored Post:

Adding a new custom field in WordPress.

In the Value field, you can enter the metadata specific to the post you’re currently editing. In this case, it will be a simple Yes or No, to indicate whether or not the post is sponsored. Then, click on Add Custom Field to save this information (don’t forget to save or update the post itself as well).

Once you’ve done this, the same custom field will be available to add to any other post or page in the Name dropdown menu:

Selecting a custom field from the dropdown.

This means for each new post, you can simply select your custom field and fill in the value appropriately.

Step 3: Tell your theme how to display your custom field’s metadata

⚠️ Important: Make sure to back up your site before continuing. You’ll be editing your theme files directly, which always has a chance to break something.

Creating a custom field enables you to add metadata to the back end. However, if you want to display this data on the front end, you’ll need to edit the files for your active theme.

In your WordPress dashboard, navigate to Appearance > Theme Editor. You’ll want to be very careful here, since this section lets you make changes directly to your site’s files. In the right-hand sidebar, look for Single Post (single.php):

The WordPress Theme Editor.

The single.php file includes the template that your theme uses for individual blog posts. Open it and look for the line that reads /* Start the Loop */. The ‘loop’ is the code that WordPress uses to decide what blog posts to load for each page, depending on how it’s configured.

We’re not going to edit the loop for your individual post template, but rather, add a few new lines of code right before the end of it. You can add any code you like to tell WordPress what to do with the data in your custom fields. For example, here’s a snippet you could use:

<?php echo get_post_meta($post->ID, 'key', true); ?>
<?php endwhile; // end of the loop. ?>
<?php } ?>

Notice there’s a value that reads key in the first line of code. That’s a placeholder you need to write over using the name of the custom field you created during the first step. For our example, that would be Sponsored Post:

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

That code tells WordPress to look for the Sponsored Post custom field and check what its value is. If it finds that custom field for a specific post, it’ll display its value:

Example of custom fields in WordPress on the front-end

You can find more examples of code like this in the WordPress Codex’s custom fields entry.

If you want to, you can also experiment with placing the code outside the WordPress loop, so you can control its location. You may end up spending some time tweaking this file until you get the perfect placement, which is precisely why we recommended you have a backup on hand.

Conclusion

As you become more comfortable with WordPress, you can start branching out and using some of its more advanced features. Custom fields are the perfect example – a hidden option that significantly expands your control over your content.

In this guide, we’ve shown you how to use custom fields in WordPress in three steps:

  1. Enable custom fields in the WordPress editor.
  2. Add a new custom field.
  3. Configure your theme to display your custom field’s metadata.

However, most people don’t work directly with the native custom fields feature as we showed you in this post. Instead, most people will use a plugin instead.

Now that you understand the basics of custom fields, check out our tutorial for the Advanced Custom Fields plugin to learn an easier way to use custom fields on your website.

Do you have any questions about how to use custom fields in WordPress? Let us know in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai.