![\"How](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/how-to-make-a-website-cover-screenshot.png\")
<\/a><\/figure><\/div>In some cases, however, you need to add metadata that WordPress doesn’t support out of the box – this is where custom fields come in handy. WordPress custom fields are a feature that inputs additional information to a post or a page.<\/p>
Custom fields give you a way to enter that data and extend the information on your content:<\/p>
- \n
- Flexible and customizable<\/strong>. Custom fields are made of code snippets, allowing you to customize and control their placements on your site’s front-end.<\/li>\n\n\n\n
- Easier input and update<\/strong>. If you want to update the information displayed on your posts, simply modify the custom fields instead of editing each post individually.<\/li>\n\n\n\n
- Consistent<\/strong>. Custom fields ensure all of your posts display the same information in the same formatting.<\/li>\n<\/ul>
Finally, it is important to note the difference between custom fields and custom post types<\/a>.<\/p>
A custom post type is a specially formatted kind of content, such as review posts or product pages. In many cases, people add custom fields to their custom post templates<\/a>, but you can also use them separately.<\/p>
How to Add WordPress Custom Fields to Your Posts and Pages<\/h2>
In the following section, we’ll help you create your own custom fields using two different methods.<\/p>
The first method involves installing a dedicated plugin to simplify the process. The second one requires that you manually edit your WordPress theme files.<\/p>
Use the Advanced Custom Fields Plugin<\/h3>
There are a lot of plugins to help you quickly add WordPress custom fields. The most popular one is Advanced Custom Fields (ACF)<\/a>.<\/p>
\n![\"Advanced](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/acf-plugin-1024x466.png\")
<\/a><\/figure><\/div>It comes with an easy-to-use user interface that allows you to add 30 custom field types with only a few clicks. To get started, you need to install the plugin<\/a> and activate it.<\/p>
Go to your dashboard and into the Plugins <\/strong>→ Add New <\/strong>tab. Once you’re there, use the search bar to look for Advanced Custom Fields<\/strong>.<\/p>
\n![\"Add](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/install-acf-plugin-1024x260.png\")
<\/a><\/figure><\/div>Go ahead and click the Install Now <\/strong>button. Wait until the text changes to Activate<\/strong>, then click on it once more.<\/p>
Once Advanced Custom Fields is up and running, you’ll see a new Custom Fields <\/strong>tab appear in your dashboard. Clicking on it will reveal a list of custom field groups, which should be empty.<\/p>
\n![\"Custom](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-tab-1024x424.png\")
<\/a><\/figure><\/div>To set up a field group, simply click on the Add<\/strong> New <\/strong>button at the top of the screen.<\/p>
Continue by clicking on the Add Field <\/strong>button. Pick a label for your new field that will also serve as its name. You also need to choose what type of field you want to set up – some of the options include text, checkbox, and email.<\/p>
\n![\"Add](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/add-field-1024x537.png\")
<\/a><\/figure><\/div>For this example, we’re going to create an Email <\/strong>field to collect every author’s email address.<\/p>
\n![\"Form](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/email-field-1024x196.png\")
<\/a><\/figure><\/div>To write a set of instructions, simply fill in the provided field. For example, you can add “Please fill out your email address before publishing your post.”<\/p>
Although this step isn’t necessary, it helps other administrators on the website know what to do with the custom field.<\/p>
\n![\"Field](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/field-instructions-1024x348.png\")
<\/a><\/figure><\/div>Moving on, you’ll also need to indicate whether this is a required field or not. This way, it will not be possible to save posts or pages without filling it out.<\/p>
\n![\"Toggle](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/required-field-1024x349.png\")
<\/a><\/figure><\/div>There are a few other advanced settings<\/a> you can adjust if needed. Once the basic properties are filled out, scroll down to locate the Close Field <\/strong>button.<\/p>
\n![\"Close](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/close-field-1024x218.png\")
<\/a><\/figure><\/div>Clicking on it will automatically add your custom field group to the list. To add more custom fields, simply choose the Add Field<\/strong> button and repeat the process.<\/p>
\n![\"List](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/field-group-list-1024x372.png\")
<\/a><\/figure><\/div>Once you have created your custom field groups, you’ll need to configure where these custom field groups will show up by customizing the Location <\/strong>settings.<\/p>
There’s an option labeled Show this field group if<\/strong> that you can use to configure the display options.<\/p>
In this example, we configured the custom field to show up on regular posts. If you want, you can add more than one location to display your custom field using the Add rule group <\/strong>button.<\/p>
\n![Add rule group section, highlighting the option \"Show this field group if\"](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/add-rule-1024x575.png\")
<\/a><\/figure><\/div>Finally, hit the Publish <\/strong>button to save your new custom field.<\/p>
When your field is ready to go, open the WordPress post editor. The custom field will show up right under the text editor.<\/p>
\n![\"Custom](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-field-1024x532.png\")
<\/a><\/figure><\/div>Keep in mind that you can’t use Advanced Custom Fields to display custom fields for website visitors – the custom field will only show up in your dashboard.<\/p>
If you want to display the custom fields on the site’s front-end, you’ll need to edit the theme file. We will walk you through this process later in the article.<\/p>
Other Custom Field Plugins<\/h3>
If you’re looking for a plugin that offers more options than Advanced Custom Fields, we listed three alternatives to help you find a tool that better suits your website needs.<\/p>
1. Meta Box<\/a><\/p>
\n![\"Meta](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/meta-box-1024x498.png\")
<\/a><\/figure><\/div>With Meta Box, enable custom fields in WordPress posts, pages, and forms. It supports up to 40 custom fields, from text lists and check-boxes to images and user fields.<\/p>
It provides free extensions<\/a>, allowing you to add custom fields in the comments and Yoast SEO<\/a> to improve your content’s SEO scores. The plugin also integrates with WordPress page builders<\/a> like Beaver Builder<\/strong>.<\/p>
Additionally, Meta Box offers both free<\/strong> and premium versions.<\/p>
With its premium version, starting at $99\/year<\/strong>, you’ll get access to its meta box builder. This feature lets you add WordPress custom fields using an easy-to-use drag-and-drop interface.<\/p>
[PRICING<\/a> \/ DOWNLOAD<\/a>]<\/p>
2. Custom Fields Suite<\/a><\/p>
![\"Custom](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-fields-suite-1024x136.png\")
<\/a><\/figure>Custom Fields Suite offers a lightweight and straightforward solution to enable custom fields in WordPress websites.<\/p>
This free<\/strong> plugin supports 14 field types, including loop, tab, WYSIWYG<\/a>, date, and true\/false. You can add custom fields to your WordPress post, page, and custom post types.<\/p>
Use the plugin to create custom field groups and display them on the post editor. With the placement rules box, you can also decide where the field group will appear. For instance, it’s possible to place it above or below the text editor.<\/p>
The only downside of Custom Fields Suite is that it doesn’t have a customer support team. However, it provides documentation<\/a> that you can access for more information about the plugin.<\/p>
3. Pods<\/a><\/p>
\n![\"Pods](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/pods-1024x326.png\")
<\/a><\/figure><\/div>Pods manages all custom content in a simple and clean interface. This makes it easier to add custom fields to your posts, pages, or any custom content types.<\/p>
Use the plugin’s shortcodes, widgets, or templates to display the fields anywhere on the site. Pods also comes with default custom field types, but it’s possible to create new types according to your needs.<\/p>
Pods integrates well with other WordPress plugins such as Polylang<\/strong>, Beaver Builder<\/strong>, and Gravity Forms<\/strong>. Moreover, it is equipped with extensive documentation<\/a> and live chat support<\/a> to guide users and solve any issues.<\/p>
[DOWNLOAD<\/a>]<\/p>
Add WordPress Custom Post Fields Manually and Edit Your Theme to Display Them<\/h3>
By default, the custom fields option is hidden in WordPress. To enable this feature, access your page or post editor.<\/p>
Locate the Screen Options<\/strong> button on the right corner of your screen, and check the Custom Fields <\/strong>box.<\/p>
\n![\"Screen](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/screen-options-1024x268.png\")
<\/a><\/figure><\/div>This will make a new dialog box appear below the content editor.<\/p>
\n![\"Custom](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/dialog-box-1024x243.png\")
<\/a><\/figure><\/div>You can enter the custom field data using key\/value pairs. The key<\/strong> refers to the name of your custom field, while the value<\/strong> is the information you want to display.<\/p>
For example, we want to add a disclaimer to a sponsored post. So, we set Sponsored<\/strong> as the name and fill out Yes<\/strong> or No<\/strong> in the value box to show if the post was sponsored or not.<\/p>
\n![\"Adding](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/custom-field-data-1024x228.png\")
<\/a><\/figure><\/div>Hit the Add Custom Field <\/strong>button at the bottom of the box to save it.<\/p>
However, the process doesn’t end there. WordPress only keeps custom field values on the back-end. To display the information on the front-end of the site, you need to edit the theme files<\/a>.<\/p>
There are several options to edit your theme files – through your admin dashboard, connecting to an FTP, or using Hostinger’s File Manager<\/a>.<\/p>
Regardless of the method you choose, we recommend using a child theme<\/a> to experiment freely without damaging the theme during the process.<\/p>
In this tutorial, we will show you how to access the files directly from the WordPress dashboard. Proceed to Appearance <\/strong>→ Theme Editor<\/strong>, then locate the single.php <\/strong>file.<\/p>
\n![\"Theme](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/single-php-file-1024x510.png\")
<\/a><\/figure><\/div>Below is an example of a commonly used code to display custom fields:<\/p>
<?php echo get_post_meta($post->ID, 'key', true); ?><\/pre>
Note that the exact code you’ll use may vary depending on the action or information you want to display. However, be sure to change the ‘key’ placeholder<\/strong> with your custom field name.<\/p>
In this example, we want to display a disclaimer message for sponsored posts. Thus, the code should look like this:<\/p>
<?php\n$meta = get_post_meta( get_the_ID(), 'Sponsored Post' );\nif( $meta[0] == 'Yes' ) {\n?>\n<center>This post contains affiliate links. We might earn a commission if you make a purchase using these links.<\/center>>\n<?php } ?><\/pre>What you want to do is add your code in the WordPress loop<\/a>, which is a function that tells WordPress what data it needs to pull up and display when someone views content on your site.<\/p>
A loop code can vary, depending on which theme you’re using. However, here’s what the default WordPress loop looks like:<\/p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>\n<?php endwhile; else: ?>\n<?php endif; ?><\/pre>
When adding a custom field, you are free to control its placement on the site. For instance, to place it at the top of a post, add the code before the following line:<\/p>
while ( have_posts() ) : the_post();<\/pre>
When you’ve successfully added the code to the theme editor, click on the Update File <\/strong>button to save the changes.<\/p>
The code we apply tells WordPress to look for posts with Sponsored Post <\/strong>custom fields and check the value.<\/p>
WordPress will display the disclaimer message if the value is set as Yes<\/strong> since the post is marked as sponsored. Otherwise, it won’t show any additional information or metadata.<\/p>
\n![\"A](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/10\/metadata-example-1024x478.png\")
<\/a><\/figure><\/div>Keep in mind that the example above is one of the WordPress custom fields’ basic functions. To apply more complex actions, you will need to do some extra coding.<\/p>
Below are several template tags you can use to customize the custom fields function on your website:<\/p>
- \n
- the_meta() <\/a>– also known as post-meta, this tag displays a list of post custom fields.<\/li>\n\n\n\n
- get_post_custom()<\/a> and get_post_meta()<\/a> – retrieves a single or multiple metadata of a post.<\/li>\n\n\n\n
- get_post_custom_values()<\/a> – fetches the values of a custom post field.<\/li>\n<\/ul>
![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\")
<\/a><\/figure>Conclusion<\/h2>
WordPress is equipped with advanced features like custom fields to enable users to add extra information to a post or a page, from disclaimers to images and checkboxes.<\/p>
The WordPress built-in custom field functionality is hidden by default, so we’ve included steps on how to enable it.<\/p>
In addition to that, we have also covered the steps of creating and using custom fields in WordPress:<\/p>
- \n
- By installing the Advanced Custom Fields Plugin<\/strong> or any of the other three plugins suggested on the website.<\/li>\n\n\n\n
- Manually editing your theme’s single.php<\/strong> file.<\/li>\n<\/ol>
The native WordPress custom field feature might not be the most user-friendly technique. For this reason, we’ve included the option of using custom fields plugins to simplify the process.<\/p>
We hope this guide has helped you understand how to apply and display your custom fields on WordPress websites. Feel free to leave questions in the comments section below.<\/p>
\n\n\n
\nLearn Other Advanced WordPress Techniques<\/h4>\n
How to Create a Shortcode in WordPress<\/a>
\nHow to Speed Up WordPress<\/a>
\nHow to Remove Sidebar in WordPress<\/a>
\nHow to Use WordPress Icon Fonts<\/a>
\nWordPress A\/B Testing Guide<\/a>
\nHow to Create a Staging Environment in WordPress<\/a><\/p>\n <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"As one of the most popular content management systems (CMS), WordPress is widely known for its various functions and customization options. One such option is expanding metadata, which refers to key information of a page or post, including author names, titles, and descriptions. Users can include additional metadata by enabling custom fields in WordPress, extending […]<\/p>\n
- Manually editing your theme’s single.php<\/strong> file.<\/li>\n<\/ol>
- get_post_custom()<\/a> and get_post_meta()<\/a> – retrieves a single or multiple metadata of a post.<\/li>\n\n\n\n
- Easier input and update<\/strong>. If you want to update the information displayed on your posts, simply modify the custom fields instead of editing each post individually.<\/li>\n\n\n\n