WordPress Development

WordPress Plugin Highlight: Advanced Custom Fields (ACF)

February 8, 2017

Our clients often come to us in need of a custom hero (a section of a website, traditionally placed at the top of the page, that contains key content) with the flexibility to easily switch out content.

Now, you are probably thinking, can’t the WordPress WYSIWYG editor do that? Or, better yet, what about a shortcode? Yes, both of those solutions can accomplish this; but, both also tend to be error prone, especially when introducing HTML markup.

Thankfully, the Advanced Custom Fields (ACF) plugin makes this task far more manageable for our clients. I discovered the ACF plugin early in my WordPress career and haven’t found another custom fields plugin that comes close in terms of modularity and ability to integrate with many other plugins. I recommend using it for every WordPress install you develop.

What is ACF (Advanced Custom Fields)?

Advanced Custom Fields is a WordPress plugin that acts as a Graphical User Interface (GUI) layer for custom fields. Custom fields are native to WP and appear on pages, posts and custom post types, however the native interface is not particularly user-friendly. ACF allows you to extend WP and develop dynamic custom fields for your templates and custom post types.

Free vs. Pro

The ACF plugin has two different versions, a free version and a paid version (Pro). The free version is available for download on the WordPress plugin repository. It comes with everything you need to get started adding custom fields to your WordPress site. Out of the box you get over 20 different field types to choose from. Some of the most notable ones include:

  • Text
  • WYSIWYG Editor
  • Image
  • Google Map
  • Color Picker

The free version helps solve many problems of adding custom fields into WordPress, but misses two key features that the Pro version solves: Repeater Fields and Flexible Content fields. These two features allow you to build a complex, intuitive experience for your WordPress back-end.

Fresh holds the rights to ACF developer licenses, which benefits our clients because the ACF Pro plugin is installed on every WordPress site we manage, free of charge.

Basic Setup

Our client Tempered Networks came to us wanting a custom, editable hero on their About Us page (Figure 1). Using ACF, we were able to predefine fields that would allow the client the flexibility to switch out content without using a WYSIWYG editor. Here’s how.

Tempered Networks editable hero

Figure 1

To start, once the plugin is installed, navigate to the new Custom Fields item in the WordPress menu. From here, click Add New (Figure 2).

Custom fields in WordPress menu

Figure 2

Below (Figure 3), leverage ACF to define each individual field and select a type for the About Us hero. In this particular example, we used an Image, Text, and URL field; but, as I said earlier, there are over 20 different field types you can use when creating with Advanced Custom Fields.

ACF in individual fields

Figure 3

With the fields defined, you now need to specify where these fields will live within WordPress. For the Tempered Networks case, we wanted the hero fields to be only on the About Us page, so we set up a rule to define the location as the About Page. After saving, ACF will read the specified location and place the fields only on that page/those pages (Figure 4). In this particular situation, we are pointing to a specific page, but there are many other useful location options you can target such as post types, page templates, and more.

Define location rule

Figure 4

The next step before hopping into the code is to supply data for these newly created fields. Since we defined our ACF fields as equal to the About page, when navigating to edit the About page in the WordPress back-end, we see these available fields (Figure 5).

available fields in ACF

Figure 5

Adding Code

Once the fields are created, a location has been specified, and data is filled out, you can finally move into code.

Using the ACF functions get_field($field_name, $post_id, $format_value) and the_field($field_name, $post_id, $format_value), specify in your code which field you want to call by looking back at Figure 2 under the “Name” row. So, if you want to call the Background Image, use get_field(), which will provide all the data related to that input field. For an image input, you will receive an array that includes all the available sizes in WordPress of the uploaded image. Below, store the large image URL as a variable that you then echo in your markup.

Copy

<?php
    $about_background_image = get_field( 'about_background_image' )['sizes']['large'];
?>
<section class="hero" style="background-image: url('<?php echo $about_background_image; ?>')">
    ...
</section>

 

For the Main Header, use the_field() which echoes your defined field:

Copy

<h1><?php the_field('about_main_header'); ?></h1>

 

This works for this particular field because the Main Header has been specified as a required field and will always need to be filled out. The Sub Header, on the other hand, is an optional field; therefore, you need to account for it not being filled in. To do this, use the get_field() function to create a conditional and check if it exists:

Copy

<?php if( get_field( 'about_sub_header' ) ): ?>
    <h3><?php the_field( 'about_sub_header' ); ?></h3>
<?php endif; ?>

 

With the main and subheader in place, it’s time to tackle the button.

Copy

<?php if( get_field( 'about_cta_url' ) && get_field( 'about_cta_text' ) ): ?>
    <a href="<?php the_field( 'about_cta_url' ); ?>" class="btn btn-primary"><?php the_field( 'about_cta_text' ); ?></a>
<?php endif; ?>

 

Now, let’s take a look at everything combined to see the final results. Notice that we have additional markup in our example that handles some formatting of the hero section. This will differ depending upon what your particular layout design calls for.

Copy

<?php
    $about_background_image = get_field( 'about_background_image' )['sizes']['large'];
?>
<section class="hero" style="background-image: url('<?php echo $about_background_image; ?>')">
    <div class="container">
        <h1><?php the_field('about_main_header'); ?></h1>
        <?php if( get_field( 'about_sub_header' ) ): ?>
            <h3><?php the_field( 'about_sub_header' ); ?></h3>
        <?php endif; ?>
        <?php if( get_field( 'about_cta_url' ) && get_field( 'about_cta_text' ) ): ?>
            <a href="<?php the_field( 'about_cta_url' ); ?>" class="btn btn-primary"><?php the_field( 'about_cta_text' ); ?></a>
        <?php endif; ?>
    </div>
</section>

 

Now, you have a flexible hero that can easily be edited as needed.

editable hero example

 

Conclusion

This is a pretty basic example of how the ACF plugin can be used. As you dive deeper into ACF, you will find intuitive features such as repeater fields and flexible content fields which allow for endless possibilities in customizing the way your clients input data on their sites.

Are you using ACF? Let us know your favorite aspect of the plugin in the comments.

Chris Allen

Front-End Developer

Chris believes the web is a wonderful place for learning, creating, and sharing. As a front-end developer, he uses his knowledge and skills of various programming languages and web standards in hopes to help provide an user-friendly web experience.

Unless otherwise specified, source code in this post is licensed under a
Creative Commons Attribution 4.0 International license (CC BY 4.0).

You might also like...

18

Jul.

Eastside WordPress Developers Recap

Thanks to everyone who made it out to the first Eastside WordPress Developers Meetup! It was a great success with informative talks given by Steve Hulet, Fresh Co-Founder and CTO, and Andrew Villeneuve, WordPress security consultant and organizer of the Seattle WordPress Meetup. In case you missed it, here’s a quick recap plus SlideShare links … Continued

16

Jun.

My Favorite WordPress CLI Commands

The WordPress Command Line Interface (WP-CLI) is one of my favorite tools for working with WordPress sites. The WP-CLI gives me quick and direct access to many common WordPress management tasks. While there are many great tutorials on how to install and use WP-CLI I wanted to share a few of the commands I use … Continued

19

May.

A Fresh Launch

In the wee hours of February 15th, our office hummed with activity: last-minute design tweaks, another edit, one more proofread, furious coding. The President’s Day holiday was traded for unlimited coffee and extra time off later so that we could stick to our deadline. All hands on deck – hours of hard work – willing … Continued