3 Simple Steps to Create and Display Custom Fields in WordPress

WordPress is famous for its flexibility and availability of plenty of plugins to do the customisations. However, doing customisations is not easy always especially if that involves custom fields. This article will help you add a custom field or multiple custom fields to your WordPress posts or pages and display them properly in your theme. We are making this article as simple as possible so that you can do it by yourself even if you are not a developer.

What is a custom field?

In simple words, custom fields are various input fields which allows you to add various extra items to your blog posts or pages. For example, if you are a travel blogger and you want to display the destination under the blog title, you can do that using a custom field.

How to add a custom field without touching the codes?

Adding a custom field is easy. Obviously, you can add codes for one custom field inside the functions.php file of your WordPress theme but, in this case, we are using Advanced Custom Fileds plugin to create the custom fields.

Why Choose Advanced Custom Fields plugin?

Well, ACF comes with a variety of options and fields. You can create multiple custom fields as well as you can define a condition where to display them. For example, you can create custom fields for a particular category of posts i.e, selecting a specific category will enable those custom fields for you. Not only that, with the Advanced Custom Fields Pro plugin you can create repeater fields which are very helpful if you are using custom coded image sliders in your theme. That repeater filed allows you to add an unlimited number of entries for a single field.

Step 1: Install the ACF Plugin

Okay, coming back to the actual article. Before you jump into adding custom fields to your blog, I strongly recommend you backup your WordPress installation. Now go ahead and install the Advanced Custom Fields plugin and activate it.

Step 2: Create one Custom Field

Creating a custom field is easy using ACF. Navigate to Custom Fields -> Custom Fields. Click the Add New button beside the Field Groups title. You need to add these items

  • Field Group Name: Can be anything
  • After adding a group name, click the Add Field button. Over there put a name for your custom field.
  • Select the field type as Text.
  • You can define whether that field is a Required Field or not.
  • Scroll down and navigate to Locations section. Over there you can define whether the field is for the posts or pages or for any other post types.
  • Finally, scroll to the Options section and select the Position and Style for your custom filed.
  • Now scroll all the way to the top of the page and click Publish.
Add Field Screen

Step 3: Display the Custom Field

In the previous step we have created the custom field and for this tutorial, we will create one text field. Now, this step requires a little bit of coding which is mainly copy and paste job. If you navigate to Custom Fields menu and click on the newly created Field Group, you will find a list of the custom fields you just added. Copy the Field Name for the custom field you want to display and open the desired template file.

  • If you want to display it for pages then edit page.php
  • If you want to display it inside posts then edit single.php
Custom Fields List

Once you have opened the correct template file, find the place where you want to display it. For example, if you want to display the field below the title of your post then you should look for the_title() function and put your custom field’s code somewhere below that function. Here is the code you need to use to display the custom field.

<?php if( get_field('field_name') ){ the_field('field_name'); }?>

The IF part determines whether there is a value set for the custom field, if it contains any values then it display’s the value using the the_field() function. You can wrap the code inside a <p></p> or <div></div> tag for your theme. Replace the field_name with your custom field’s name and save the file.

That’s it. You are done! Now add some posts with the new custom field(s) and see it in action.

If you want to dig into more codes, please visit https://www.advancedcustomfields.com/resources/ for more details on the codes. The above code is the simplest thing you can find to display a text field.

We hope this article has helped you understand the custom fields and add one. Let us know if you have any questions via comments, we will try our best to help you out. 🙂