{"id":10815,"date":"2021-10-15T13:01:53","date_gmt":"2021-10-15T13:01:53","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=10815"},"modified":"2025-04-07T06:29:18","modified_gmt":"2025-04-07T06:29:18","slug":"wordpress-custom-fields","status":"publish","type":"post","link":"\/uk\/tutorials\/wordpress-custom-fields","title":{"rendered":"WordPress custom fields: Definition, tutorial, and use cases"},"content":{"rendered":"<p>WordPress custom fields let you store and display additional information like pricing, product details, or author notes &ndash; all without cluttering your main content. Even better, they can make your site feel more dynamic and personalized.<\/p><p>If you&rsquo;re looking to learn more about WordPress custom fields and how to use them, this article will walk you through everything you need to know. We&rsquo;ll also provide some examples of use cases that you can use as inspiration.<\/p><p>Let&rsquo;s start!<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-are-wordpress-custom-fields\"><strong>What are WordPress custom fields?<\/strong><\/h2><p>WordPress custom fields are extra data fields that let you display information beyond the default.<\/p><p>Some examples are product prices, time to complete an action, event dates, or post ratings. This makes your website content more dynamic and tailored to your specific needs.<\/p><p>People often use WordPress custom fields together with custom post types and custom post templates to enhance their websites.<\/p><p>If you aren&rsquo;t familiar with these, <a href=\"\/uk\/tutorials\/wordpress-custom-post-types\">custom post types<\/a> let you organize content according to your specific needs, freeing you from WordPress&rsquo; default blog-like post structure.<\/p><p>Meanwhile, <a href=\"\/uk\/tutorials\/wordpress-post-template\">custom post templates<\/a> ensure unique layouts matching the type of content you want to display.<\/p><p>With these three elements, you can tailor your website&rsquo;s content structure and design to fit your exact vision.<\/p><p>For instance, if you&rsquo;re running a real estate website, you can create a <strong>custom post type <\/strong>to display property listings, use <strong>custom post templates<\/strong> to arrange the layout, and add <strong>custom fields<\/strong> for the property details.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-enable-custom-fields-in-wordpress-posts-and-pages\"><strong>How to enable custom fields in WordPress posts and pages<\/strong><\/h2><p>By default, the WordPress custom fields feature is disabled, so you&rsquo;ll need to enable it first. Here&rsquo;s how to do so:<\/p><ol class=\"wp-block-list\">\n<li>Open your WordPress <a href=\"\/uk\/tutorials\/wordpress-post-vs-page\">post or page<\/a> editor.&nbsp;<\/li>\n\n\n\n<li>Locate the <strong>Options<\/strong> menu (the three-dot button in the upper right corner).<\/li>\n\n\n\n<li>Select <strong>Preferences<\/strong>, scroll down to the <strong>Advanced<\/strong> section in the <strong>General<\/strong> menu.<\/li>\n\n\n\n<li>Toggle the <strong>Custom fields<\/strong> option.&nbsp;<\/li>\n\n\n\n<li>The <strong>Show &amp; Reload Page<\/strong> button will appear. Click on it to finish.&nbsp;<\/li>\n<\/ol><figure data-wp-context='{\"imageId\":\"69dfd5809d2b3\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"487\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/show-and-reload-button-in-wordpress-custom-fields-menu-1024x487.png\" alt=\"The Show &amp; Reload Page button in WordPress Preferences menu\n\" class=\"wp-image-126699\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/show-and-reload-button-in-wordpress-custom-fields-menu-1024x487.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/show-and-reload-button-in-wordpress-custom-fields-menu-300x143.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/show-and-reload-button-in-wordpress-custom-fields-menu-150x71.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/show-and-reload-button-in-wordpress-custom-fields-menu-768x365.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/show-and-reload-button-in-wordpress-custom-fields-menu-1536x731.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/show-and-reload-button-in-wordpress-custom-fields-menu-2048x974.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>After that, the <strong>Custom Fields<\/strong> panel will appear at the bottom of the content editor.<\/p><figure data-wp-context='{\"imageId\":\"69dfd5809deed\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"242\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/wordpress-custom-field-section-in-post-editor-1024x242.png\" alt=\"The WordPress custom field section in the post editor\n\" class=\"wp-image-126700\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-section-in-post-editor-1024x242.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-section-in-post-editor-300x71.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-section-in-post-editor-150x35.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-section-in-post-editor-768x181.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-section-in-post-editor-1536x363.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-section-in-post-editor-2048x484.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>The <strong>Name<\/strong> and <strong>Value<\/strong> fields function like key\/value pairs. The key is the custom field&rsquo;s name, and the value is the specific information associated with it.<\/p><p>For example, we&rsquo;ll create a custom field to display a sponsored post disclosure. Click the <strong>Enter new<\/strong> button to create custom fields.<\/p><p>In this example, we name it <strong>sponsored_post<\/strong> with this text value:<\/p><p><strong>This is a sponsored post. However, we make sure to only feature products and services we find valuable for our readers.<\/strong><\/p><figure data-wp-context='{\"imageId\":\"69dfd5809ea63\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"242\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/add-new-custom-field-interface-1024x242.png\" alt=\"The add new custom field interface in WordPress post editor\n\" class=\"wp-image-126701\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/add-new-custom-field-interface-1024x242.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/add-new-custom-field-interface-300x71.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/add-new-custom-field-interface-150x35.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/add-new-custom-field-interface-768x181.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/add-new-custom-field-interface-1536x362.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/add-new-custom-field-interface-2048x483.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Finish by clicking the <strong>Add Custom Field <\/strong>button.<\/p><p>Note that WordPress only keeps custom field values <strong>on the<\/strong> <strong>back end<\/strong>. We&rsquo;ll need to edit the theme files to display the custom field data on the front end.<\/p><h3 class=\"wp-block-heading\" id=\"h-how-to-display-the-custom-fields\"><strong>How to display the custom fields<\/strong><\/h3><p>Before proceeding to the steps, we recommend creating a <a href=\"\/uk\/tutorials\/how-to-create-wordpress-child-theme\">child theme<\/a> so you can experiment freely without affecting the main theme. Doing so also ensures that your changes remain intact even when the theme version is updated.<\/p><p>Since the steps for displaying custom fields differ between classic and <a href=\"\/uk\/tutorials\/wordpress-blocks\">block themes<\/a>, we&rsquo;ll cover each separately.<\/p><p><strong>Classic themes<\/strong><\/p><p>Navigate to <strong>Appearance<\/strong> &rarr; <strong>Theme File Editor<\/strong> from your WordPress admin dashboard. Then, find the <strong>Single Post<\/strong> <strong>(single.php)<\/strong> file where you&rsquo;ll add the extra code lines.<\/p><figure data-wp-context='{\"imageId\":\"69dfd5809f5b4\"}' data-wp-interactive=\"core\/image\" class=\"wp-block-image aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"522\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/single-post-php-file-in-wordpress-theme-editor-1024x522.png\" alt=\"The single.php file opened in WordPress theme editor\n\" class=\"wp-image-126702\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/single-post-php-file-in-wordpress-theme-editor-1024x522.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/single-post-php-file-in-wordpress-theme-editor-300x153.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/single-post-php-file-in-wordpress-theme-editor-150x76.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/single-post-php-file-in-wordpress-theme-editor-768x392.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/single-post-php-file-in-wordpress-theme-editor-1536x783.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/single-post-php-file-in-wordpress-theme-editor-2048x1044.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><p>Here&rsquo;s an example of a common code snippet to display custom fields using the <a href=\"\/uk\/tutorials\/wordpress-get_post_meta\">get_post_meta() function<\/a>:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?php echo get_post_meta($post-&gt;ID, 'key', true); ?&gt;<\/pre><p>Be sure to change the <strong>&lsquo;key&rsquo;<\/strong> placeholder to match your custom field name.<\/p><p>Keep in mind that the example above shows a basic function of WordPress custom fields. You will need to do some extra coding to apply more complex actions.<\/p><p>Now, we want to add this code line to display the sponsored post custom field:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">$sponsored = get_post_meta(get_the_ID(), 'sponsored_post', true);\n\nif (!empty($sponsored)) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;echo '&lt;p class=\"sponsored-disclaimer\"&gt;&lt;strong&gt;Disclaimer:&lt;\/strong&gt; ' . esc_html($sponsored) . '&lt;\/p&gt;';\n\n}<\/pre><p>To display this information at the top of a post, add the code right after the <strong>while ( have_posts() ) : the_post();<\/strong> line. However, you can also place it differently to display the message in another part of the post.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a0169\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"531\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/added-custom-field-code-in-wordpress-theme-file-1024x531.png\" alt=\"The added code lines to display WordPress custom field in the theme file\" class=\"wp-image-126703\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-custom-field-code-in-wordpress-theme-file-1024x531.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-custom-field-code-in-wordpress-theme-file-300x156.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-custom-field-code-in-wordpress-theme-file-150x78.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-custom-field-code-in-wordpress-theme-file-768x398.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-custom-field-code-in-wordpress-theme-file-1536x796.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-custom-field-code-in-wordpress-theme-file-2048x1062.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Once done, click the <strong>Update File<\/strong> button to save the changes.<\/p><p>The code we apply tells WordPress to look for posts with the <strong>sponsored_post<\/strong> custom field and display their value with an added <strong>Disclaimer<\/strong> text.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a0c62\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"500\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-field-example-in-wordpress-classic-theme-1024x500.png\" alt=\"The WordPress custom field front end display in classic theme\" class=\"wp-image-126704\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-field-example-in-wordpress-classic-theme-1024x500.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-field-example-in-wordpress-classic-theme-300x147.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-field-example-in-wordpress-classic-theme-150x73.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-field-example-in-wordpress-classic-theme-768x375.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-field-example-in-wordpress-classic-theme-1536x751.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-field-example-in-wordpress-classic-theme-2048x1001.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Block themes<\/strong><\/p><p>If you&rsquo;re using a WordPress block theme, you won&rsquo;t have access to the <strong>single.php<\/strong> file. You&rsquo;ll need to create a shortcode instead.<\/p><p>Using the same example, we will show how to display the custom field with the <strong>Twenty Twenty-Five<\/strong> block theme.<\/p><p>Navigate to <strong>Tools<\/strong> &rarr; <strong>Theme File Editor<\/strong> and open the <strong>Theme Functions (functions.php)<\/strong> file. Scroll down to the bottom and add this code snippet:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function display_sponsored_disclaimer() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;$sponsored = get_post_meta(get_the_ID(), 'sponsored_post', true);\n\n&nbsp;&nbsp;&nbsp;&nbsp;if (!empty($sponsored)) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return '&lt;p class=\"sponsored-disclaimer\"&gt;&lt;strong&gt;Disclaimer:&lt;\/strong&gt; ' . esc_html($sponsored) . '&lt;\/p&gt;';\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n}\n\nadd_shortcode('sponsored_disclaimer', 'display_sponsored_disclaimer');<\/pre><p>Feel free to tweak the code if you want to change any details. Then, hit the <strong>Update File<\/strong> button to implement the changes.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a17d4\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"522\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/added-code-in-wordpress-functions-to-add-custom-field-1024x522.png\" alt=\"The added code lines in functions.php file to add a WordPress custom field\" class=\"wp-image-126705\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-code-in-wordpress-functions-to-add-custom-field-1024x522.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-code-in-wordpress-functions-to-add-custom-field-300x153.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-code-in-wordpress-functions-to-add-custom-field-150x76.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-code-in-wordpress-functions-to-add-custom-field-768x391.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-code-in-wordpress-functions-to-add-custom-field-1536x783.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/added-code-in-wordpress-functions-to-add-custom-field-2048x1043.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Now, open the post editor. Go to the part where you want to display the custom field, click the <strong>Add block<\/strong> (+) button.<\/p><p>Select <strong>Shortcode<\/strong>, and the field will appear on the post editor. Input your created shortcode there.<\/p><p>Type <strong>[sponsored_disclaimer]<\/strong> as we set it in the theme file earlier. Hit <strong>Save<\/strong> to apply the change.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a22b2\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"485\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/shortcode-block-for-a-custom-field-1024x485.png\" alt=\"A shortcode block for showing a custom field\" class=\"wp-image-126707\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/shortcode-block-for-a-custom-field-1024x485.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/shortcode-block-for-a-custom-field-300x142.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/shortcode-block-for-a-custom-field-150x71.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/shortcode-block-for-a-custom-field-768x364.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/shortcode-block-for-a-custom-field-1536x727.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/shortcode-block-for-a-custom-field-2048x970.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>You&rsquo;ll see the sponsored post disclaimer appear on the front end.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a2ebe\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"619\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/wordpress-custom-field-display-example-in-a-block-theme-1-1024x619.png\" alt=\"A WordPress custom field display example in a block theme\" class=\"wp-image-126708\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-display-example-in-a-block-theme-1-1024x619.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-display-example-in-a-block-theme-1-300x181.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-display-example-in-a-block-theme-1-150x91.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-display-example-in-a-block-theme-1-768x465.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-display-example-in-a-block-theme-1-1536x929.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/wordpress-custom-field-display-example-in-a-block-theme-1.png 1822w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Pro tip<\/h4>\n                    <p> You can tweak the custom fields&rsquo; style by editing the <a href=\"\/uk\/tutorials\/wordpress-custom-css\">WordPress CSS file<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-use-a-wordpress-plugin-to-manage-custom-fields\"><strong>How to use a WordPress plugin to manage custom fields<\/strong><\/h2><p>While manually adding custom fields requires editing theme files, you can simplify the process with plugins. Some of the best WordPress custom field plugins include <strong>Secure Custom Fields<\/strong>, <strong>Meta Field Bloc<\/strong>k, <strong>Pods<\/strong>, <strong>Custom Field Suite<\/strong>, and <strong>CarbonFields<\/strong>.<\/p><p>Using the same sponsored post disclaimer example, we&rsquo;ll show you how to display the custom field without coding with <a href=\"https:\/\/wordpress.org\/plugins\/secure-custom-fields\/\" target=\"_blank\" rel=\"noopener\">Secure Custom Fields<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/display-a-meta-field-as-block\/\" target=\"_blank\" rel=\"noopener\">Meta Field Block<\/a> plugins.<\/p><p>So, the first thing you need to do is to <a href=\"\/uk\/tutorials\/how-to-install-wordpress-plugins\">install and activate both plugins<\/a> on your WordPress dashboard. Once done, follow these steps to add the custom field in WordPress:<\/p><ol class=\"wp-block-list\">\n<li>Navigate to the <strong>SCF<\/strong> menu from your WordPress dashboard.&nbsp;<\/li>\n\n\n\n<li>Click the <strong>Add Field <\/strong>button in the field group editor interface.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a3ac6\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"520\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/scf-plugin-interface-1024x520.png\" alt=\"The Secure Custom Fields plugin example\" class=\"wp-image-126709\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/scf-plugin-interface-1024x520.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/scf-plugin-interface-300x152.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/scf-plugin-interface-150x76.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/scf-plugin-interface-768x390.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/scf-plugin-interface-1536x781.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/scf-plugin-interface-2048x1041.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Give the <strong>Field Group<\/strong> a name. It can be something that reflects its purpose.<\/li>\n\n\n\n<li>Choose <strong>Text<\/strong> as the <strong>Field Type<\/strong>, as we want to display simple text this time.<\/li>\n\n\n\n<li>Fill the <strong>Field Label<\/strong> box to give an idea of the custom field.&nbsp;<\/li>\n\n\n\n<li>The <strong>Field Name<\/strong> box auto-fills based on the field label, but you can edit it if needed.&nbsp;<\/li>\n\n\n\n<li>Type in the <strong>Default Value<\/strong> to appear in the custom field. You can also leave it blank if you want different data values for each post.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a4833\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"529\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/field-group-editor-interface-in-scf-plugin-1024x529.png\" alt=\"The custom field group editor interface in the SCF plugin\" class=\"wp-image-126710\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/field-group-editor-interface-in-scf-plugin-1024x529.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/field-group-editor-interface-in-scf-plugin-300x155.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/field-group-editor-interface-in-scf-plugin-150x77.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/field-group-editor-interface-in-scf-plugin-768x396.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/field-group-editor-interface-in-scf-plugin-1536x793.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/field-group-editor-interface-in-scf-plugin-2048x1057.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"8\" class=\"wp-block-list\">\n<li>Scroll down to the <strong>Settings<\/strong> box to change the custom field&rsquo;s configurations.&nbsp;<\/li>\n\n\n\n<li>This time, we&rsquo;ll only set the <strong>Location Rules<\/strong>, which will determine where the custom field will appear. In this example, we want it to appear on every post.&nbsp;<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a52ac\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"290\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/location-rules-settings-in-scf-plugin-1024x290.png\" alt=\"The Location Rules settings in the SCF plugin\" class=\"wp-image-126711\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/location-rules-settings-in-scf-plugin-1024x290.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/location-rules-settings-in-scf-plugin-300x85.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/location-rules-settings-in-scf-plugin-150x43.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/location-rules-settings-in-scf-plugin-768x218.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/location-rules-settings-in-scf-plugin-1536x435.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/location-rules-settings-in-scf-plugin-2048x581.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"10\" class=\"wp-block-list\">\n<li>Hit the <strong>Save Changes<\/strong> button in the upper right corner.&nbsp;<\/li>\n<\/ol><p>With these settings, the custom field section will appear in every WordPress post editor interface.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a5f1f\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"483\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/the-custom-field-section-from-scf-in-wordpress-post-editor-1024x483.png\" alt=\"The custom field section in WordPress post editor created with the SCF and Meta Field Block plugins\" class=\"wp-image-126712\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-section-from-scf-in-wordpress-post-editor-1024x483.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-section-from-scf-in-wordpress-post-editor-300x141.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-section-from-scf-in-wordpress-post-editor-150x71.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-section-from-scf-in-wordpress-post-editor-768x362.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-section-from-scf-in-wordpress-post-editor-1536x724.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-section-from-scf-in-wordpress-post-editor-2048x965.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Do note that your custom field configurations will determine how the section looks. For example, the text box will be blank if you don&rsquo;t set a default value.<\/p><p>At this point, the field and its value will only appear on your dashboard. Normally, you&rsquo;ll need to tweak the code in your theme file to show the metadata on the front end.<\/p><p>Using the Meta Field Block plugin, you can simplify the process with these steps:<\/p><ol class=\"wp-block-list\">\n<li>Open the post or page editor where you want to show the custom field.<\/li>\n\n\n\n<li>Choose any area to display the custom field and click the <strong>Add block <\/strong>button.&nbsp;<\/li>\n\n\n\n<li>Select <strong>Meta Field Block<\/strong>. You&rsquo;ll see the <strong>Meta field settings<\/strong> section on the block settings panel.&nbsp;<\/li>\n\n\n\n<li>Choose <strong>ACF &ndash; Advanced Custom Fields <\/strong>from the <strong>FIELD TYPE<\/strong> drop-down menu.&nbsp;<\/li>\n\n\n\n<li>Enter the field name you set. For this example, we&rsquo;ll input <strong>sponsored_post<\/strong> according to what we&rsquo;ve set earlier.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a6d79\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"483\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/the-meta-fields-block-in-wordpress-block-editor-1024x483.png\" alt=\"The Meta Fields block in WordPress block editor\" class=\"wp-image-126713\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-meta-fields-block-in-wordpress-block-editor-1024x483.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-meta-fields-block-in-wordpress-block-editor-300x141.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-meta-fields-block-in-wordpress-block-editor-150x71.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-meta-fields-block-in-wordpress-block-editor-768x362.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-meta-fields-block-in-wordpress-block-editor-1536x724.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-meta-fields-block-in-wordpress-block-editor-2048x965.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"6\" class=\"wp-block-list\">\n<li><strong>Save <\/strong>the post to implement the change.&nbsp;<\/li>\n<\/ol><p>As a result, the text will now appear in the actual post.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a7a1a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"870\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/the-custom-field-display-created-with-the-scf-plugin-1024x870.png\" alt=\"The custom field display created with the SCF and Meta Field Blocks plugins\" class=\"wp-image-126714\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-display-created-with-the-scf-plugin-1024x870.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-display-created-with-the-scf-plugin-300x255.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-display-created-with-the-scf-plugin-150x127.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-display-created-with-the-scf-plugin-768x652.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-display-created-with-the-scf-plugin-1536x1305.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/the-custom-field-display-created-with-the-scf-plugin.png 1726w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Pro tip<\/h4>\n                    <p> This example shows a basic use case of WordPress custom fields. You can modify them to fit your website goals by taking advantage of other WordPress features like custom post types, templates, and <a href=\"\/uk\/tutorials\/the-loop-wordpress\">query loop<\/a>.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-benefits-of-wordpress-custom-fields\"><strong>Benefits of WordPress custom fields<\/strong><\/h2><p>The primary purpose of WordPress custom fields is to store and display additional data that isn&rsquo;t included in the default content editor. So, they can help with:<\/p><ul class=\"wp-block-list\">\n<li><strong>Improving content organization<\/strong> &ndash; custom fields provide better data structuring by allowing users to add specific details related to a post.&nbsp;<\/li>\n\n\n\n<li><strong>Enhancing website customization<\/strong> &ndash; custom fields let you go beyond WordPress&rsquo;s default metadata, giving you more flexibility to customize your site exactly as you want.&nbsp;<\/li>\n\n\n\n<li><strong>Adding custom data without plugins<\/strong> &ndash; while many WordPress plugins provide extra fields, using native custom fields keeps websites lightweight.&nbsp;<\/li>\n\n\n\n<li><strong>Streamlining data management for dynamic content<\/strong> &ndash; websites with structured content, such as directories, portfolios, or ecommerce stores, can efficiently store and retrieve product specifications, customer testimonials, or booking details.&nbsp;<\/li>\n\n\n\n<li><strong>Enhancing SEO and user experience <\/strong>&ndash; custom fields can hold <a href=\"\/uk\/tutorials\/wordpress-schema-markup\/\">structured data (schema markup)<\/a> for improving visibility in search engine result pages. They also enhance user experience by making your website content easier to scan and interact with.<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-popular-use-cases-of-wordpress-custom-fields\"><strong>Popular use cases of WordPress custom fields<\/strong><\/h3><p>There are many ways you can improve your WordPress site with custom fields. Here are some real-life examples:<\/p><p><strong>Real estate listings<\/strong><\/p><p>Use custom fields to store property details such as price, location, square footage, number of bedrooms\/bathrooms, and availability status. This allows for structured and filterable listings, improving user experience on real estate websites.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a88ed\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"467\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-example-in-a-property-listing-1024x467.png\" alt=\"An example of custom fields implementation in an property listing page\" class=\"wp-image-126715\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-property-listing-1024x467.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-property-listing-300x137.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-property-listing-150x68.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-property-listing-768x350.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-property-listing-1536x700.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-property-listing-2048x934.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Ecommerce products<\/strong><\/p><p>If you run an online store, custom fields can be beneficial to add extensive product details like SKU numbers, discount percentages, stock status, manufacturer details, and product dimensions.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580a9543\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"471\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-example-in-an-online-store-1024x471.png\" alt=\"An example of custom fields implementation in an ecommerce website\" class=\"wp-image-126716\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-an-online-store-1024x471.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-an-online-store-300x138.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-an-online-store-150x69.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-an-online-store-768x354.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-an-online-store-1536x707.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-an-online-store-2048x943.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Event listings<\/strong><\/p><p>Event websites can include custom content for the event date, time, venue location, ticket prices, performer lineups, and RSVP links. Displaying such information improves the user experience by letting visitors find all relevant event details in one place.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580aa14e\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"553\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-example-in-event-website-1024x553.png\" alt=\"An example of custom fields implementation in an event listings website\" class=\"wp-image-126717\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-event-website-1024x553.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-event-website-300x162.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-event-website-150x81.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-event-website-768x415.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-event-website-1536x830.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-event-website-2048x1107.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Recipe websites<\/strong><\/p><p>Take advantage of custom fields to add structured recipe details such as preparation time, cooking time, number of servings, ingredient lists, calorie count, and dietary restrictions. This improves readability and helps users follow recipes easily.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580aacf7\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"497\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-example-in-a-recipe-website-1024x497.png\" alt=\"An example of custom fields implementation in a recipe website\" class=\"wp-image-126718\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-recipe-website-1024x497.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-recipe-website-300x146.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-recipe-website-150x73.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-recipe-website-768x372.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-recipe-website.png 1402w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Book reviews<\/strong><\/p><p>A book review website can display extra information like author name, book genre, publication year, number of pages, average reader rating, and personal review scores. This provides readers with a quick summary before diving into a full review.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580ab9fd\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"440\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-exmaple-in-a-book-review-website-1024x440.png\" alt=\"An example of custom fields implementation in a book review website\" class=\"wp-image-126719\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-exmaple-in-a-book-review-website-1024x440.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-exmaple-in-a-book-review-website-300x129.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-exmaple-in-a-book-review-website-150x64.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-exmaple-in-a-book-review-website-768x330.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-exmaple-in-a-book-review-website-1536x659.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-exmaple-in-a-book-review-website-2048x879.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p><strong>Portfolio websites<\/strong><\/p><p>If you&rsquo;re a freelancer or are running an agency, consider showcasing your work by adding custom fields for client names, project descriptions, technologies used, project completion dates, and links to live projects.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"69dfd580ac632\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" width=\"1024\" height=\"627\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-example-in-a-portfolio-website-min-1024x627.png\" alt=\"An example of custom fields implementation in a portfolio website\" class=\"wp-image-126720\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-portfolio-website-min-1024x627.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-portfolio-website-min-300x184.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-portfolio-website-min-150x92.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-portfolio-website-min-768x470.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-portfolio-website-min-1536x940.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2021\/10\/custom-fields-example-in-a-portfolio-website-min-2048x1253.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>WordPress custom fields let you add extra information to your content, making your site feel more dynamic and personalized.<\/p><p>In this guide, we&rsquo;ve covered the steps of creating and using custom fields in WordPress manually and by using plugins. We also provided some examples of how you can utilize them best for your needs.<\/p><p>We hope this guide helps you apply and display custom fields on your WordPress site. Start experimenting and let us know how it goes.<\/p><?xml encoding=\"utf-8\" ?><figure class=\"wp-block-image size-large\"><a href=\"\/uk\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\" alt=\"\" class=\"wp-image-111781\" srcset=\"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-1024x300.png 1024w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-300x88.png 300w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-150x44.png 150w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-768x225.png 768w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner-1536x450.png 1536w, https:\/\/www.hostinger.com\/uk\/tutorials\/wp-content\/uploads\/sites\/51\/2024\/06\/New-WP_in-text-banner.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-wordpress-custom-fields-faq\"><strong>WordPress custom fields FAQ<\/strong><\/h2><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1743682914329\"><h3 class=\"schema-faq-question\"><strong>What is the difference between WordPress custom fields and custom post types?<\/strong><\/h3> <p class=\"schema-faq-answer\">WordPress custom fields let users add details like product specifications, ratings, or completion time. Meanwhile, custom post types define content structures beyond the default posts and pages.&nbsp;<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1743682918673\"><h3 class=\"schema-faq-question\"><strong>How do I hide empty custom fields?<\/strong><\/h3> <p class=\"schema-faq-answer\">To hide empty custom fields, use a conditional check in your theme template. Wrap the <strong>get_post_meta()<\/strong> function in an <strong>if<\/strong> statement to ensure it only displays when the field has a value.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1743682923556\"><h3 class=\"schema-faq-question\"><strong>Why can&rsquo;t I see my custom fields?<\/strong><\/h3> <p class=\"schema-faq-answer\">If your custom fields aren&rsquo;t visible, check if they&rsquo;re enabled in the WordPress editor by clicking the <strong>Options<\/strong> button and then going to <strong>Preferences<\/strong> &rarr; <strong>General<\/strong> &rarr; <strong>Advanced<\/strong>. Make sure the <strong>Custom fields<\/strong> option is toggled. Alternatively, check if theme files include the <strong>get_post_meta() <\/strong>function to display the data.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>WordPress custom fields let you store and display additional information like pricing, product details, or author notes &ndash; all without cluttering your main content. Even better, they can make your site feel more dynamic and personalized. If you&rsquo;re looking to learn more about WordPress custom fields and how to use them, this article will walk [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/uk\/tutorials\/wordpress-custom-fields\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":257,"featured_media":121069,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress custom fields: definition, guide, and use cases","rank_math_description":"WordPress custom fields let you add extra information beyond the post or page\u2019s default metadata. Learn how you can use them in this tutorial.","rank_math_focus_keyword":"wordpress custom fields","footnotes":""},"categories":[22639,22633],"tags":[],"class_list":["post-10815","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/custom-field-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-custom-fields","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/niestandardowe-pola-w-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/wordpress-custom-fields\/","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-custom-fields","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/campos-personalizados-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/campos-personalizados-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-custom-fields","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-custom-fields","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/10815","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/users\/257"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/comments?post=10815"}],"version-history":[{"count":33,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/10815\/revisions"}],"predecessor-version":[{"id":126773,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/10815\/revisions\/126773"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/media\/121069"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/media?parent=10815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/categories?post=10815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/tags?post=10815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}