August 18, 2018
8 min Read
August 18, 2018
8 min Read
Each WordPress page and post you create carries its own metadata, which includes key details such as its title and description. The platform uses specific fields to add this data automatically. However, you can add your own metadata as well, by setting up WordPress custom fields.
There are two primary ways of doing this, and in this article, we’ll walk you through both options. You can:
By the time we’re done, you’ll know everything you need to create and showcase new custom fields on your WordPress website. Let’s get to work!
First, let’s talk about fields in more general terms. A field is an element on a web page or in an application where you can enter information, like this simple box:
Fields come in many shapes and sizes. For example, they can include list boxes and check boxes. You’ll also come across date pickers and even fields that will only accept specific types of text input, such as numbers.
In any case, the information you add using these fields can fulfil many purposes. Most often, however, your inputs are used as ‘metadata’. That’s a fancy word for data that refers to other data (pardon the redundancy).
For example, a WordPress post has a title that describes its content, which is technically a type of metadata:
Other kinds of metadata include post tags, meta descriptions, page categories, and more. One thing all these snippets of information have in common, however, is that WordPress (or certain plugins) provide you with fields you can use to add them to your content.
However, in some cases, you’ll want to add metadata that WordPress doesn’t support out of the box. That’s where WordPress custom fields come in, by giving you a way to enter that data and associate it with your content.
With the right tools and know-how, you can create almost any type of WordPress custom fields you want. One of our favorite examples is adding a star rating system to your posts:
Once you set up a custom field for star ratings, you can score your own posts or even ask your visitors to leave their feedback (although that’s a bit more advanced to implement). This just goes to show what you can accomplish by learning how to create and display WordPress custom fields.
Finally, it’s important to note that WordPress custom fields and custom post types aren’t the same. A WordPress custom post type is a specially-formatted kind of content, such as review posts or product pages. In many cases, people add WordPress custom fields to their custom post types, but the two can also be used in isolation.
With these basics out of the way, let’s get down to business. Next up, we’ll help you create your own WordPress custom fields.
As with most WordPress features, you can add custom fields to your posts and pages either manually or by using a dedicated plugin. Let’s start with the latter approach since it’s a bit more straightforward.
There are a lot of plugins that enable you to add custom fields to WordPress quickly. One of our favorites is called Advanced Custom Fields:
We like this plugin in particular because it’s easy to use. Plus, it packs a lot of WordPress custom fields that are ready to go, which you can add in minutes to your website.
To get started, you’ll need to install and activate the plugin. So go to your dashboard and into the Plugins > Add New tab. Once you’re there, use the search bar to look for “Advanced Custom Fields”:
Go ahead and click on the Install Now button next to the plugin’s name. Wait until the text changes to Activate, then click on it once more.
Once the plugin is up and running, and you’ll see a new Custom Fields tab appear in your dashboard. If you click on it, you’ll find a list of WordPress custom field groups, which should be empty:
Let’s remedy that situation, by clicking on the Add New button at the top of the screen. Next, the plugin will help you set up a group, which can contain multiple WordPress custom fields:
First, click on the Add Field button near the top of the screen. Then pick 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 set up.
For this example, we’re going to create an Email field:
Next, you might want to write a set of instructions, so other users on your site know what to do with your custom field. This step isn’t necessary, but it’s a good practice:
Moving on, you’ll also need to indicate whether this is a required field or not. If it is, users won’t be able to save posts or pages without adding it:
There are a few other advanced settings you can tinker with, but let’s move on for now. Close the editor, and your new field will appear in the group list:
Then, you’ll need to configure when and where this custom fields group will show up. You can do that using the Location settings. There’s an option labelled Show this field group if, which you can use to configure display options.
In this example, we configured the custom field to show up on regular posts:
If you want, you can add more than one location to display your new WordPress custom fields, using the Add rule group button.
There’s one last settings section here, which enables you to configure where the field will show up on the WordPress editor page. By default, it will show up right under the text editor, which we’ll show you in a minute. For now, remember to hit the Publish button to save your new custom field.
At this point, your field is ready to go. Open the WordPress editor for one of your posts, and it should appear at the bottom of the screen:
Keep in mind 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 show up in your dashboard, and WordPress will store its value in the database.
If you want to display the metadata you add using WordPress custom fields on the front end of your site, you’ll need to edit your theme files. Let’s walk through how to do that.
Adding WordPress custom fields manually is simpler than you might imagine. The tricky part is configuring your theme to display the metadata you add using these fields. For now, however, let’s take it from the top.
To add a custom field to one of your pages or posts, you’ll need to open the WordPress editor. Once you’re in, look for the Screen Options tab at the top of the screen, and click on it. Inside, you can choose which fields WordPress will display by default:
You’ll notice that there’s an option called Custom Fields, which you’ll want to select. Once you do, a Custom Fields box will show up at the bottom of the screen, looking like this:
Adding a new custom field is simple. You just need to click on the Enter new link and create a name for the field. Then, add a corresponding value in the field to the right:
After entering both values, hit the Add Custom Field button at the bottom of the box, which will save them and enable you to create further WordPress custom fields (if you want).
Just as with the plugin approach, the metadata you enter here will be saved alongside your post. However, it won’t show up yet when someone checks your content out on the public end of your site. To make that happen, you need to tell your theme: “Hey, I want you to pull up the email custom field and display its contents in this location”.
You can achieve that by editing a function called the WordPress ‘loop’. This loop tells WordPress what data it needs to pull up and display when someone views a piece of content on your site. In most cases, that information includes the post or page’s title, its content, and any associated metadata.
It’s important to note that the loop code itself can vary, depending on what page you’re working on and which theme you’re using. Here’s what the default WordPress loop looks like, however, written in PHP:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php endwhile; else: ?> <?php endif; ?>
Here’s another example of the loop that’s a little more customized, taken from the Divi theme:
<?php if ( et_builder_is_product_tour_enabled() ): while ( have_posts() ): the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-content"> <?php the_content(); ?> </div> <!-- .entry-content --> </article> <!-- .et_pb_post --> <?php endwhile; else: ?>
In both cases, this code tells WordPress to pull posts from the site’s archives and display their contents on the page. The second example adds a few theme-specific details, though, 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 using File Transfer Protocol (FTP). We recommend FileZilla if you don’t have an FTP client set up already.
Once you’re connected via FTP, navigate to the public_html/wp-content/themes directory. Inside, look for the folder that corresponds to your active theme:
Open that folder, and locate the single.php file. This file governs what your individual posts look like, and it contains its own WordPress loop. To modify it, right-click on the file and select the View/Edit option, which will open it using your default text editor.
Next, look for the loop within that file, which you should be able to identify using the two examples we showed you earlier. Once you find it, pay attention to where the code ends, which is marked by these lines:
<?php endwhile; else: ?> <?php endif; ?>
What you need to do now is insert a few lines of code to call up your metadata. Here’s a quick example of how to do that:
<div class="author-email"> <p>You can get in touch with this author at: <?php echo get_post_meta($post->ID, 'email', true); ?> </p> </div>
In this case, we’re including a short blurb that the post will display, right before an email address that’s saved using the custom field. The result will be a string of text that looks like this:
You can get in touch with this author at: email@example.com
If you were using the Divi theme, here’s what your updated loop might look like:
<?php if ( et_builder_is_product_tour_enabled() ): while ( have_posts() ): the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <div class="entry-content"> <?php the_content(); ?> </div> <!-- .entry-content --> </article> <!-- .et_pb_post --> <div class="author-email"> <p>You can get in touch with this author at: <?php echo get_post_meta($post->ID, 'email', true); ?> </p> </div> <?php endwhile; else: ?> <?php endif; ?>
That’s just about all there is to it. Now you can save the changes to your single.php file, and re-upload it via FTP.
Keep in mind that this a very simple example of what you can accomplish using WordPress custom fields and the loop. For more advanced custom fields, you will probably need to learn some PHP basics, or at least feel comfortable tweaking your theme files until you get everything just right.
With that in mind, we recommend that you use a child theme to display your custom fields whenever possible. This will enable you to experiment freely, without worrying about harming your theme in the process.
WordPress custom fields enable you to add all kinds of metadata to your posts and pages. For example, you could add a custom field that displays a rating for each post, check boxes, or even maps. There’s very little you can’t do with WordPress custom fields, and adding them is relatively easy. You can either use a plugin, such as Advanced Custom Fields, or create them manually and tweak your theme files to display the new information.
Do you have any questions about how to use custom fields in WordPress? Let’s talk about them in the comments section below!