How to Add Custom Fields to Your WordPress Content (2 Methods)

Every page you create in WordPress has its own metadata, which includes important information like the title and description. The platform uses specific fields to add this data automatically. However, you can also add your own metadata by setting up WordPress custom fields.

There are two main ways to do this, and in this article we’ll walk you through both options. You may:

  1. Use a WordPress custom fields plugin (custom fields).
  2. Add WordPress custom fields manually and edit your theme to display them.

By the time we’re done, you’ll know everything you need to create and display new custom fields in WordPress. So get to work!

What are WordPress custom fields?

To start, let’s talk about fields in general terms. A field is an element on a web page or app where information can be added, like this simple box:

Fields come in many shapes and sizes. For example, they can include list boxes and check boxes. You’ll also find date pickers and even fields that only accept specific types of text, like numbers.

In either case, the information you add using these fields can serve many purposes. But most of the time, the information entered is used as ‘metadata’, which is just a fancy word for data that refers to other data (forgive the redundancy).

For example, WordPress posts have a title that describes their content, so it’s technically a metadata type:

Other types of metadata include tags, , categories, and more. One thing all of these pieces of information have in common, though, is that WordPress (or certain plugins) provide you with fields that you can use to add them to your content.

However, in some cases, you’ll want to add metadata that WordPress doesn’t include by default. And that’s where WordPress custom fields come in, offering a way to enter that data and associate it with your content.

With the right tools and technical knowledge, you can create just about any type of WordPress custom fields you want. One of our favorite examples is adding a star rating system to your posts:

When you set up a custom field for star ratings, you can rate your own posts or even ask your visitors to leave reviews (although that’s a bit trickier to pull off). This just goes to show what you can achieve by learning how to create and display WordPress custom fields.

Lastly, it’s important to note that WordPress custom fields and custom fields are not the same thing. A WordPress custom post type is a type of specially formatted content, like reviews or product pages. In many cases, people add WordPress custom fields to custom post types, but the two can also be used separately.

See also  What is cPanel? Pros and cons + how to use it

Having clarified these basic concepts, let’s get down to business. Next, we’ll help you create your own WordPress custom fields.

How to Add WordPress Custom Fields to Your Posts and Pages (2 Methods)

As with most WordPress features, you can add custom fields to your posts and pages manually or via a plugin. Let’s start with the latter, since it’s a bit easier.

1. Use a WordPress Custom Fields Plugin

There are many plugins that allow you to add custom fields to WordPress quickly. One of our favorites is called:

We like this plugin in particular for its ease of use. Additionally, it contains a large number of ready-to-use WordPress custom fields that you can add to your website in minutes.

To get started, you will need to install and activate the plugin. Go to control panel and tab Plugins > Add New. Once there, use the search bar to search for “Advanced Custom Fields”:

Click the button Install Now next to the plugin name. Wait until the text changes to Activateand then click on it once more.

When the plugin is running you will see a new tab of Custom Fields that will appear in your control panel. If you click there, you will find a list of WordPress custom field groups, which should be empty:

Let’s remedy that situation by clicking the button Add new at the top of the screen. Next, the plugin will help you set up a group, which can contain several WordPress custom fields:

First, click the button Add Field near the top of the screen. Next, choose a label for your new field, which will also act as its name. At this point, you’ll also want to choose what type of field you want to configure.

For this example, we are going to create a field of E-mail:

Next, you may want to write instructions so that other users of your site know what to do with your custom field. This step is not necessary, but it is a good practice:

You must also indicate if this is a required field or not. If it is, users will not be able to save posts or pages without first filling in that field:

There are others you can play with, but let’s move on. Close the editor and your new field will appear in the list of groups:

Next, you’ll need to configure when and where this group of custom fields will display. You can do it using the configuration of Location. There is an option called Show this group of fields ifwhich you can use to set display options.

See also  Code Igniter Tutorial

In this example, we set the custom field to appear on regular posts:

If you want, you can add more than one location to display your new WordPress custom fields, using the button Add Rule Group.

Here is one last configuration section that allows you to configure where the field will be displayed on the WordPress editor page. By default, it will appear just below the text editor, which we’ll show you in a moment. For now, remember to click the button Post to save your new custom field.

At this point, your field is ready. Open the WordPress editor for one of your posts, and it should appear at the bottom of the screen:

Note that you can use the Advanced Custom Fields plugin to create a field, but not to display it on your website. By default, the field will only display in your dashboard, and WordPress will store its value in the database.

If you want to display the metadata that you add with WordPress custom fields on the front end of your site, you will need to edit the theme files. Now let’s see how to do it.

2. Manually add WordPress custom fields and edit the theme to display them

Adding WordPress custom fields manually is easier than you think. The hard part is configuring your theme to display the metadata you add using these fields. For now, let’s see the process from the beginning.

To add a custom field to one of your pages or posts, you will need to open the WordPress editor. Once there, look for the tab display options at the top of the screen and click on it. Within it, you can choose which WordPress fields will be displayed by default:

You will notice that there is an option called custom fields; this is the one you should mark. After doing so, a box will appear. custom fields at the bottom of the screen, which looks like this:

Adding a new custom field is easy. You just need to create a name for the field, and then add a corresponding value in the field to the right:

After entering both values, press the button Add a custom field at the bottom of the box, this will save them and allow you to create more WordPress custom fields (if you wish).

As with the plugin method, the metadata you enter here will be saved along with your post. However, it still won’t appear when someone views your content on your published site. For this to happen, you need to tell your theme: “I want you to look for the custom field of the e-mail and display its content in this location.”

See also  Top 18 eCommerce Trends You Should Know About in 2022

You can achieve this by editing a feature called the WordPress ‘loop’. This loop tells WordPress what data it needs to collect and display when someone views content on your site. In most cases, that information includes the post or page title, its content, and any associated metadata.

It’s important to note that the loop code itself may vary depending on the page you’re working on and the theme you’re using. However, this is what the default WordPress loop looks like, written in PHP:

Here’s another example of the loop that’s a bit more custom, taken from the :

In both cases, this code tells WordPress to pull posts from the site archives and display their content on the page. However, the second example adds some topic-specific details, which is exactly what we’re going to do next.

To edit your theme’s loop, you’ll need to access your site’s files directly via File Transfer Protocol (FTP). We recommend if you don’t have an FTP client configured yet.

When you are done, go to the directory public_html/wp-content/themes. Inside, find the folder that corresponds to your active theme:

Open that folder and locate the file single.php. This file governs how your individual posts look and contains its own WordPress loop. To modify it, right-click on the file and select the option View/Editwhich will open it with your default text editor.

Next, look for the loop within that file, which you should be able to identify using the two examples shown above. When you find it, pay attention to where the code ends, which is marked by these lines:

What you need to do now is insert a few lines of code to collect your metadata. Here’s a quick example of how to do that:

You can contact this author at: ID, ’email’, true); ?>

In this case, we are including a short banner that will be displayed in the post just before an email address that is saved with the custom field. The result will be a text that looks like this:

You can contact this author at:…

Loading Facebook Comments ...
Loading Disqus Comments ...