What Are WordPress Custom Fields and How to Use Them

If you are relatively new to WordPress, it is less likely that you have heard of or used WordPress custom fields, as it is one of the more advanced WordPress features. But, even so, it remains one of the best ways of customizing a WordPress website, as it allows you to assign and display additional information on your pages and posts. For this reason, we decided to create this article to shine more light on the topic which can benefit most WordPress users. In this article, we will explain what WordPress custom fields are and give possible ways of using them through three coding examples we created specifically for this article. Let us begin.

Understanding WordPress Custom Fields

Custom fields are an important aspect of WordPress as they allow WordPress users to add additional details regarding their content. Technically speaking, this is referred to as metadata, meaning data which reveals more information regarding other data. This could be related to the author, estimated time of reading, weather, post ratings, product attributes, tour dates and prices, listing specifications and so much more.

Of course, custom fields aren’t the only way of adding metadata. Most other ways are fairly known to all WordPress users since WordPress has default meta boxes for data like tags, categories, featured images, excerpts, etc. However, unlike these meta boxes, the Custom Fields section, which is the default WordPress section for adding custom metadata, isn’t visible to all WordPress users from the start. Since this section requires quite a bit of coding and overall WordPress knowledge to be used properly, WordPress developers decided to make it hidden by default, so that it wouldn’t confuse new WordPress users. However, it can still be enabled and shown on pages and posts, next to the remaining meta boxes we mentioned. For those that weren’t aware, it looks as shown on the screenshot below.

Later in the article, we will cover more about the reasons why it should be hidden and what to do to reveal and use it. Additionally, it is worth mentioning that apart from the default Custom Fields section, there are other means of using custom fields to add specific metadata. Some plugins or themes might create custom meta boxes to add specific options. Then, WordPress users can add corresponding metadata using those options in a far more beginner-friendly manner.

For example, this is the case for all Qode Interactive themes, which have an elaborate option framework in place for this purpose. On the other hand, if you aren’t using a theme with such a set of options, you can also use specific WordPress custom fields plugins that make the process of adding metadata slightly less coding intensive.

What You Need to Know Beforehand

Having made a brief overview of what custom fields are, let us go more in-depth by explaining how they are used. We will thoroughly go over all the required steps below. But, as indicated in the article title, we will focus on the default WordPress Custom Fields section. This article is, therefore, more suited for intermediate and advanced WordPress users, as it goes over the coding and all technical steps of using the WordPress Custom Fields section. Apart from that, there are two additional things we must mention before delving into the how-tos of this article.

Firstly, in the case you have opted to use a plugin like Advanced Custom Fields for this purpose instead of the default WordPress Custom Fields section, we advise reading our article on how to add custom meta boxes in WordPress. Needless to say, this approach is more suited for less experienced WordPress users, as it requires far less coding experience, which is why we have covered it in a separate article.

On the other hand, you can also add custom meta boxes using custom code. Using this method, plugin and theme developers can add custom option sections and related options. However, implementing this method is even more complicated than the code snippets mentioned in this article, which is why it is mostly done by developers. Nevertheless, we have also covered this approach in one of our other articles.

More precisely, in the article on adding WordPress subtitles, we have added a new meta box called Custom Options with the single option for adding subtitles. While simple in nature, this article proves a valuable insight into all the coding that goes “behind the scenes” of a singular custom field. For that reason, all advanced WordPress users are welcome to read it after fully reviewing the current article, so that they can further deepen the knowledge they have gained.

Having said that, let us go over all the steps required to use the WordPress Custom Fields section starting from enabling the section.

Enabling WordPress Custom Fields

To use the WordPress Custom Fields section properly, we must first ensure that it is enabled for our page, blog post, or custom post. Luckily, this is not an issue for pages and blog posts, where this section is enabled by default. Unfortunately, this is not the case for custom post types, which we will cover later in this section.

But, even after the section has been enabled, it can still be hidden. Therefore, you also need to make sure that the section is also visible by checking the corresponding option. We will show this is done for two editor screens: the Gutenberg and Classic Editor.

If you are using the Gutenberg editor screen, click on the three dots link in the top-right corner of your screen. You can do so both while editing a page or post.

After opening the Options menu, locate and click the “Preferences” option.

The Preferences section will be opened in a popup window that contains four tabs: General, Appearance, Blocks, and Panels. To access the Custom fields option, click on the Panels tab.

Then, locate the “Custom fields” option in the Additional subsection. To show the Custom Fields section, toggle the related radio button.

Then, you will see an additional “Enable and Reload” button below. However, we must warn that, if you have any unsaved edits on the current page, clicking this button is not advised, as you will lose your editing work. Instead, you should exit the Preferences popup window and click the “Update” button to update the page or post. Then, proceed as described above. Afterward, having toggled the Custom fields, click the “Enable & Reload” button to reload the page and save the preference choice.

After the page has been reloaded, you will be able to see the Custom Fields section below the content of your page or post.

If you are using the Classic Editor plugin to edit your pages and posts using the old TinyMCE editor, you can ensure that the Custom fields section is shown from the Screen Options section. You only need to locate the Screen Options link in the top-right corner of the screen while editing a given page or post. Then, click on it to expand the section.

After doing so, the Custom Fields section will appear below the post content, this time without reloading the page.

As mentioned before, we still have to clarify what it takes to enable the WordPress Custom Fields section on custom post types. The reason why we have purposefully placed it at the end of this section is that there could be many reasons for the Custom Fields section being disabled or hidden for any given custom post type. Thus, it is best covered separately, where we can describe all the steps you should perform or consider. That said, let us continue.

First of all, if you have added a custom post type on your own by using the register_post_type() function, then, you need to make sure to add “custom-fields” as one of the attributes of the supports parameter. Since adding custom post types is an advanced topic which we have already thoroughly covered in a separate article, we advise reading it at this point for more info.

On the other hand, if your custom post type is enabled by a third party plugin, then you need to make sure that the “custom-fields” attribute is enabled there. If you have added that custom post type using a plugin like CPT UI, this can be changed within the plugin options, while in other cases it might require some coding solutions which involve the add_post_type_support() function.

Of course, in these cases, we advise consulting with the authors of the plugin which added the corresponding custom post type for more info. They will be able to consult you regarding the code needed and the steps to implement it.

Still, adding the “custom-fields” attribute doesn’t mean that the Custom Fields section will appear, as it could be hidden. Meaning, you are expected to display the section in the manner mentioned above. Additionally, some WordPress plugins might decide to hide the WordPress Custom Fields section and display a corresponding custom section instead. If this is the case, you should make sure that you have correctly pinpointed the WordPress plugin which hides the WordPress Custom Fields section by performing the basic troubleshooting steps. Then, you should consult the authors of that plugin on how to show the default Custom Fields section once more.

As an example, we will mention that this is the case with the Advanced Custom Fields plugin, which hides the default Custom Fields section and shows only their custom fields sections and options. However, to display the Custom Fields section, you only need to implement a single code line fix. As we have already covered this in our article on fixing the issue of Custom Fields not showing, we advise consulting that article to learn more.

Adding a WordPress Custom Field

After making sure that the Custom Fields section is properly enabled for all your pages and posts, you will need to add a new WordPress custom field to it, alongside a corresponding value. This needs to be done for each page or post separately, by following the instructions given below.

First, click to edit a page or post for which the Custom Fields section was previously enabled. Then, locate the Custom Fields section, which will consist of two parts – the list of previously added custom fields with their corresponding values and the Add New Custom Field subsection for adding new ones. Of course, we will focus on the latter.

To add a new custom field, click on the “Enter new” link in the Add New Custom Field subsection.

Then, insert the name and the value of the custom field in the corresponding input fields and click the “Add Custom Field” button below.

Afterward, to make sure that the additional custom field has been saved properly, click the “Update” button in the top right corner of your page or post.

As said before, this has to be done for each page or post to which you wish to add a custom field. Luckily, after adding a custom field with a given name, it will be stored in the database and its name will be available in the “-Select-” dropdown field. Therefore, every subsequent time you wish to add that custom field on a different page or post, you will be able to select its name and, then, insert the corresponding value, making this process slightly easier.

Displaying a WordPress Custom Field

While adding a WordPress custom field is quite easy, displaying one on the website requires a considerable amount of coding and overall WordPress knowledge. The first step in this process involves using the get_post_meta() function to retrieve the value you inserted to the previously created custom field and store it in a variable. This function accepts three parameters – the ID of the page or post where the custom field is added, the name of the custom field, i.e. its key, and whether you wish to return the value of the custom field as a single string. Technically speaking, this function can be used both within or outside the WordPress Loop, assuming that you know a way of determining the ID of the current post, which is the only required parameter.

Example:

$variable = get_post_meta( $post_id, 'key_name_here', true );

The following step involves displaying the stored custom field value using the variable in which it is stored. Using the simple echo function to output the string value is often sufficient. Additionally, adding a conditional statement that checks if the value has been inserted before displaying it is advised. You should also use some of the functions for WordPress sanitization (e.g. esc_html, esc_attr, esc_url, …) when doing so.

Example:

if ( ! empty( $variable ) ) {
echo esc_html( $variable );
}

That said, the final and most important steps remain where and how such a code should be added. While most older articles on custom fields would recommend inserting the code directly in some of the template files of your current theme, we would argue for a more modernized approach. This involves writing custom functions and hooking them onto suitable WordPress hooks. Since this is quite an advanced WordPress topic, let us make a quick overview of the subject before going into the coding examples.

Simply put, WordPress hooks are a piece of placeholder code, allowing other WordPress users to add new functionalities to their WordPress website or to change existing ones. In doing so, we distinguish two types of WordPress hooks – action hooks and filter hooks. Action hooks are used for adding new features and functionalities, while filter hooks are used for changing existing ones.

To use a WordPress hook, you will need to create a custom function referred to as a callback function or callback “hooked onto” this placeholder code. That way, it is the callback that defines a custom functionality, while the “hooking onto” aspect is what ensures that the functionality is enabled.

Moreover, the hooked function will be executed at the exact place where the hook was placed. But, this way you don’t need to change any template files, which was a common way of adding customization to your WordPress website in the past. Thankfully, using WordPress hooks, this is no longer the case, meaning you no longer have to worry that your modifications will get overridden after a corresponding WordPress, theme, or plugin update. Furthermore, you can safely store all your modifications in a singular place, be it the functions.php of your child theme or a site-specific plugin, which are the two suggested places for storing coding customizations.

That said, the “hooking onto” part requires one line of code – the use of the add_action() function for action hooks and add_filter() for filter hooks. Both of these functions accept four arguments. These are the following: the name of the hook you want to “hook onto”, the name of the callback function, the priority of the callback function that factors in the order that it is executed, and the number of arguments that the callback function accepts.

The default priority is set to 10, while the default number of arguments of the callback function is set to 1. In most cases, only the first two arguments would be used, while the default values for the other two are used implicitly. Of the first two arguments, the hook name is the more important one, as it determines the placement of the code.

Additionally, we must mention the slight differences between callback functions hooked onto action and filter hooks, i.e. action and filter functions. Simply put, the action functions don’t need to have any arguments nor do they need to return any output, while filter functions must do both. More precisely, they need to have at least one argument and must return one of the input variables, whether it is modified or not. With all that in mind, the most common types of code that you will write when using WordPress hooks would look similar to the two pseudo-code examples given below.

function action_function_name() { 
// Some code goes here
}
add_action( 'suitable-action-hook-here', 'action_function_name' );

function filter_function_name( some variables go here ) { 
// Some code goes here
return some variable;
}
add_filter( 'suitable-filter-hook-goes-here', 'filter_function_name');

Sadly, as seen by the suitable-hook-goes-here placeholders above, it is the choice of which hook to use that makes this method of adding customization so challenging since it is done on a case-by-case basis. Meaning that there could be many suitable hooks as a part of the WordPress core files or placed within the template files of your theme and plugins, depending on the customization that you wish to add. But, knowing them requires in-depth knowledge of WordPress code, as well as of the code behind your themes and plugins. Therefore, for those that are less familiar with default WordPress hooks, we strongly suggest consulting with your theme or plugin authors to find the most suitable hook that will help you implement the customization you had in mind.

Coding Examples

Having made a general overview of the WordPress Custom Fields section, let us delve into the coding examples, which will expand on the points we made previously. For this article, we have made three coding snippets. Apart from showing an effective way of using WordPress custom fields, each of the snippets also provides some unique coding tips to help you with website customization overall.

Having said that, let us begin.

For our first example, we have decided to show how you can add a customized quote just before the content of your blog posts. Even though this is rather simple, the example is used to showcase some very key coding points.

First of all, both the quoted text and its author are stored into corresponding variables thanks to the previously mentioned get_post_meta() function. The same variables, alongside the HTML code, are shown only if the values for the quoted text and author have been inserted. This avoids the issue of any leftover HTML code on your page in case you don’t want to display the quote and makes the code a bit cleaner overall. All these points are also present in our remaining coding examples.

Secondly, the code showcases the the_content filter hook, as one of the more frequently used default WordPress hooks. Using this filter hook, you can directly affect the content added using the editor section. Meaning, you add customized content before and/or after the content inserted in the editor. Let us explain the example whose code is given below.

function qode_display_custom_field_quote( $content ) {
if ( is_singular( 'post' ) ) {
$quote_text = get_post_meta( get_the_ID(), 'qode_quote_text', true );
$quote_author = get_post_meta( get_the_ID(), 'qode_quote_author', true );
$html = '';
if ( ! empty( $quote_text ) ) {
$html .= '<div class="qodef-e-quote"><h4 class="qodef-e-quote-text">' . esc_html( $quote_text ) . '</h4>';
if ( ! empty( $quote_author ) ) {
$html .= '<span class="qodef-e-quote-author">' . esc_html( $quote_author ) . '</span>';
}
$html .= '</div>';
}
$content = $html . $content;
}
return $content;
}
add_filter( 'the_content', 'qode_display_custom_field_quote' );

The code represents a custom function called qode_display_custom_field_quote() hooked onto the the_content filter hook. The main part of the function is placed within the is_singular() conditional tag with a ‘post’ parameter, meaning that our code will only apply to blog posts.

As for the inner part of the code, we have stored the values of two custom fields called qode_quote_text and qode_quote_author into two variables – $quote_text and $quote_author, respectively, using the get_post_meta() function. Then, using an if statement, we have made it so that the quote section is displayed only if the quote was inserted in the custom field we previously mentioned.

Additionally, we have specified the HTML structure that the quote section will have, added CSS classes that can be used for stylization later on, and sanitized the quote using the esc_html() function. The same was done with the quote author, which is shown below the quote only if it was inserted in the corresponding custom field.

Finally, both these sections are stored as strings within the $html variable, which is then appended to the $content variable, at its beginning. Meaning, using the code snippet shown above you will be able to add a quote to any blog post you wish, directly before its content.

With that being said, there are two additional things you must do to ensure that the quote is displayed properly on any blog post. Firstly, you must insert the two custom fields we used in the code – qode_quote_text and qode_quote_author, with their values. You will have to do so one at a time in the manner discussed in a previous section. Then, make sure to click the “Update” button to save both the custom fields and their respective values.

This will ensure that the quote section is displayed on the given post where you added two custom fields and their values. However, to ensure that their look matches the overall design of the website, you will need to write some CSS code to adjust its stylization. Unfortunately, this kind of code is done on a case-by-case basis, so we can’t suggest any that would be applicable for all websites. Instead, we will only include the one that we created for our article, but repeat that it should only be used as a starting point in creating a suitable CSS code for your website.

.qodef-e-quote {
position: relative;
width: 100%;
vertical-align: top;
padding: 37px 7%;
background-color: #ffe6b5;
margin: 40px 0;
}
.qodef-e-quote h4 {
font-weight: 500;
color: #1f1f1f;
font-size: 28px;
line-height: 1.22em;
letter-spacing: -0.04em;
margin: 0 0 37px;
}
.qodef-e-quote h4:before, .qodef-e-quote h4:after{
content: '"';
position: absolute;
height: 0.1em;
font-size: 100px;
font-weight: 600;
color: #1f1f1f;
}
.qodef-e-quote h4:before {
top: 17%;
left: 1%; 
}
.qodef-e-quote h4:after {
top: 100%;
right: 1%;
}
@media screen and (max-width: 680px) {
.qodef-e-quote h4:before {
top: 10%; 
}
}

Additionally, for the code to work, insert it in the Appearance > Customize > Additional CSS section. After inserting our code, we have gotten the following result, shown below.

In the following example, we will show how you can add a custom field with an array of values. While the default Custom Fields section only allows a singular entry for a given custom field, with a bit of coding, you can implement this added functionality.

More precisely, the inserted custom field value can be split into an array of separate values using a predetermined delimiter symbol (comma, dash, backslash, etc.). Then, you can display or use each of these values separately. With this in mind, our second code snippet showcases how you can add one or multiple body class names to your page or post.

The added class names can, then, be used to target a specific page or post and apply some customization to it, or, more commonly, a styling change. Having said that, let us explain the code shown below.

function qode_add_custom_field_body_class( $classes ) {
if ( is_single() || is_page() ) {
$value = get_post_meta( get_queried_object_id(), 'qode_body_class', true );
if ( ! empty( $value ) ) {
$body_classes = explode( ',', $value );
foreach ( $body_classes as $body_class ) {
$classes[] = str_replace( ' ', '', rtrim( $body_class ) );
}
}
}
return $classes;
}
add_filter( 'body_class', 'qode_add_custom_field_body_class' );

It represents a custom function called qode_add_custom_field_body_class() hooked onto the body_class filter hook.

The most important part of the code is placed within the ( is_single() || is_page() ) conditional statement, meaning it will be executed as long as one of the conditional tags is fulfilled, i.e. in case of single posts and pages, but not counting the attachment pages.

As for the code within the conditional statement, first, we have stored the value of the qode_body_class custom field into the $value variable. Then, in the case the $value variable isn’t empty, the remainder of the code is executed. This includes breaking the value inserted in qode_body_class custom field into an array called $body_classes assuming that you have used a comma(.) as a delimiter when inserting multiple classes.

Afterward, the elements of that array, i.e. the separate body classes that you inserted are added to the $classes[] array, which holds all the body class names for a given page and which is returned at the end of the code. Additionally, we have made sure to remove any trailing blank spaces at the end of each separate class, as well as a single space between individual class names.

For that reason, the code is adjusted so that it allows you to insert as many body CSS class names as you want, as long as they are separated by commas and a single optional blank space. Meaning, you can insert the class names in either of the following forms:

class-name-1, class-name-2, class-name-3, …

or

class-name-1,class-name-2,class-name-3,…

i.e. with or without a trailing white space after the comma sign. Written that way, your entry will be properly parsed and added to the $classes[] variable as separate body class names, as previously mentioned.

That said, for all to work, make sure to add the qode_body_class field to a single post or page and insert the class name value(s) in one of the two forms we previously discussed. Then, click the “Update” button to save the changes.

Afterward, the inserted body class(es) will be inserted within the existing body class names of the page or post where you added the custom field and value(s). To make sure that they are properly added, inspect that page or post using the developer tools of your current browser.

To do so, right-click anywhere on that page or post and click on the “Inspect” option from the menu that appears.

This opens the developer tools of your current browser and places you within the Elements tab, directly on the element you right-clicked. Then, to find the <body> element, scroll to the top of the HTML code using the side scroller of the Elements tab.

Having found the <body> element, the newly added classes will be part of the names within its class attribute.

Finally, the purpose of adding such classes is to adjust the stylization or even functionality of specific pages or posts. More precisely, by adding the two classes we had shown before – new-class-1 and new-class-2, we can use the .new-class-1.new-class-2 as a suitable CSS selector that only targets that specific page or post. Meaning, we can create CSS code in the following format:

.new-class-1.new-class-2 {
// CSS code goes here
}

to apply general styliing rules on that specific page or post. Furthermore, we can specify the CSS selector even more (e.g. .new-class-1.new-class-2 div > h4) to style only specific HTML elements on that page or post. As we have covered the topic of the WordPress body_class in a separate article, we advise consulting it for more info on how body class names can be added and used.

Apart from changing default functionalities by hooking onto default WordPress hooks, you can do the same with some plugin functionalities, provided that the plugin authors have included their custom hooks in suitable places.

For our final snippet, we will showcase a simple way of adding customization to a WordPress plugin. In this example, we have used one of the most popular WordPress eCommerce plugins – WooCommerce. More precisely, we will show how to add a custom text label to corresponding WooCommerce products. Then, using this snippet, you can add labels like “New”, “In stock”, “New Collection” and others to highlight specific products.

Apart from that, the snippet below showcases some excellent coding practices. Firstly, it shows that, sometimes, it can be helpful to break your code into several functions, making it easier to interpret later. Furthermore, it showcases how you can hook the same callback function onto multiple hooks to achieve the same or similar functionality on multiple parts of your website.

In our example, the reason for it is to place the added text label on multiple locations – the single product page, the shop page, and product category and product tag pages. With that being said let us observe the coding snippet given below.

function qode_get_the_product_label( $product_id ) {
$label = get_post_meta( $product_id, 'qode_add_a_label', true );
if ( ! empty( $label ) ) {
return '<span class="qodef-woo-product-mark qodef-label">' . esc_html( $label ) . '</span>';
}
}
function qode_add_a_label_on_a_product() {
global $product;
if ( ! empty( $product ) && $product->get_id() !== '' ) {
echo qode_get_the_product_label( $product->get_id() );
}
}
add_filter( 'woocommerce_before_single_product_summary', 'qode_add_a_label_on_a_product' );
add_action( 'woocommerce_before_shop_loop_item_title', 'qode_add_a_label_on_a_product' );

Its code consists of two functions – qode_get_product_label() and qode_add_a_label_on_a_product(). The naming of the functions is purposefully self-explanatory, which is another helpful coding practice. The former function retrieves the value of the qode_add_a_label custom field and stores it in the $label variable.

Then, the same $label is sanitized with the esc_hmtl() function and returned alongside some wrapping HTML code. As for the latter function, it displays the HTML label code returned with the former function. This HTML code is tied only to the corresponding product page. Finally, the last two lines show that the qode_add_a_label_on_a_product() is hooked onto the woocommerce_before_single_product_summary and woocommerce_before_shop_loop_item_title filter and action hooks, respectively, which are both WooCommerce plugin-specific hooks.

These two lines are one of the most important as they determine where the added label will be shown. More precisely, the inserted label will be shown on the product page before its content thanks to the first line, and on the default shop page, product category, and product tags pages above the title of the corresponding product thanks to the second.

Of course, for all to work properly, make sure that you have added the field and made the appropriate style code. The latter is shown in the screenshot below. Needless to say, if you use a different custom field name, make sure that it is replaced in the code as well.

As for the styliing code, you will need to create one on a case-by-case basis, as stated previously. We will include the one we used for this article, but repeat that the styling rules might need some adjustment to fit your website.

.qodef-woo-product-label {
position: absolute;
top: 0;
right: calc(10% - 3px);
padding: 7px 27px 9px;
font-size: 16px;
line-height: 1.4em;
color: #fff;
background-color: #e82a2a;
z-index: 5;
}

Having created similar code, add it in the Appearance > Customize > Additional CSS section. In our case, after adding the above mentioned code, we have gotten the following result, shown in the two screenshots below. The first represents the single product page, while the second shows the same product as seen on WooCommerce’s default shop page.

As the display of the corresponding product category and product tag page that contains the product is the same as on the default shop page, we haven’t included any additional images.

This concludes our overview of the WordPress Custom Fields section and how you can use it. While the examples we created for this article were only moderately difficult, they provide a good enough glimpse of the potential that the WordPress Custom Fields section has for adding new functionalities or changing existing ones.

Thus, by understanding all the basic steps of adding a custom field, as well as some of the more advanced coding points we covered within our examples, you can easily make use of this section for your customizations. With it, we conclude the article.

Final Thoughts

WordPress Custom Fields can be used to add metadata to WordPress pages and posts and to display that information on the website, thus achieving various customizations. In general, to use the custom fields properly, you can opt to use coding solutions only or a mix of WordPress custom fields plugins and code. In this article, we have covered the former option, relying on the default WordPress Custom Fields section in the process.

While slightly more challenging than the latter method, using the Custom Fields section in conjunction with suitable coding snippets is still a quite efficient way of adding site-wide customization to your pages and posts. It consists of three major steps – enabling the WordPress Custom Fields section, adding a new custom field with a corresponding value, and displaying it in a suitable place on the website, all of which have been thoroughly covered in this article.

We have also included three carefully prepared coding snippets to showcase the potential customizations that you can implement. These were ideal to showcase additional points made in the article regarding the latest coding practices. This article can, therefore, be quite beneficial for intermediate and advanced WordPress users, both for those that want to learn more about the use of the WordPress Custom Fields sections, as well as those that want to learn more about WordPress development in general. Thus, if you fall under these categories, we strongly suggest you bookmark this article for later use.