Custom Fields in WordPress with Advanced Custom Fields – Once you created a custom post type and taxonomy, it is time to add some special fields to it, and further customize WordPress to fit your needs. These custom fields in WordPress help you build new functionality to your site by creating populating different field types in the admin panel. What type of field types? From text, textarea, checkbox, radio and select, all the way to files, images, galleries and color pickers.

Once you have these fields tied up to your custom post type, and you insert some values, you can easily display them in front-end pages. For instance, we can create a custom price and discount text fields for our post type, and then, display them anywhere we like in our template. Let’s see how we can do this using one of the best rated plugins in the WordPress directory — Advanced Custom Fields.

1. Advanced Custom Fields Introduction

Advanced Custom Fields is a free plugin for visually creating and managing custom fields in WordPress. Moreover, it is a framework with great plugins (add-ons), documentation and community. ACF has a really simple and powerful API with functions for everything you’d possibly need, in order to manipulate the custom fields and their values. Each of these functions are explained in detail and demonstrated with an easy-to-follow examples.

To install the plugin, follow this link. Once you activate the plugin, visit ACF’s page in the admin panel.

2. Creating Custom Fields

Go to Custom Fields, and click on Add New to create a new field group. Let’s name the field group Reviews CPT — the name of a custom post type we created in one of the previous articles. Now, we can start adding custom fields to it. For starters, we’ll create two fields: price and discount. Click on the +Add Field button, and set the values as follows:

• Field Label (required), is the name that will appear in the post edit page. We can set it to Price.
• Field Name (required), is the “slug” that must be a single word with no spaces. Dashes and underscores are allowed. This is the name we’ll use to access this field’s value in the front end. Let’s set this to review-item-price.
• Field Type (required), is one of the field types we mentioned in the intro of the article. You have a lot of choices here, so pick accordingly. For this example, we will set the field type to number.
• Field Instructions (optional), is the description box that will help authors who submit data into the fields. Set it to something like: Here goes the price of the item that’s being reviewed.

As you choose different field types, additional options will be displayed to further customize your field. For example, if you pick a text field type, you can specify stuff like default value, prepend, append and character limit.

Repeat the same process to create the discount custom field. You can set its type to text, and slug to review-item-discount.

Once finished with the second field, we can let ACF know which custom post type we want to link with these fields. This is the location box. Use the following logic:

Show this field group if: Post Type is equal to reviews.

This will make the custom fields accessible only in our reviews post type, when we’re trying to add a new article.

The final step is to click Publish, visit the Reviews section on the admin panel and click on Add New Review (or Add New). Once you do this, you will notice the 2 fields in the bottom — right bellow the WYSIWYG editor. Create a review with these values and publish it.

3. Displaying Custom Fields

There are million things you can do with these fields, but for the sake of just getting started with ACF, let’s just display them on the single post page.

Navigate to your theme files, and if you haven’t already, create a single-reviews.php file (single-{post_type_name}.php). This will be a custom template file specifically for the reviews post type, and the place where we display our custom fields.

Why not use the already existing single.php? Because this template file applies to every post type on our website. Remember that we specified in the plugin to only show the fields in our reviews CPT. When you open a regular post type, the values won’t show up.

Copy all the contents of single.php into single-reviews.php. Then, in single-reviews.php add the following code, 1 line upper from the_content() function:

<?php if (get_field(‘price)): ?>

Item price: <?php the_field(‘price)); ?>

<?php endif;?>

The get_field() function will return the value of the specified field. This is good, because we can check whether a value is defined, before we try to display it. If the field doesn’t have a value, the function will return a false, and the if statement won’t execute. At the end, the_field() simply echoes the field in a h2 tag. You can repeat the same process for the discount field.

When you visit your article, you should see a Price: $600 and Discount: 20% (or whatever values you put) before the review content. Pretty powerful, isn’t it!