Using Advanced Custom Fields to Supercharge WordPress Editability

by on February 24, 2015

Using Advanced Custom Fields to Supercharge WordPress Editability

  •  
  •  
  •  
  •  

< Back to Chapter 8 -Utilizing the WordPress Loop to Display Posts in Archives and Pages

WordPress Development for Noobs is a series that’s intended to get you up and running with WordPress. It definitely helps if you’re familiar with HTML, CSS and, less importantly, PHP and JavaScript, but I’m sharing everything I can in the simplest way possible to help the most people. You can view the full rundown of the book here and get a bit of background if needed. This chapter is about WordPress Advanced Custom Fields, why they are so awesome and how to use them. 

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.

small-blue-legoSo 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.

small-blue-legoSome 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.

small-blue-legoInstall the WordPress Advanced Custom Field’s plugin:

You can find the basic (still highly functional) version of Advanced Custom Fields here.

How to Use Advanced Custom Fields in WordPress

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.

small-blue-legoAdd 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.”

Mobile Screenshot - ACF Advanced Custom Fields for Portfolio Website

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.

Image Fields - Advanced Custom Fields, How To

small-blue-legoAdd 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:

Adding Advanced Custom Fields to Only One Post or Page Type

small-blue-legoThe 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.

small-blue-legoAdding 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:

How to Create Testimonials in Advanced Custom Fields

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>

small-blue-legoShowing 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; ?>

small-blue-legoGetting 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.

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!

Green LegoAll together now: Using the WordPress loop with a custom post type, taxonomies and fields.

 


  •  
  •  
  •  
  •  

Download my E-book "WordPress Development for Noobs" for free right now:

  • This field is for validation purposes and should be left unchanged.
Only the best of web design & marketing

Ready to get started?

Get a free consultation now