{"id":14476,"date":"2020-05-07T12:02:00","date_gmt":"2020-05-07T09:02:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=14476"},"modified":"2023-09-18T16:50:16","modified_gmt":"2023-09-18T13:50:16","slug":"custom-fields-in-wordpress","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/custom-fields-in-wordpress\/","title":{"rendered":"Beginner’s Guide to Custom Fields in WordPress: Explanation + Tutorial"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

\n
\n

In this post, we\u2019ll explain what custom fields are and how they work. We\u2019ll also walk you through the process of adding and using them. While this is a somewhat advanced technique, it\u2019s simpler than you might expect. Let\u2019s get to work!<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tConfused by #WordPress custom fields? Learn what they are and how to use them<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

An introduction to custom fields (and where to find them in WordPress)<\/h2>\n\n\n\n

The custom fields feature<\/a> 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.<\/p>\n\n\n\n

For instance, let\u2019s say you run an affiliate website and frequently publish new product reviews. You can add a custom \u2018score\u2019 field to your posts in order to clearly display a rating for each product:<\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

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

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).<\/p>\n\n\n\n

If this all seems a bit abstract, don\u2019t worry. We\u2019ll continue demonstrating how custom fields work throughout the rest of this post.<\/p>\n\n\n\n

How to use custom fields in WordPress (in three steps)<\/h2>\n\n\n\n

A quick note: <\/strong>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<\/em>.<\/p>\n\n\n\n

There are two ways you can go about adding custom fields. One is to use a plugin, such as Advanced Custom Fields<\/a>. 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.<\/p>\n\n\n\n

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<\/a> in place and that you use a child theme<\/a>. If possible, try this on a staging site<\/a> first.<\/p>\n\n\n\n

Step 1: Enable the custom fields option in the WordPress editor<\/h3>\n\n\n\n

As we mentioned, you typically have to enable custom fields before you can see them. <\/p>\n\n\n\n

In the Block Editor, click on the three-dot icon to open the settings menu:<\/p>\n\n\n

\n
\"Opening<\/figure><\/div>\n\n\n

Then select Options<\/em>:<\/p>\n\n\n

\n
\"Opening<\/figure><\/div>\n\n\n

This will open a pop-up window. Select the Custom Fields<\/em> checkbox, then click on the Enable <\/em>button:<\/p>\n\n\n

\n
\"Enabling<\/figure><\/div>\n\n\n

Reload the post, and you’ll find the custom fields section below the editor:<\/p>\n\n\n

\n
\"An<\/figure><\/div>\n\n\n

Now that the WordPress custom fields feature is visible, you can start adding metadata.<\/p>\n\n\n\n

Step 2: Add a new custom field<\/h3>\n\n\n\n

To create a custom field, click on the Enter New<\/em> option in the custom fields section below the editor:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

Then give it a name and a value. For instance, let\u2019s say you wanted to add a short disclaimer just to your sponsored posts. You could call the associated field Sponsored Post<\/em>:<\/p>\n\n\n

\n
\"Adding<\/figure><\/div>\n\n\n

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

Once you\u2019ve done this, the same custom field will be available to add to any other post or page in the Name <\/em>dropdown menu:<\/p>\n\n\n

\n
\"Selecting<\/figure><\/div>\n\n\n

This means for each new post, you can simply select your custom field and fill in the value appropriately.<\/p>\n\n\n\n

Step 3: Tell your theme how to display your custom field’s metadata<\/h3>\n\n\n\n

\u26a0\ufe0f Important<\/strong>: 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.<\/p>\n\n\n\n

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\u2019ll need to edit the files for your active theme.<\/p>\n\n\n\n

In your WordPress dashboard, navigate to Appearance > Theme Editor<\/em>. You\u2019ll want to be very careful here, since this section lets you make changes directly to your site\u2019s files. In the right-hand sidebar, look for Single Post (single.php)<\/em>:<\/p>\n\n\n

\n
\"The<\/figure><\/div>\n\n\n

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

We’re not <\/em>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\u2019s a snippet you could use:<\/p>\n\n\n\n

<?php echo get_post_meta($post->ID, 'key', true); ?><\/code><\/p>\n\n\n\n

Notice there’s a value that reads key <\/em>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<\/em>:<\/p>\n\n\n\n

<?php echo get_post_meta($post->ID, 'Sponsored Post', true); ?><\/code><\/p>\n\n\n\n

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

\n
\"Example<\/figure><\/div>\n\n\n

You can find more examples of code like this in the WordPress Codex\u2019s custom fields entry<\/a>.<\/p>\n\n\n\n

If you want to, you can also experiment with placing the code outside the WordPress loop<\/a>, 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.<\/p>\n\n\n\n

Conclusion<\/h2>\n\n\n\n
\n
\n

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 \u2013 a hidden option that significantly expands your control over your content.<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tConfused by #WordPress custom fields? Learn what they are and how to use them<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n\n

In this guide, we\u2019ve shown you how to use custom fields in three steps:<\/p>\n\n\n\n

    \n
  1. Enable custom fields in the WordPress editor.<\/li>\n\n\n\n
  2. Add a new custom field.<\/li>\n\n\n\n
  3. Configure your theme to display your custom field’s metadata.<\/li>\n<\/ol>\n\n\n\n

    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.<\/p>\n\n\n\n

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

    Do you have any questions about how to use custom fields in WordPress? Let us know in the comments section below!<\/em><\/strong><\/p>\n\n\n