How To Use Custom Fields In Gutenberg – Screenshots + Example

One of the strengths of WordPress is its incredible flexibility. It’s always been so much more than just a “Content Management System”. WordPress is the perfect CMS for programmers and those who like to customize their website just right.

Custom fields are a great example of this. At first blush, it’s hard to see their value. But once you understand how they work, their utility is incredible. Using custom fields, you can probably do away with a whole bunch of plugins and easily create the solution yourself. For example, you can:

1. Insert code containing the Twitter or Facebook “Meta” tags
2. Specify different representative images for each post depending on the service
3. Store and retrieve semi-structured data for each post

Basically, custom fields allow you to store key/value pairs for each post and then retrieve them via PHP during run-time to perform all sorts of useful functions. Many popular plugins themselves use custom fields and would be crippled without them.

Enabling Custom Fields in Gutenberg

When Gutenberg came around, it messed everything up. The early implementations had no space for custom fields at all, since the “Screen Options” tab in the earlier classic editor had vanished. I had assumed that it was just a matter of time before custom fields were added.

To my horror, an earlier discussion on the matter seemed to suggest that custom fields would be removed entirely from Gutenberg! Here’s a quote from a member:

“My current thinking is that we should leave the Custom Fields disabled entirely by default, but then make it easy to re-enable with a WordPress.org plugin.

Because we don’t have a Screen Options API (#5841) the Custom Fields metabox would always be visible if we restore it in Gutenberg.”

Luckily, sanity prevailed and when Gutenberg finally made it into production with WordPress 5.0, custom fields were shipped alongside it. However, they’re not visible by default (just like in the original editor) and need to be specifically enabled. Here’s how.

First, click the three dots on the top left of the Gutenberg editor, and select “Options” as shown here:

In the following screen, enable the checkbox for “Custom Fields” like this:

The screen will refresh, and you’ll now see the familiar “custom fields” dialogue below the text editor:

You can make out from the color schemes, that this functionality doesn’t share the same thematic design as Gutenberg. The functionality has basically just been tacked on, without any of the Gutenberg design changes. But that’s fine! Custom fields are a strictly functional part of WordPress and don’t have to be beautiful or pretty!

Example: Specifying a Twitter Image

To show the power of custom fields, let’s take an example of specifying the Twitter image that shows on the card of a Twitter post when a URL is shared. In the screenshot below, I’m creating a custom field with “twitter_image” as the key, and the URL of the image as the value as shown here:

Now I add the following code to functions.php:

function insert_twitter_info() {

    if(get_post_meta(get_the_ID(), 'twitter_image', true) && is_single()) {
        $output = '<meta name="twitter:image" content="'. get_post_meta(get_the_ID(), 'twitter_image', true) .'"/>';
    }

    echo $output;
}
add_action('wp_head','insert_twitter_info');

Here, the function ” get_post_meta(get_the_ID(), ‘twitter_image’, true)” retrieves the value for the Twitter image URL and creates the “meta” HTML that Twitter will pick up to display the image. Like this, you can create separate values for Facebook images, Pinterest, or any other URL sharing service.

After saving the above code, the Twitter image HTML is added to the page as seen here:

This is just a simple example of using custom fields. There are a LOT more uses for it, and the utility is only limited by your imagination!

Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!