In the first post in this series, I covered what custom fields are and why they are important. I also gave an overview of the various ways to add them to WordPress posts. 

Today, I will cover the Custom Fields UI.

What Is the Custom Fields UI?

The custom field user interface is a way to add custom fields, or content to custom fields to a WordPress post from the post editor. 

By default the custom field user interface is not visible in the post editor. You can show it by clicking on the "Screen Options" tab in the top right corner of the screen and clicking the box next to "custom fields".

Using the Custom Field UI to Add Fields

Once enabled, you will see the custom fields meta box in the post editor somewhere under the main content. This interface has two fields, "name" and "value". One is to set the name of the field and the other is to set the field content.

Under the name selector is a button called "Add Custom Field". This button allows you to add a new field, which, in the future, will be added to the name selector.

The value field is where you enter the content for the field. I covered retrieving data from the custom fields in my series on working with WordPress meta data, which you can read for more information. When retrieving data from these custom fields with get_post_meta(), "name" corresponds to the $meta_key argument of get_post_meta(). So, for example, if you add a field called "fruit" and for the post with the ID 853, you set the value "strawberry" get_post_meta( 853, 'fruit', true ); would return "strawberry."

If you used this same code inside the loop, you could would want to set the ID of the post dynamically using get_the_id() like this:

<?php echo get_post_meta( get_the_id(), 'fruits', true ); ?>

Adding Arrays to Fields

You can only store strings in the fields created by the custom fields user interface. That does not mean that you can't store arrays of information. For simple arrays, you can store a comma separated list of values as a string and on output use implode() to turn it into a real array. 

If you have a comma separated list of items in your field, you can turn it into an array using implode(), like this:

<?php
//get meta value as string
$meta = get_post_meta( get_the_ID(), 'fruits' );

//remove spaces just in case
$meta = str_replace( ' ', '', $meta );

//split strings into array on commas
$meta = implode( ',', $meta );

implode() takes two parameters, the first tells us what to split the strings on, and the second is the from which to create an array string to create the array. By setting the first parameter to a comma, the string is split every time a comma appears into a new index in the array.

Do not overlook the line with str_replace(). This is used to remove any spaces that might have been entered into the field in the UI.

This method is great for simple arrays, but for more complex arrays you will need to serialize the array before adding it to the field. This is not something you can do manually using the custom field UI. Instead it must be done via PHP, which I will cover in the next next article in this series.

Is the Custom Fields UI Enough?

The Custom Fields UI is great because it's built into WordPress, no plugins required. That said, it is limited in what it can do. There are a handful of plugins that create an improved UI for custom fields, including all types of fields. 

You can also add and populate fields programmatically, which is the next topic in this series.