When building a website with WordPress, you have the ability to customize both the look and functionality of your site as much (or as little) as you’d like. The idea is that using this open source content management system (CMS) will provide enough flexibility for virtually any type of website.
That’s a lot of potential power placed in your hands. Through the use of themes, plugins and even your own custom code, a WordPress site can be anything: a content hub; a marketplace; a community. If you have the right combination of tools and knowledge, you can make it happen.
For over 1 million websites, Advanced Custom Fields (ACF) has become one of the most trusted tools of the trade. And, while we’re thrilled by that number, we also know that there are many web professionals who haven’t yet tried ACF.
So today we’re going to introduce you to the basics of what ACF is and how it can help you build a better website. Let’s get started!
Advanced Custom Fields is a WordPress plugin that helps you edit complicated content in a simple and logical way. If you’re familiar with WordPress but don’t have much experience with ACF, you may be wondering what all the fuss is about.
By default, the WordPress edit screen is somewhat limited in what it can do (although the upcoming Gutenberg editor looks to change that up a bit). It’s probably best used for a simple blog post with a title, thumbnail and content.
The WordPress visual editor does a good job at allowing rich content editing, but what drives web developers crazy is that the editor doesn’t handle more complicated situations very well. And there really isn’t a way to avoid the potential that a client or colleague will inadvertently break your carefully crafted formatting.
ACF allows you, the developer, to take full control of the WordPress edit screen and tailor the content editing experience around your website’s needs! Using ACF, you can add fields in addition to the WordPress visual editor or choose to hide it completely. Plus, you have a wide array of field types to choose from including text, media, choice, layout and more! Each field can be added, edited or arranged to your liking.
Suppose you are building a website for a client and are given the following design for the home page.
The client would like to periodically make changes to their home page. Specifically, they’ll want to change the full-width “hero” image and the text that goes with it.
Knowing this, we can think about the best way to implement this feature. To do that, let’s list some basic goals:
Now that we have set our goals, it’s time to create our plan of attack. Let’s take a look at our options:
This is the default way to add content in WordPress, but it’s going to take a leap of faith to make this particular feature work. The hero image and text can be entered into the home page through the editor easily enough. But we’ll have to add some CSS classes to the content that will enable things to look the way we want on the front end. It can be done, but there are some problems with this approach:
In short, using the WordPress visual editor leaves too much room for something to go wrong with our editable hero image. This approach depends on our client having to remember extra steps to keep the formatting from going haywire. It’s not a viable solution for the long term.
Using ACF, we can create specific fields that our client can use to safely edit the hero image and text. This gives us the ability to control virtually every aspect of the process. Here is an example to show what we mean:
With this new edit screen, we can:
This ensures that our carefully-crafted layout stays intact while also providing our client with the freedom to make changes.
What’s more, we’ve also created a more intuitive UI inside of WordPress for our client. Instead of having everything inside of a single WYSIWYG editor, each editable piece of content can be separated out into its own field. Each field has its own label and you can also add instructions. This simplifies the process and leaves no doubt in our client’s mind as to how things work.
On the front end of our site, we can create the perfect hero image layout using the data from our custom fields. In this case, we’ll add the following code to our home page template:
<h2><?php the_field('sub_title'); ?></h2>
<h1><?php the_field('title'); ?></h1>
$image = get_field('background');
if( $image ): ?>
background-image: url(<?php echo $image['url']; ?>);
<?php endif; ?>
Combine it with some CSS and you have a stunning layout. The great thing is that this setup requires no extra maintenance on your part. Once you have your fields and layout added to your template – it simply works. Whenever our client decides to make changes, they’re reflected on the front end without any additional work. The results stay professional while the ease-of-use for our client has been dramatically upgraded.
Check out Getting Started with ACF to learn the ins and outs of using the plugin.
The example above is meant to demonstrate how ACF can solve common problems that WordPress developers face. What we were able to achieve with our “Hero area” was twofold:
In a nutshell, this is what ACF excels at. But this example is really just the beginning. We can use ACF for anything from augmenting content (as we did above) or building a completely custom UI to handle specific and complex types of content.
What’s more, using ACF Pro enables even more advanced possibilities – like the ability to create repeatable content that will dynamically display on your site. Once you have mastered the very basics of Advanced Custom Fields, you’ll start imagining all kinds of different ways that it can help you build a better WordPress website.