What you will learn in this article:
- Why and when to use Advanced Custom Fields to create highly editable sites Skip to It Daddy-O
- How to Create the fields within the WordPress admin and associate them with templatesGet To It, Sugar
- How to add Advanced Custom Fields to WordPress templates with five code examplesCome on and Give It to Me
Why and when to use Advanced Custom Fields to create highly editable sites
You may have tried to edit a WordPress website five years ago and found it difficult or cumbersome, and if you had, you might not have realized why. The truth is that WordPress out of the box allows for templates and then a big “Wysiwyg” or “What you see is what you get” editor, but that text area/editor inserts all of the content a web admin enters all in one spot within the template. So the backend template can only show all of that content in one spot, and if you try to put structure within the “Wysiwyg” editor it makes it very easy for something to get broken. Enter “Advanced Custom Fields.” Advanced Custom Fields allow you to give fields to a WordPress admin user and inject the photos or text they enter in those fields super easily wherever you want them into the template. It’s actually incredible, and it makes it way more easy to give clients a website they can have a lot more control over, and create a site that’s not dependent on one big text area, but rather, it uses many bits of content. This is crucial for a better experience for site visitors.
So now you know why. Here’s when to use ACF’s in your template:
Here’s a quick example of ACFs (how I’ll refer to Advanced Custom Fields for the rest of the article) in action within the template so you can calm down about how hard this is going to be:
<?php the_field('field_name'); ?>
And creating the fields – of many types – is all done within the WordPress admin, and you add them conditionally to certain page and post types as you need them.
Some example use cases of ACF in a site:
You can use ACF’s for almost anything in a WordPress site, but let me give you some quick examples. You can use them for an image on the home page and place it exactly where you want within your code structure/template, text areas, color pickers for backgrounds and background images, and you can use them as a “repeater” or flexible content field. This will give the people adding and editing content to the WordPress site as much or as little control over the site as will make sense for them.
How to Create the fields within the WordPress admin and associating them with templates
I suggest getting started by learning how to define custom post types without installing a plugin to handle them because they’re fairly easy to do – but I’m not saying you have to do it that way every time. Many people like to have as much control over structural elements like this as possible, which means defining them manually so someone else’s plugin doesn’t hold all the control over their site unnecessarily.
Install the WordPress Advanced Custom Field’s plugin:
You can find the basic (still highly functional) version of Advanced Custom Fields here.
If you are going to be developing any sites that could really use a lot of edibility from the people that would be adding and updating content on a regular basis, I’d suggest getting the premium version – Advanced Custom Fields Pro. It really depends on what you need though. Because the fields will transfer over to Pro if you ever have to switch, I might consider waiting until you need a feature of Pro and buying it then. The repeater field, gallery field, flexible content fields and options pages are all elements of Pro that I’d rather not do without as they are glorious.
So anyways, download and install or go to Plugins > “Add New” in the WordPress admin to get the free version of Advanced Custom Fields, press “Install Now” and activate ACF.
Add the fields you want to give to the WordPress admin user to easily edit:
Once you have the plugin installed and activated, go to “Custom Fields” on the right menu in the WordPress admin and “Add New” field group. Once you have a new group added, you can start adding the types of fields you’ll want to make easy for the people who will be adding content to the site. For instance, in the picture below I’m adding an image field called “Mobile Screenshot.”
Now for simple images you’ll want to make sure “Image URL” is selected unless you want to use the more complicated ACF loop, which allows for alt text, etc.
Add the The Advanced Custom Field to your template:
The usage for this simple way of adding an image with image URL looks like this in the template:
<img src="<?php the_field('mobile_screenshot') ?>" alt="Mobile Screenshot for Portfolio Project" />
You can also use the full image with the preferred alt text by choosing “Image Array” from the ACF menu, then add the image to the template this way:
<?php $image = get_field('mobile_screenshot'); if( !empty($image) ): ?> <img src="<?php keyword">echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <?php endif; ?>
How to add Advanced Custom Fields to WordPress templates, with five more examples
Just to clarify, each of these fields needs to placed among other code within the template you are editing. It can be within the loop on a post listing page, or a custom post type listing page, on your home, about or contact page, or any type of page or post content. You just need to make sure that you choose to allow this type of Advanced Custom Field on that page, so admins can see them and choose what they want. Here’s where you choose what pages or post they show up on:
The Basic Field in a couple different scenarios:
As long as you have your ACF settings allowing the field for that page or post type, you can add it to the template of that page or post type in a basic way like so:
<p class"yeah-buddy"><?php the_field('my_first_field') ?></p>
In this scenario, we’d have a Text field on the backend with a label of “My First Field,” and a name of my_first_field. We just have to match what’s in this code snippet with the name. We can wrap it in whatever divs and p-tags and whatever else we want to. This is where if you know HTML and CSS already, you should rejoice, as you should be seeing how much freedom this can give you for providing highly editable sites to your clients and people editing the sites. But if you’re not yet, let’s dive into some more epic applications of this amazing plugin.
Adding a repeater field
To add a repeater field, you need to have ACF Pro (go buy it – one site is $25 or get unlimited for $100) and a repeater field will allow you to nest sub-fields within it. So let’s say we want to have testimonials and we want there to be the copy for the testimonial, the author, and a link of the name to the author’s website. We create this this way in the ACF plugin:
Then add it to the template like this (replace my HTML with whatever structure you want- included for reference):
<div class="testimonials-wrap"> <?php // check if the repeater field has rows of data if( have_rows('testimonial') ): // loop through the rows of data while ( have_rows('repeater_field_name') ) : the_row(); ?> <div class="individual-testimonial-wrap"> <p text="testimonial-body"> <?php // display a sub field value the_sub_field('testimonial_text'); ?></p> <a href="<?php the_sub_field('authors_website'); ?>"><?php the_sub_field('author') ?></a> </div> <?php endwhile; else : // no rows found endif; ?> </div>
Showing a field or set of fields only if item is set in admin:
If you have some fields that the person entering content might not add, you can make them only show up if they have something entered like so.
<?php if( get_field('possible_field') ): ?> <p>If it's added in the post: <?php the_field('possible_field'); ?></p> <?php endif; ?>
Getting the most of out Custom Taxonomies: some final notes:
There are so many more amazing ways to use Advanced Custom Fields in WordPress, this is only an introduction; however, I hope it was a useful one. If you’re creating websites for clients, ACF can be one of the ways to make the website so much easier for them to use. After all, usability isn’t just about the front-end user of a website.Usability isn't just about the front-end of a website – Using ACF to supercharge WordPress Editability Click To Tweet
Thank you so much for reading “Using Advanced Custom Fields to Supercharge WordPress Editability” in the WordPress for Noobs series. I love creating WordPress sites in Minneapolis for clients, reach out to me if you need anything and subscribe below if you’d like a PDF of the book when it’s finished. Thank you!