• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Use Custom Fields In Gutenberg – Screenshots + Example

Bhagwad Park

Published on: January 14, 2019

Categories: WordPress 1

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:

Options in Gutenberg

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

Custom Fields in Gutenberg

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

Name Value Fields in Gutenberg

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:

Add Custom Fields Values in Gutenberg

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:

Custom HTML Inserted

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 Profile Picture
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!

Reader Interactions

Comments

  1. Laxmikant Bhumkar says

    October 22, 2020 at 1:22 am

    Nicely illustrated, step-by-step screenshot for custom field usage. Thanks, Bhagwad Park & NameHero for sharing this piece.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA