How to Use Custom Fields in WordPress
When reading various WordPress tutorials, you may have come across a term called custom fields. You know it brings some additional features to WordPress, but you don’t know how to use it.
If that is the case, you have come to the right place. Our today’s article will introduce you to WordPress custom fields and show you how to use these on your website. Let’s get started with a short definition of custom fields.
What are Custom Fields?
Custom fields allow you to show additional information along with your regular content. Since you can customize the fields for your own purpose, they are called custom fields.
When you publish a blog post, WordPress saves some additional data like the post title, author name, date, time, etc. While these are collected by default, you can gather more data by creating custom fields.
There is a built-in solution to create custom fields right from the post editor, but it is hidden from the view. To use this option, open up the “Screen Options” panel from the top-right corner of the screen, and check the “Custom Fields” box.
Close the “Screen Options” panel, and you will notice a new section right after the post editor, where you can add new custom fields.
You can add any type of custom field from this section. But you need to edit your theme files to display the data from these fields. That is why we suggest you to use a plugin to create and display the custom fields. Let’s find out how to do that.
How to Add Custom Fields to Your Site?
While there are lots of plugins available for the job, we will use Advanced Custom Fields to add custom fields to our website. Install and activate the plugin on your site, and it will add a new menu item titled “Custom Fields” to the dashboard menu.
The first step in creating the custom field is to create a field group. A group can include multiple custom fields. You can add as many groups as you want and set up different style, position, and visibility options for these.
To get started, click on the “Custom Fields” menu, and click “Add New.” This will take you to a page like the following –
Provide a title for your field group. Then, click the “+Add Field” button to create a new custom field. This will bring the field editing options –
First of all, provide a label and name for the custom field. Among these, the label will be displayed in the post editor.
Then, choose the field type. You can create different types of custom fields including text, number, email, password, textarea, image, file, checkbox, radio, select, date, color, etc.
“Field Instructions” allows you to provide a hint to the visitor about how to use the custom field. This will be displayed in the post editor right after the field title. The next option enables you to mark the custom field as required or not.
The next few options will depend on your chosen field type. For instance, when creating a text field, you will find options to provide the default value, placeholder, appending, and prepending text. For a number field, you will also find separate options to set up the minimum and maximum value.
Once you have chosen the field type and set up the necessary options, click “Close Field” to save and close the custom field. You can create more fields by clicking the “+Add Field” button and repeating the steps described above.
It is also possible to drag and drop the custom fields inside a group to set their position. The fields will be displayed in the same position as you set them here.
Now that you have created the necessary custom fields, let’s see how to configure their display options.
How to Set Up the Display Options?
You will find two sections to set up the display options for your field group –
- Location and
- Options.
In “Locations,” you can choose when to show the field group depending on the post type, user type, category, post status, taxonomies, page, page type, page template, attachment, etc. You can add multiple rules by clicking the “Add rule group” button.
“Options” allows you to control the other display options. First of all, “Order No.” will come in handy if you want to display multiple field groups in the same content. In that case, the group with lower order no. will be displayed first, followed by the next order no., and so on.
In “Position,” you can choose where to display the field group. You have three options here –
- Normal: Display after the post editor.
- High: Display after the post title.
- Side: Display on the sidebar.
“Style” allows you to choose the display style for your custom fields. You can choose to use the default metabox style or don’t use any style at all.
Lastly, “Hide on screen” allows you to hide any of the regular metaboxes from the post editor. For instance, if you don’t use the excerpt section, you can check the “excerpt” box, and it will be hidden from the post editor.
Once you have configured all the necessary options for your field group, click “Publish.” From now on, the custom fields of that group will be displayed on your chosen type of content.
How to Display the Custom Fields?
Advanced Custom Fields comes with a dedicated shortcode to help you display the data from custom fields on your website. And here is the shortcode –
[acf field="field_name" post_id="post_id"]
Here, you have to replace the “field_name” and “post_id” with your own information. Between these, field_name is the name you provided while creating the custom field. And post_id is the id of the content from where the custom field is displayed.
To find out the post id, go to Posts > All Posts, and hover over the desired post. You will find the post id in the URL displayed at the bottom of the browser.
For instance, let’s say you have created a custom field with the name “contact,” and the post id is 366. In that case, you should use the following shortcode –
[acf field="contact" post_id="366"]
Final Words
Using custom fields is an excellent way to gather and display additional data on your WordPress site. Now that you have read this detailed tutorial, you should have a clear idea about how to use custom fields. However, if you still have any confusion, let me know by leaving a comment below. I will try my best to clear your confusions.
