{"id":35503,"date":"2022-03-14T15:00:40","date_gmt":"2022-03-14T14:00:40","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=35503"},"modified":"2022-03-23T13:00:58","modified_gmt":"2022-03-23T12:00:58","slug":"how-to-use-wordpress-custom-fields","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-use-wordpress-custom-fields\/","title":{"rendered":"What Are WordPress Custom Fields and How to Use Them"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]If you are relatively new to WordPress, it is less likely that <strong>you have heard of or used WordPress custom fields<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#understanding-wordpress-custom-fields\">Understanding WordPress Custom Fields<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-you-need-to-know-beforehand\">What You Need to Know Beforehand<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#enabling-wordpress-custom-fields\">Enabling WordPress Custom Fields<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-wordpress-custom-field\">Adding a WordPress Custom Field<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#displaying-wordpress-custom-field\">Displaying a WordPress Custom Field<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#coding-examples\">Coding Examples<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"understanding-wordpress-custom-fields\"><\/a>Understanding WordPress Custom Fields<\/h2>\n<p>[\/vc_column_text][vc_column_text]Custom fields are an important aspect of WordPress as <strong>they allow WordPress users to add additional details regarding their content<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, custom fields aren\u2019t 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\u2019t 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\u2019t 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\u2019t aware, it looks as shown on the screenshot below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"627\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Custom-Fields-300x194.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Custom-Fields-768x497.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Custom-Fields-620x401.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For example, this is the case for all <a href=\"https:\/\/qodeinteractive.com\/\" target=\"_blank\" rel=\"noopener\">Qode Interactive<\/a> themes, which have an elaborate option framework in place for this purpose. On the other hand, if you aren\u2019t 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-you-need-to-know-beforehand\"><\/a>What You Need to Know Beforehand<\/h2>\n<p>[\/vc_column_text][vc_column_text]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, <strong>we will focus on the default WordPress Custom Fields section<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, in the case you have opted to use a plugin like <a href=\"https:\/\/wordpress.org\/plugins\/advanced-custom-fields\/\" target=\"_blank\" rel=\"noopener\">Advanced Custom Fields<\/a> for this purpose instead of the default WordPress Custom Fields section, we advise reading our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-custom-meta-boxes-in-wordpress\/\">how to add custom meta boxes in WordPress<\/a>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]More precisely, in the article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-wordpress-subtitles\/\">adding WordPress subtitles<\/a>, 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 \u201cbehind the scenes\u201d 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, let us go over all the steps required to use the WordPress Custom Fields section starting from enabling the section.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"enabling-wordpress-custom-fields\"><\/a>Enabling WordPress Custom Fields<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Gutenberg Editor<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are using the Gutenberg editor screen,<strong> click on the three dots link<\/strong> in the top-right corner of your screen. You can do so both while editing a page or post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After opening the Options menu, <strong>locate<\/strong> and <strong>click the \u201cPreferences\u201d option<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"650\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Preferences\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-768x515.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-620x416.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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, <strong>click on the Panels tab<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Preferences Panels\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then,<strong> locate the \u201cCustom fields\u201d option<\/strong> in the Additional subsection. To show the Custom Fields section, <strong>toggle the related radio button.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Preferences Panels Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-Custom-Fields-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-Custom-Fields-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Panels-Custom-Fields-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>you will see an additional \u201cEnable and Reload\u201d button below<\/strong>. However, we must warn that, <strong>if you have any unsaved edits on the current page, clicking this button is not advised<\/strong>, as you will lose your editing work. Instead, you should <strong>exit the Preferences popup window and click the \u201cUpdate\u201d button<\/strong> to update the page or post. Then, proceed as described above. Afterward, having toggled the Custom fields,<strong> click the \u201cEnable &amp; Reload\u201d button<\/strong> to reload the page and save the preference choice.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"600\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Enable-and-Reload.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Preferences Enable and Reload\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Enable-and-Reload.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Enable-and-Reload-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Enable-and-Reload-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Preferences-Enable-and-Reload-620x384.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After the page has been reloaded, <strong>you will be able to see the Custom Fields section below the content of your page or post.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Custom-Fields-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Custom-Fields-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Gutenberg-Custom-Fields-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Classic Editor<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are using the <a href=\"https:\/\/wordpress.org\/plugins\/classic-editor\/\" target=\"_blank\" rel=\"noopener\">Classic Editor<\/a> 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 <strong>locate the Screen Options link<\/strong> in the top-right corner of the screen while editing a given page or post. Then, <strong>click on it<\/strong> to expand the section.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Screen Options Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Custom-Fields-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Custom-Fields-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Screen-Options-Custom-Fields-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After doing so, the Custom Fields section will appear below the post content, this time without reloading the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"530\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Custom-Fields-300x164.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Custom-Fields-768x420.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Custom-Fields-620x339.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First of all, if you have added a custom post type on your own by using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/register_post_type\/\" target=\"_blank\" rel=\"noopener\">register_post_type()<\/a> function, then, you need to make sure to add \u201ccustom-fields\u201d as one of the attributes of the supports parameter. Since <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-make-wordpress-custom-post-types\/\">adding custom post types<\/a> is an advanced topic which we have already thoroughly covered in a separate article, we advise reading it at this point for more info.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, if your custom post type is enabled by a third party plugin, then you need to make sure that the \u201ccustom-fields\u201d attribute is enabled there. If you have added that custom post type using a plugin like <a href=\"https:\/\/wordpress.org\/plugins\/custom-post-type-ui\/\" target=\"_blank\" rel=\"noopener\">CPT UI<\/a>, this can be changed within the plugin options, while in other cases it might require some coding solutions which involve the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_post_type_support\/\" target=\"_blank\" rel=\"noopener\">add_post_type_support()<\/a> function.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Still, adding the \u201ccustom-fields\u201d attribute doesn\u2019t 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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-troubleshoot-wordpress-errors\/#deactivating-plugins\">the basic troubleshooting steps<\/a>. Then, you should consult the authors of that plugin on how to show the default Custom Fields section once more.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-fix-custom-fields-not-showing-in-wordpress\/\">fixing the issue of Custom Fields not showing<\/a>, we advise consulting that article to learn more.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-wordpress-custom-field\"><\/a>Adding a WordPress Custom Field<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, <strong>click to edit a page or post<\/strong> for which the Custom Fields section was previously enabled. Then,<strong> locate the Custom Fields section<\/strong>, which will consist of two parts \u2013 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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"513\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Add-Custom-Field.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Add Custom Field\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Add-Custom-Field.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Add-Custom-Field-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Add-Custom-Field-768x407.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Add-Custom-Field-620x328.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add a new custom field, <strong>click on the \u201cEnter new\u201d link<\/strong> in the Add New Custom Field subsection.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Enter-New-Custom-Field.jpg\" class=\"attachment-full size-full\" alt=\"Classic Editor Enter New Custom Field\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Enter-New-Custom-Field.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Enter-New-Custom-Field-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Enter-New-Custom-Field-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Classic-Editor-Enter-New-Custom-Field-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then,<strong> insert the name and the value of the custom field<\/strong> in the corresponding input fields and <strong>click the \u201cAdd Custom Field\u201d button<\/strong> below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Custom-Field-Name-and-Value.jpg\" class=\"attachment-full size-full\" alt=\"Add Custom Field Name and Value\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Custom-Field-Name-and-Value.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Custom-Field-Name-and-Value-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Custom-Field-Name-and-Value-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Add-Custom-Field-Name-and-Value-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Afterward, to make sure that the additional custom field has been saved properly, <strong>click the \u201cUpdate\u201d button<\/strong> in the top right corner of your page or post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Update.jpg\" class=\"attachment-full size-full\" alt=\"Update\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Update.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Update-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Update-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Update-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As said before, this has to be <strong>done for each page or post to which you wish to add a custom field<\/strong>. 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 \u201c-Select-\u201d 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"displaying-wordpress-custom-field\"><\/a>Displaying a WordPress Custom Field<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_post_meta\/\" target=\"_blank\" rel=\"noopener\">get_post_meta()<\/a> function to retrieve the value you inserted to the previously created custom field and store it in a variable. This function accepts three parameters \u2013 <strong>the ID of the page or post<\/strong> where the custom field is added, <strong>the name of the custom field<\/strong>, i.e. its key, and <strong>whether you wish to return the value of the custom field as a single string<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">$variable = get_post_meta( $post_id, 'key_name_here', true );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The following step involves displaying the stored custom field value using the variable in which it is stored. Using the simple <a href=\"https:\/\/www.php.net\/manual\/en\/function.echo.php\" target=\"_blank\" rel=\"noopener\">echo<\/a> 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 <a href=\"https:\/\/developer.wordpress.org\/themes\/theme-security\/data-sanitization-escaping\/\" target=\"_blank\" rel=\"noopener\">WordPress sanitization<\/a> (e.g. <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/esc_html\/\" target=\"_blank\" rel=\"noopener\">esc_html<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/esc_attr\/\" target=\"_blank\" rel=\"noopener\">esc_attr<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/esc_url\/\" target=\"_blank\" rel=\"noopener\">esc_url<\/a>, \u2026) when doing so.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">if ( ! empty( $variable ) ) {\r\necho esc_html( $variable );\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said,<strong> the final and most important steps remain where and how such a code should be added<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Simply put,<strong> WordPress hooks are a piece of placeholder code<\/strong>, 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 \u2013<strong> action hooks<\/strong> and <strong>filter hooks<\/strong>. Action hooks are used for adding new features and functionalities, while filter hooks are used for changing existing ones.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use a WordPress hook, you will need to <strong>create a custom function<\/strong> referred to as a callback function or callback \u201chooked onto\u201d this placeholder code. That way, it is the callback that defines a custom functionality, while the \u201chooking onto\u201d aspect is what ensures that the functionality is enabled.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Moreover, <strong>the hooked function will be executed at the exact place where the hook was placed<\/strong>. But, this way <strong>you don\u2019t need to change any template files<\/strong>, 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 <em>functions.php<\/em> of your child theme or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>, which are the two suggested places for storing coding customizations.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said, <strong>the \u201chooking onto\u201d part requires one line of code \u2013 the use of the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> function for action hooks and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/\" target=\"_blank\" rel=\"noopener\">add_filter()<\/a> for filter hooks<\/strong>. Both of these functions accept four arguments. These are the following: <strong>the name of the hook you want to \u201chook onto\u201d, the name of the callback function<\/strong>, the priority of the callback function that factors in the order that it is executed, and <strong>the number of arguments that the callback function accepts.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t 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.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Action hook pseudo-code example<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function action_function_name() { \r\n\/\/ Some code goes here\r\n}\r\nadd_action( 'suitable-action-hook-here', 'action_function_name' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Filter hook pseudo-code example<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function filter_function_name( some variables go here ) { \r\n\/\/ Some code goes here\r\nreturn some variable;\r\n}\r\nadd_filter( 'suitable-filter-hook-goes-here', 'filter_function_name');<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Sadly, as seen by the <strong>suitable-hook-goes-here<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"coding-examples\"><\/a>Coding Examples<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having said that, let us begin.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Blog Post Quote<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t want to display the quote and makes the code a bit cleaner overall. All these points are also present in our remaining coding examples.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Secondly, the code showcases the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/the_content\/\" target=\"_blank\" rel=\"noopener\">the_content<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_display_custom_field_quote( $content ) {\r\nif ( is_singular( 'post' ) ) {\r\n$quote_text = get_post_meta( get_the_ID(), 'qode_quote_text', true );\r\n$quote_author = get_post_meta( get_the_ID(), 'qode_quote_author', true );\r\n$html = '';\r\nif ( ! empty( $quote_text ) ) {\r\n$html .= '&lt;div class=\"qodef-e-quote\"&gt;&lt;h4 class=\"qodef-e-quote-text\"&gt;' . esc_html( $quote_text ) . '&lt;\/h4&gt;';\r\nif ( ! empty( $quote_author ) ) {\r\n$html .= '&lt;span class=\"qodef-e-quote-author\"&gt;' . esc_html( $quote_author ) . '&lt;\/span&gt;';\r\n}\r\n$html .= '&lt;\/div&gt;';\r\n}\r\n$content = $html . $content;\r\n}\r\nreturn $content;\r\n}\r\nadd_filter( 'the_content', 'qode_display_custom_field_quote' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The code represents a custom function called <strong>qode_display_custom_field_quote()<\/strong> hooked onto the <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/the_content\/\" target=\"_blank\" rel=\"noopener\">the_content<\/a> filter hook. The main part of the function is placed within the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_singular\/\" target=\"_blank\" rel=\"noopener\">is_singular()<\/a> conditional tag with a \u2018post\u2019 parameter, meaning that our code will only apply to blog posts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for the inner part of the code, we have stored the values of two custom fields called <em>qode_quote_text<\/em> and qode_quote_author into two variables &#8211; $quote_text and $quote_author, respectively, using the get_post_meta() function. Then, using an <a href=\"https:\/\/www.php.net\/manual\/en\/control-structures.if.php\" target=\"_blank\" rel=\"noopener\">if statement<\/a>, we have made it so that the quote section is displayed only if the quote was inserted in the custom field we previously mentioned.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/developer.wordpress.org\/themes\/theme-security\/data-sanitization-escaping\/\" target=\"_blank\" rel=\"noopener\">sanitized<\/a> the quote using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/esc_html\/\" target=\"_blank\" rel=\"noopener\">esc_html()<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, both these sections are stored as strings within the $html variable, which is then appended to the $content variable, at its beginning. Meaning,<strong> using the code snippet shown above you will be able to add a quote to any blog post you wish<\/strong>, directly before its content.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>insert the two custom fields we used in the code &#8211; qode_quote_text and qode_quote_author, with their values<\/strong>. You will have to do so one at a time in the manner discussed in a previous section. Then, make sure to <strong>click the \u201cUpdate\u201d button<\/strong> to save both the custom fields and their respective values.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Blog Post Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Update.jpg\" class=\"attachment-full size-full\" alt=\"Blog Post Custom Fields Update\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Update.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Update-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Update-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Update-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019t 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-e-quote {\r\nposition: relative;\r\nwidth: 100%;\r\nvertical-align: top;\r\npadding: 37px 7%;\r\nbackground-color: #ffe6b5;\r\nmargin: 40px 0;\r\n}\r\n.qodef-e-quote h4 {\r\nfont-weight: 500;\r\ncolor: #1f1f1f;\r\nfont-size: 28px;\r\nline-height: 1.22em;\r\nletter-spacing: -0.04em;\r\nmargin: 0 0 37px;\r\n}\r\n.qodef-e-quote h4:before, .qodef-e-quote h4:after{\r\ncontent: '\"';\r\nposition: absolute;\r\nheight: 0.1em;\r\nfont-size: 100px;\r\nfont-weight: 600;\r\ncolor: #1f1f1f;\r\n}\r\n.qodef-e-quote h4:before {\r\ntop: 17%;\r\nleft: 1%; \r\n}\r\n.qodef-e-quote h4:after {\r\ntop: 100%;\r\nright: 1%;\r\n}\r\n@media screen and (max-width: 680px) {\r\n.qodef-e-quote h4:before {\r\ntop: 10%; \r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, for the code to work, <strong>insert it in the Appearance &gt; Customize &gt; Additional CSS section<\/strong>. After inserting our code, we have gotten the following result, shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"554\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Blog Post Custom Fields Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Preview-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Preview-768x439.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Blog-Post-Custom-Fields-Preview-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Additional body class name<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_add_custom_field_body_class( $classes ) {\r\nif ( is_single() || is_page() ) {\r\n$value = get_post_meta( get_queried_object_id(), 'qode_body_class', true );\r\nif ( ! empty( $value ) ) {\r\n$body_classes = explode( ',', $value );\r\nforeach ( $body_classes as $body_class ) {\r\n$classes[] = str_replace( ' ', '', rtrim( $body_class ) );\r\n}\r\n}\r\n}\r\nreturn $classes;\r\n}\r\nadd_filter( 'body_class', 'qode_add_custom_field_body_class' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It represents a custom function called <strong>qode_add_custom_field_body_class()<\/strong> hooked onto the <strong>body_class<\/strong> filter hook.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The most important part of the code is placed within the ( <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_single\/\" target=\"_blank\" rel=\"noopener\">is_single()<\/a> || <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/is_page\/https:\/developer.wordpress.org\/reference\/functions\/is_page\/\" target=\"_blank\" rel=\"noopener\">is_page()<\/a> ) 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t empty, the remainder of the code is executed. This includes breaking the value inserted in <strong>qode_body_class<\/strong> custom field into an array called <strong>$body_classes<\/strong> assuming that you have used a comma(.) as a delimiter when inserting multiple classes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Afterward, the elements of that array, i.e. the separate body classes that you inserted are added to the <strong>$classes[]<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">class-name-1, class-name-2, class-name-3, \u2026<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]or[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">class-name-1,class-name-2,class-name-3,\u2026<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said, for all to work, make sure to <strong>add the qode_body_class field<\/strong> to a single post or page and<strong> insert the class name value(s)<\/strong> in one of the two forms we previously discussed. Then, <strong>click the \u201cUpdate\u201d button<\/strong> to save the changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"523\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Body-Class-Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Body Class Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Body-Class-Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Body-Class-Custom-Fields-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Body-Class-Custom-Fields-768x415.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Body-Class-Custom-Fields-620x335.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To do so, <strong>right-click anywhere on that page or post<\/strong> and <strong>click on the \u201cInspect\u201d option<\/strong> from the menu that appears.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"598\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspecting-a-Website.jpg\" class=\"attachment-full size-full\" alt=\"Inspecting a Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspecting-a-Website.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspecting-a-Website-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspecting-a-Website-768x474.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspecting-a-Website-620x383.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 <em>&lt;body&gt;<\/em> element, <strong>scroll to the top of the HTML code<\/strong> using the side scroller of the Elements tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-Scroll-Bar.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Elements Scroll Bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-Scroll-Bar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-Scroll-Bar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-Scroll-Bar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-Elements-Scroll-Bar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having found the <em>&lt;body&gt;<\/em> element, the newly added classes will be part of the names within its class attribute.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"512\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-New-Class.jpg\" class=\"attachment-full size-full\" alt=\"Inspect New Class\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-New-Class.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-New-Class-300x159.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-New-Class-768x406.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Inspect-New-Class-620x328.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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 \u2013 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:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.new-class-1.new-class-2 {\r\n\/\/ CSS code goes here\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 &gt; h4) to style only specific HTML elements on that page or post. As we have covered the topic of the <a href=\"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-body-class\/\">WordPress body_class<\/a> in a separate article, we advise consulting it for more info on how body class names can be added and used.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>An additional label on WooCommerce products<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 \u2013 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 \u201cNew\u201d, \u201cIn stock\u201d, \u201cNew Collection\u201d and others to highlight specific products.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In our example, the reason for it is to place the added text label on multiple locations &#8211; 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_get_the_product_label( $product_id ) {\r\n$label = get_post_meta( $product_id, 'qode_add_a_label', true );\r\nif ( ! empty( $label ) ) {\r\nreturn '&lt;span class=\"qodef-woo-product-mark qodef-label\"&gt;' . esc_html( $label ) . '&lt;\/span&gt;';\r\n}\r\n}\r\nfunction qode_add_a_label_on_a_product() {\r\nglobal $product;\r\nif ( ! empty( $product ) &amp;&amp; $product-&gt;get_id() !== '' ) {\r\necho qode_get_the_product_label( $product-&gt;get_id() );\r\n}\r\n}\r\nadd_filter( 'woocommerce_before_single_product_summary', 'qode_add_a_label_on_a_product' );\r\nadd_action( 'woocommerce_before_shop_loop_item_title', 'qode_add_a_label_on_a_product' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Its code consists of two functions \u2013 <strong>qode_get_product_label()<\/strong> and <strong>qode_add_a_label_on_a_product()<\/strong>. The naming of the functions is purposefully self-explanatory, which is another helpful coding practice. The former function retrieves the value of the <strong>qode_add_a_label<\/strong> custom field and stores it in the<strong> $label<\/strong> variable.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>woocommerce_before_single_product_summary<\/strong> and <strong>woocommerce_before_shop_loop_item_title<\/strong> filter and action hooks, respectively, which are both <a href=\"https:\/\/woocommerce.github.io\/code-reference\/hooks\/hooks.html\" target=\"_blank\" rel=\"noopener\">WooCommerce plugin-specific hooks<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Products.jpg\" class=\"attachment-full size-full\" alt=\"All Products\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Products.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Products-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Products-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/All-Products-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"525\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-Custom-Fields.jpg\" class=\"attachment-full size-full\" alt=\"Products Custom Fields\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-Custom-Fields.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-Custom-Fields-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-Custom-Fields-768x416.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Products-Custom-Fields-620x336.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.qodef-woo-product-label {\r\nposition: absolute;\r\ntop: 0;\r\nright: calc(10% - 3px);\r\npadding: 7px 27px 9px;\r\nfont-size: 16px;\r\nline-height: 1.4em;\r\ncolor: #fff;\r\nbackground-color: #e82a2a;\r\nz-index: 5;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having created similar code, <strong>add it in the Appearance &gt; Customize &gt; Additional CSS section<\/strong>. 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\u2019s default shop page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"654\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-Test-Label.jpg\" class=\"attachment-full size-full\" alt=\"Product Test Label\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-Test-Label.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-Test-Label-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-Test-Label-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-Test-Label-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"601\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-2-Test-Label.jpg\" class=\"attachment-full size-full\" alt=\"Product 2 Test Label\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-2-Test-Label.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-2-Test-Label-300x186.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-2-Test-Label-768x476.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/03\/Product-2-Test-Label-620x385.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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\u2019t included any additional images.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 \u2013 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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>WordPress Custom Fields have long been a feature of the platform. With our in-depth guide, you will be able to leverage them in full. <\/p>\n","protected":false},"author":11229,"featured_media":35974,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[135,4,13],"class_list":["post-35503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-customization","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=35503"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/35503\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/35974"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=35503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=35503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=35503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}