WordPress is known for being easy-to-use and extensible, which makes it a good fit for beginners and more advanced users. If you fall into the latter category, then you may want to explore and leverage all of the built-in functionality of WordPress.

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. Let’s get started.

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: Someone Like You
  • Weather: Chilly

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 way 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.

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.

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

Originally published Nov 11, 2021 7:00:00 AM, updated November 11 2021

Topics:

WordPress Plugins