A Quick Guide to Advanced Custom Fields

Advanced Custom Fields is a very useful WordPress plugin that allows to create customizable posts & pages.

I’ve been using WordPress for many years to run my own websites, as well as to build custom ones for clients. It’s a great content management system and is usually totally usable straight out of the box. However, sometimes it gets hard to customize certain things. That’s when ACF comes into play.

I like to think of ACF as building blocks of the site

So what is ACF?

ACF (short for Advanced Custom Fields) is a free WordPress plugin (there’s also a more advanced paid version). It can be very useful when you need to display something on the page besides the standard WordPress stuff. For example, when you create a page, it probably looks kinda like this:

There’s not much custom functionality here, besides the ability to set a featured image. What if you wanted to make the page background a custom color? Or add in a slider? Or make your content split into several columns?

You could download a new plugin for each one of those tasks, but that would make your WordPress bloated and possibly insecure. Shortcodes could help you achieve some of these things, but it’s usually a nightmare to create them and keep track (especially if you’re developing a theme for a client). It’s almost always a better idea to just use one plugin for all of your customization needs (you guessed it, it’s ACF).

How to install?

The installation process is no different from any other plugin — just download it from the official site and place it into wp-content/plugins folder. After that, head over to the Plugins page in the admin area, and activate the plugin. You’re going to notice a new menu item in the admin sidebar called Custom Fields. Click on that, and you’re in!

An empty custom fields page

Making Fields

The first thing you will need to do is to set up a field group. It’s just an easy way to group related fields together. For example, if you have a contact page, you can make a group named Contact and put all your fields in there. In this example, I am going to create a group named Posts and add a custom text field that will show up on my single posts and will add a custom class to the page body.

After setting up a group, you can start adding fields to it. The official website has a pretty good write-up on it. Each field needs to have a label (a title that will appear in the editor), a name (a variable that will be used in PHP), and a type (basically describing what kind of field this is going to be).

Adding a field

In this example, I am going to make a text field, since all I want is for a string to be spit out into the source code. I will label it “Custom Class” and will name the variable custom_class.

Adding a field

After you finish adding your fields to the group, you will need to specify which pages/posts/etc they will be shown at. Scroll down to the Location box and create a set of rules.

Specifying a location

In the example above, I’m going to have my field shown when editing any posts. After saving the settings, go to any single post page, and there it is! A custom text field that you can fill out when making new posts.

A custom text field

Adding fields to the theme

We’re almost there! All we have left to do is add the code to the theme’s PHP files. First, let’s make a new variable that is equal to the custom field name:
 
<?php
$custom_class = get_field( 'custom_class' );
?>

 
After that, we need to check if the variable exists, and if so, display it in the right place. In the code below, I’m going add our custom class to the content wrapper div.
 
<div id="content" class="<?php if ($custom_class) { echo $custom_class; } ?>">

And there it is! Now, you can go your CSS file and add whatever you want to happen when hello-worldclass is added to the page.

Conclusion

I hope you found this quick guide useful! This was a very simple example of what Advanced Custom Fields can be used for. If you are planning to seriously get into it, I would suggest to purchase a license for a Pro version (you get some really useful fields, such as the repeater field and flexible content).

Further reading

Official website


Dan Strogiy is a designer at Bonfire and lives in Richmond, VA. See more of his stuff on Twitter and Instagram.