Advanced Custom Fields in WordPress: The Beginner's Guide

Anna Fitzgerald
Anna Fitzgerald

Published:

WordPress is known for being easy to use and extensible, which makes it a good fit for beginners and more advanced users. One feature that will provide you more control over your content is advanced custom fields in WordPress.

advanced custom fields wordpress: laptop shows wordpress image and custom fields icon on the side

One feature that will provide you more control over your content is custom fields. Using custom fields, you can add structured data to enrich your posts and pages. If you want an even easier interface with more options to add custom fields to your WordPress site, then you can use the Advanced Custom Fields (ACF) plugin.

In this post, we’ll cover both the built-in functionality for WordPress custom fields and the popular ACF plugin. Feel free to use the following jump links to navigate the article or scroll:

Grow Your Business With HubSpot's Tools for WordPress Websites

WordPress Custom Fields

WordPress custom fields can be assigned to a post or page to provide arbitrary extra information known as metadata. Metadata is handled with key/value pairs, in which the key is the name of the metadata element and the value is the information that will appear in the metadata list on the post.

Below are some examples of WordPress custom fields:

  • Mood: Inspired
  • Currently Reading: And Still I Rise
  • Listening To: Calm Down
  • Weather: Partly Cloudy

If you’d like to add this type of structured data to your posts and pages, then check out the process for adding custom fields in your WordPress dashboard below.

How to Use Custom Fields in WordPress

Below is how to use custom fields in WordPress for the first time. If you or another user has already used custom fields on a WordPress website, then the process will vary slightly.

  • Log in to your WordPress dashboard.
  • Navigate to a post or page. You can create a new one, or edit an existing one.
  • Click the three dots button at the top of the right sidebar.

How to Use Custom Fields in WordPress: Click the Options icon

  • Scroll down and click Preferences.

How to Use Custom Fields in WordPress: Click Preferences

  • A new window will pop up. Click Panels.

How to Use Custom Fields in WordPress: Click Panels

  • Toggle the button for Custom Fields. This will automatically reload the page.

How to Use Custom Fields in WordPress: Toggle on Custom Fields

  • Now scroll down to the bottom of the post to the section labelled Custom Fields.

How to Use Custom Fields in WordPress: Scroll to Custom Fields

  • To create a new Custom Field, fill in the text entry field titled Name. This will be the “key.”
  • Now fill in the text entry field titled Value. This will be the value assigned to the key.

How to Use Custom Fields in WordPress: fill in name and value text fields

  • Click the Add Custom Field button to save this metadata for that post.
  • You can continue adding custom fields. When you’re ready, click Update.

How to Use Custom Fields in WordPress: click update

  • If you create or edit another post or page, then you will already see the Custom Fields section. The Name, or Key, field will now be a drop-down list featuring the previously entered Custom Fields.

Name field as drop-down list featuring the previously entered Custom Fields in wordpress dashboard

While this process is not difficult, it’s not the most user-friendly or flexible. For these reasons, many users opt to use the Advanced Custom Fields plugin over the native custom fields functionality in WordPress.

Below let’s take a closer look at what this WordPress plugin is capable of, and how to use it.

Advanced Custom Fields Plugin

Advanced Custom Fields, or ACF, is a plugin designed to enable WordPress developers to have more control over their custom field data. The free version allows users to quickly and easily add 30+ fields all over your WordPress dashboard — including to posts, users, taxonomy terms, media, comments and custom options pages — and display the custom field values in any theme template file.

Supported field types include text (which is the only type supported natively in WordPress), range, button group, checkbox, select, true/false, color picker, date picker, time picker, link, and more. That means you have more control over your custom fields with ACF than with WordPress’s built-in functionality.

Advanced Custom Fields Pro

Advanced Custom Fields Pro is the premium version of ACF. It offers even more fields, functionality, and flexibility than the free version. Here are the pro features below:

Repeater Field

With this field, you can create a set of sub fields which can be repeated again and again.

Advanced custom fields pro: repeater field

ACF Blocks

Using this powerful PHP-based framework, you can develop custom block types for the Gutenberg Editor.

Advanced custom fields pro: ACF blocks

Flexible Content Field

This field provides multiple layout and sub field options that you can use to define, create, and manage content.

Advanced custom fields pro: flexible content field

Gallery Field

With this field, you can build fully customisable image galleries.

Advanced custom fields pro: gallery field

Clone Field

Using this field, you can reuse existing fields and field groups to more efficiently manage field settings.

Advanced custom fields pro: clone field

Options Page Feature

With this feature, you can add custom admin pages to edit ACF fields.

Advanced custom fields pro: options page feature

To understand how to use the Advanced Custom Fields plugin, we’ll walk through how to create and display a set of custom fields on your WordPress posts below.

As an example, let’s say you run an ecommerce website and use your blog to promote popup events. With each blog post, you want to share an event’s:

                          • Date
                          • Start Time
                          • End Time
                          • Location
                          • Image Thumbnail

To do so, you’ll have to add five custom fields. Let’s walk through the process below.

Step 1: Create a field group.

To start, click Custom Fields > Add New from your admin screen. Then give this group a name in the title box.

Skip to Location where you can decide which edit screens will use this group of custom fields. For this example, you want to show this field group on all posts so create a rule that says “Show this field group if Post Type is equal to Post.”

How to Use Advanced Custom Fields: add name and location rule for field group

Now skip down to Settings, where you can select the style, position, label placement, instruction placement, and more of your field group.

How to Use Advanced Custom Fields: Configure settings of field group

Step 2: Add custom fields to that group.

Now it’s time to add the custom fields that will make up this field group, and appear when editing a post.

For each of the five fields you want to add, click the +Add Field button and fill in the field label, name, and type at least.

How to Use Advanced Custom Fields: add custom fields of field group

Once you complete these steps for date, start time, end time, location, and image thumbnail custom fields, then click Publish. The page will automatically re-load.

How to Use Advanced Custom Fields: publish new field group

Step 3: Edit fields in the WordPress post editor.

Now that the field group has been published and set to appear on Post edit screens, you can edit the field values by navigating to Posts > Add New. In this screen, fill in a value for each custom field.

How to Use Advanced Custom Fields: fill in custom fields in WordPress post editor

When you’re done making changes, click Publish.

This information will now be stored in your database. However, it won’t appear on the front end of your site. See how the post appears if you click Preview Changes:

How to Use Advanced Custom Fields: if preview changes, post will display without custom fields

Step 4: Display fields on the front-end of your site.

To display Advanced Custom Fields data on the front end of your site, you can edit your theme’s template files or use a shortcode. Editing a template file requires some technical knowledge, but it’s the most effective and scalable way to display ACF data. Using a shortcode is a simpler method, but much more manual. You’ll have to add a shortcode to every post that you want to display ACF data on the front-end.

For these reasons, we’re going to walk through the process of editing your theme’s template file to display custom fields on the front-end of your site.

Depending on the location you set for your field group and your theme, you’ll either edit the single.php or single-{$post_type}.php file, or use template parts or filters to customize the HTML of your WordPress posts so they display custom fields on the front-end.

This example set the location of the event field group to all posts, then you’ll edit the single.php template and add the following code:


<?php

get_header();
the_post();


// vars
$location = get_field('location');
$thumbnail = get_field('thumbnail');

?>

<div class="wrap">

<div id="event-hero">

<?php if( $location ): ?>
<div id="event-map" class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>


<?php if( $thumbnail ): ?>
<img class="thumbnail" src="<?php echo $thumbnail['url']; ?>" alt="<?php echo $thumbnail['alt']; ?>" />
<?php endif; ?>

<h2><?php the_title(); ?></h2>
<h3><?php the_field('date'); ?> from <?php the_field('start_time'); ?> to <?php the_field('end_time'); ?></h3>
<h4><?php echo $location['address']; ?></h4>

</div>

<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php the_content(); ?>
</main>
</div>

</div>

<?php get_footer(); ?>

Notice how it includes the_field() function to display the value of specific fields, including the date, start time, and end time. It also includes functions for displaying the location and thumbnail fields.

You can go to your Theme Editor, select Single Post, and copy and paste this code before the closing <?php tag. Then click, Update File.

However, it’s recommended that you create a child theme since any modifications you make directly in your theme editor will be lost the next time you update your website. Once created, you’d follow the same process of adding the code snippet above to the single.php file in your child theme’s directory.

When you’re done, go to your post and scroll to the bottom. The result will look something like this on the front end of your site:

WordPress post displaying Advanced custom fields on front end

Now you know how to add and display Advanced Custom Fields data on WordPress posts. To learn how to add and display ACF data on WordPress categories, menus, users, widgets, and other places, check out ACF’s documentation.

Bonus Step: Translate the Custom Fields

After adding the custom fields to your WordPress site, consider translating them for your global visitors. Doing so demonstrates your commitment to ensuring a seamless user experience for visitors who speak various languages.

Translating pages and custom post types on your WordPress site is simple with a multilingual plugin. But once you set up the custom fields on your site, it’s equally important that you can translate the data coming from them. You need a translation plugin that can handle the extra functionality for this. 

Luckily, that’s where ACFML (Advanced Custom Fields Multilingual) comes into play. An add-on for the WPML plugin, ACFML was designed to work with features included in both the free and premium versions of ACF. More importantly, ACFML is beginner-friendly. Thanks to a straightforward user interface and intuitive translation options, adding, editing, and maintaining ACF translations is seamless – no matter your level of expertise. 

Taking Content Editing to the Next Level

The ACF plugin provides more control over the back and front end of your WordPress site. With it, you can add custom fields virtually anywhere in your WordPress dashboard and display them virtually anywhere on the front end. This custom fields data can help enrich your posts, taxonomies, media uploads, and more.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 

Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.

DOWNLOAD THE FREE PLUGIN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO