How to Use Custom Fields in WordPress?

Are you a theme designer or developer looking out to extend the power of your WordPress site? The custom field is a feature in WordPress built for use by different themes or plugins to store post related additional information. A good description of custom fields is the SEO metadata that comes in handy as input fields for your post writing. So, due to this ability of WordPress, you can add custom fields or metadata which are extra/bits of arbitrary information for any post. Nevertheless, it is possible to achieve more complex actions with custom fields, like setting an expiration date for your post, but this requires coding knowledge. Let then delve into details on what custom fields are, how to create and use custom fields in WordPress with a simple example.

What are Custom Fields in WordPress?

Custom fields are the features in WordPress that enable you to add additional information while writing a post, and they are also known as post metadata. Since WordPress stores this information as metadata, you can display them using template tags of your WordPress site theme. Examples of these custom fields range from adding a rating to the product you are reviewing, a piece of music to the written post, and so much more that’s available or you can think of including.

• By default, the custom fields aren’t available (i.e., they are hidden) on display in your site post editor screen.
• Making it visible in Classic editor requires activating the custom field box in the “Screen Options” button of your WordPress site post/page admin dashboard. Similarly, you can enable it from “Preferences” section in Gutenberg editor.

Format of Custom Fields

So, the metadata of the custom fields constitutes the pairing with “Names or Keys” and “Values”, where Key is the name of the metadata element and Value is the unique information that would form the description to be associated with an individual post.

The “Keys” differ from “Values” about custom fields, and this lies in the fact that a Key can serve for use more than once in a post but, its values are different. For instance, want to express that one is watching comic and horror (two separate) movies? Create “currently watching” as a Key and use it twice on the same post with its values as “Horror” and other “Comic”, which is an ideal way to represent custom fields in your WordPress site.

Use Custom Fields in WordPress

To create or use a custom field calls for defining it. We would add a WordPress custom field named “currently reading” in site post and display at the bottom of the content. So, once you create this key, you can assign a value for every post. Here are the steps to take in achieving this using the following illustrations.

Enabling Custom Fields in Editor

Login to your WordPress site dashboard and open the post or page you need to add the custom fields. As shown in your edit screen, the custom field option is not visible by default (that is, if not activated before).

• Using the Gutenberg block editor, locate and click on the three dots at the top-right sidebar.
• Tap the “Preferences” option, select the “Panel” section.
• Under the “Additional” category, check the box beside “Custom fields” to activate it.

• You would be required to click on the “Enable & Reload” button afterwards to effect the changes.
• On completion of page road, the “Custom Fields” menus appear below your screen post/page.
• If you are using the old Classic editor, click on the “Screen Options” button on top right corner of the editor and check the box beside the “custom fields” to activate it.

• Additionally, you can follow a more technical pathway to show any hidden custom field using the functions.php file. Head over to select the “functions.php” file by clicking the “Theme Editor” tab under “Appearance” menu in your WordPress site dashboard, and paste the following codes:

add_action( 'admin_head', 'showhiddencustomfields' );
function showhiddencustomfields() {
    echo "<style type='text/css'>#postcustom .hidden { display: table-row; }</style>
";
}

• It should look like below in the editor:

• Then, click “Update File” to save changes.
• Remember that this code trick is specific to a particular theme, so when a theme update, upgrade or change occurs, this would require repeating the above steps to retain your site functionality. Well, you can save these codes as a PHP file and upload them as a plugin, install and activate so you won’t bother about frequent updates. Alternatively, you can use plugins like Code Snippet to manage new functions in organized manner.

Adding Custom Fields to Posts

After enabling custom fields meta box, scroll down to the “Custom Fields” area below your written post or page content. Then enter our chosen field “currently reading” as the Name/Key with “how to use custom fields in WordPress” as the Value of what you are reading, and all should be without the quotes. Finally, click on the “Add Custom Field” button.

After adding a field, you can edit or delete the entry anytime and publish the updated post. In addition, you can select any previously added custom field from the dropdown and assign a new value to it.

After creating custom field, click “Publish” button and make your post live.

Display Custom Fields in WordPress

Now that the custom field is simply sitting in the backend, and you must use a piece of code to showcase it on the frontend. You would have to edit your WordPress theme file to display custom fields. Going with the single post requires editing the “single.php” or “content-single.php” file but first, locate these lines of code in the file:

while ( have_posts() ) : the_post();
.
.
endwhile; // end of the loop.

You would add code for your custom fields below that code block.

echo get_post_meta($post->ID, 'key', true);

Remember to change the ‘key’ to that you used in the post as here our key name in the illustration above is “currently reading”. You can also add any prefix to show like “You are currently reading: and the code should look like below:

echo '<p>You are currently reading:</p>', get_post_meta($post->ID, 'currently reading', true);

Lastly, save changes by clicking “Update File” and view the post where the custom fields were included to see the result.

You can use CSS to adjust the position and align the display of your custom fields in site’s layout.

Using Advanced Custom Fields Plugin

Though manual way of creating custom field is easier, it is a difficult task for normal users to write code and display them in useful manner. To avoid the hassle, you can use plugins like Advanced Custom Fields and manage the followings:

• Use over 30 field types to quickly create your custom fields.
• Create field groups and define location rules.  
• Add custom fields in taxonomy, media, comments, and in any other place of your site.
• Use in-built functions to show the fields where you want.
• Use the extensions to enhance the plugin’s function

Practical Example of Using Custom Fields in WordPress

There are plenty of practical examples we can show you on how to use custom fields in WordPress editor. Yoast SEO is one of the best examples which adds custom data for SEO purpose. The other example includes WP Review, WP Rocket and WP Coupons. In addition, almost all commercial themes heavily rely on custom fields. For example, the lightweight themes like GeneratePress and Astra offer custom boxes to adjust the layout for specific posts.

Points to Remember When Using Custom Fields

As you can see creating and using custom fields in WordPress is an easy task without being an expert in coding. SEO, reviews, coupon and many other types of plugins use these custom fields to add additional post meta information However, it comes with certain cost and you should be aware of that fact.

• WordPress stores all these custom fields in wp_postmeta table. Though post’s content itself is stored in different wp_post table, wp_postmeta is one of the largest tables in any standard WordPress installation due to large number of meta data fields.
• Though you can delete custom fields from the post editor meta box, it will not delete the original field. It will only delete the instance used on that post and you can see the same field is available in the same or another post. Therefore, completely deleting a custom field is a daunting task that you need to probably use SQL query in phpMyAdmin or similar tool to edit your database directly.
• Any unused custom fields will be always available in postmeta table occupying database storage. Let us take an example that you have a review plugin that uses 10 custom fields with pre-filled values from plugin’s global settings page. It may look good since you can use the default values and edit them only when needed. With this idea, you have created 20 review posts on your site with default meta fields and have another 80 posts that don’t have any review. When you check in postmeta table, you will be surprised that all 100 posts will be having 10 custom field entries with the pre-filled values. This means there will be 800 redundant entries (80 * 10) without any use.

• The problem will become worser when you deactivate the plugin and want to use another review plugin. Now there will be 1000 (100 * 10) redundant entries in the table without use. The table will grow with tens of thousands of entries when you have multiple plugins with lots of custom fields like Yoast SEO, WP Review, WP Coupons, etc.)
• Too many meta boxes also will slow down your post editor, this is from the backend perspective.

With these above warning, make sure to use the custom fields in wise manner and only when needed. Do not create or use a field that is needed only for few posts. Instead, you can create custom post type for that purpose that you can convert to regular post anytime later.

Final Thoughts

There is still so much more to talk about via custom fields as it becomes more technical while advancing on it. But with this pretty simple guide, you are in for a good start with the basics of using custom fields in your WordPress site.