How to Create and Use WordPress Custom Fields

One of the main advantages of WordPress is its versatility, which is possible thanks to its built-in extensibility features. Among the different extension formulas it offers we find custom fields:

WordPress has the ability to allow post authors to assign custom fields to a post. This arbitrary extra information is known as metadata.

Metadata is handled with key/value pairs. The key is the name of the metadata element. The value is the information that will appear in the metadata list on each individual post that the information is associated with.

WordPress.org Documentation

For example, if we want to create metadata about concepts related to the motor world, we would have things like:

• Brand: Ford
• Model: Focus
• Color: white
• Power: 110hp
• etc

In today’s post I will show you how to create custom fields, how to use them, and how they might help you as a WordPress user and/or developer. Please notice that you’ll need to have some basic understanding of how to code in WordPress… but I hope you’ll be able to follow the post easily, especially when I show you how to use an amazing plugin for working with custom fields: Advanced Custom Fields.

How WordPress Custom Fields Work

The best way to understand what custom fields are and how they work is by taking a look at the WordPress database. As you may already know, every time you create a post, page, or (almost) any other type of content in WordPress, this new content is stored in a table called wp_posts (the prefix can change).

Tables in a database are just like any other table you have previously worked with. Basically, they have a set of columns that define “what you can store” and rows with the specific information. In the case of wp_posts, the columns are things like title, content, author, publication date, and so on. Nothing fancy, to be honest:

One of the “problems” of using tables is that the information you can store in them is limited to the columns they have. If you want to store information about a new concept, you won’t be able to. So, how can you create custom fields, if the table is already set? Well, simple enough, you just need a new table designed for it.

In every WordPress database there is another table called wp_postmeta like the following:

As you can see in the previous screenshot, the metadata table is designed in such a way that we can create key/value pairs using the meta_key and meta_value columns and associate each pair with a specific content using the post_id column. Easy enough!

So let’s take a closer look at how we can work with this table!

How to Create a New Custom Field

As we have already seen, custom fields are always associated with a specific post. Therefore, you would expect some sort of user interface in the editor for, well, editing them, right? Unfortunately, if you take a look at Gutenberg, there isn’t any…

In order to edit custom fields in the WordPress editor, you have to enable an advanced panel. Just click the upper right icon in the editor and then click on Options:

This will open a new window with the different panels that are available in Gutenberg. Find one named Custom Fields and enable it:

Once enabled, you can easily create and edit your post’s custom fields:

This simple interface allows us to create as many key/value pairs as we want. In the screenshot above, for example, you see how I have added some of the fields I introduce at the beginning of this post: nelio_brand, nelio_model, nelio_color, and nelio_hp.

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

How to Use a Custom Field

To use a custom field you need three things: (a) the identifier of a post, (b) the name of the field you want to use, and (c) deciding where you want to use it. For instance, suppose I want to display the nelio_brand field that we created in the example above at the end of a post. To retrieve its value, there’s a function named get_post_meta that we can use as follows:

function nelio_add_brand_field( $content ) {
  $brand = get_post_meta( get_the_ID(), 'nelio_brand', true );
  return "{$content}\n<p><strong>Brand:<strong> {$brand}</p>";
}
add_filter( 'the_content', 'nelio_add_brand_field' );

Notice that in the previous example we address the three things I mentioned before:

• The first parameter of get_post_meta is precisely the identifier of the post I’m interested in. In this case, we use get_the_ID(), which returns the current post’s ID.
• The second parameter is the name of our meta field (in this case, nelio_brand).
• Finally, we’re using the meta field in the front-end, as something we want to show at the very end of the post’s content. And you can tell because I’m retrieving and using it during the the_content filter.

The result of doing this is something similar to what you can see in the following screenshot:

But this is only an example, of course! You can use custom fields in many ways other than “printing something in the front-end.” For instance, Nelio A/B Testing is one of the plugins we’ve created and it’s designed to run split tests in a WordPress site. An A/B Test requires alternative content to be created, and our plugin uses custom fields to label alternative content as such and limits how and when this content is accessible by a visitor.

WordPress Functions to Manage Custom Fields

In the same way that we have a method to retrieve the value of a custom field (get_post_meta), WordPress has additional methods to programmatically create, update, and delete custom fields: add_post_meta, update_post_meta, and delete_post_meta. These functions work as you’d expect, so I won’t bother you with more explanations…

What is and how to use Advanced Custom Fields

Now that you know how custom fields work in WordPress, I think I can already give you the good news: there are several plugins that greatly simplify the process of working with custom fields!

One of the best-known and best-rated plugins to create metadata in a WordPress site is Advanced Custom Fields. With it, you will not only be able to define custom fields in a simpler way, but you will also have the possibility of enjoying an improved user interface for dealing with these fields. This interface makes sure that the values you set make sense and are semantically meaningful: dates, images, galleries, ranges, numbers… you name it!

If you want to learn more about ACF, there’s plenty of resources out there. But I think this talk by Jo Minney can really get you started:

Hopefully this little introduction to custom fields will help you on your way to becoming a better WordPress developer!

Featured image by Polina Rytova on Unsplash.