In this Advanced Custom Fields Tutorial we are going to cover how to use this simple yet powerful tool to develop customized and interactive edit screens and custom meta fields. WordPress does a great job of providing an easy user experience but there are some things that can still be improved on when developing a site for someone else to use. Sometimes we need to add custom input fields in the dashboard, create specific pages for all of the home page settings, or even build a page builder that will allow your clients to build their own website (kinda). You can create fields using code from the WordPress Codex but by using Advanced Custom Fields you can create incredible dynamic user experiences without having to code your life away and wasting all of your budget. Let’s take an in-depth look at this plugin.

ACF Overview

Click the image below to see an explanation and a few examples of Advanced Custom Fields:

Let’s download the ACF plugin:

Advanced Custom Fields is a WordPress plugin and can be downloaded here. Download and install the plugin normally like you would any other WordPress plugin. I want to point out that these guys have a great website and provide amazing documentation and support! They have a free and a paid version. The free version will give you less field options but for the most part will give you what you need. I do recommend the pro version because it is inexpensive and does provide some really cool features that can take your WordPress development to the next level.

What can ACF do for me?

Here are three basic scenarios that can be accomplished by using ACF:

  • Custom Fields – Let’s say you are developing a custom events section in your website or plugin and need to be able to add additional fields such as: start date, end date, the event location, and a downloadable pdf. At the core of ACF, it gives you the ability to quickly create those fields using a simple to use interface where you can specify which post type you want these fields to appear with. Then when you go to the “Events” post type and add a new event, you will see these new fields below the content editor.
  • Settings Pages – When I develop a site for a client, I always want them to be able to go to one specific area in the left sidebar menu of the dashboard to control their home page settings. I don’t want them to have to go to the Widgets to edit one area, and then a carousel section to edit the slider and so on and so forth. Having them dig around isn’t a very good experience and doesn’t make them have a positive outlook on WordPress itself or you as a developer. With ACF you can create settings pages, and then add all the field groups you want to that page, allowing your client the ability to change everything on the home page in one place.
  • Dynamic Site Builders – With some of the pro fields in ACF, such as Flexible Content and Repeaters, you can create different UI elements and allow you clients to essentially build their own websites.

Understand the field groups

Before we figure out how to implement and code the fields we create into our website, we want to take a closer look at each Field Group so that we have a better understanding of how to use them and if one of them helps solve the issues we are presented with better than another.

  • Basic
    • Text – A text field where you will add a few words.
    • Textarea – A text area where you can add a paragraph or two.
  • Choice
    • Checkbox – Allowing the user to check off multiple options.
    • Radio Button This allows the user to only select one option displayed in a radio button style.
    • Select – This is a select box that will display options in a dropdown format. Multiple options can be selected if featured turn on.
    • True / False – A true or false option that can also be used for conditional logic. For example, if you had a basic text header option or a featured image header option, you could have the user toggle their decision and display the corresponding fields that go with their selection.
  • Content
  • jQuery
    • Color Picker – Allows the user to select a color using a color palette style picker.
    • Date Picker – Shows the user a dynamic calendar to choose a date from.
    • Date Time Picker – Allows the user to pick the date and time.
    • Google Map – Allows the user to populate a dynamic Google Map.
    • Time Picker Allows the user to choose a time.
  • Layout
  • Relational
    • Page Link – Gives the user the ability to select pages to be displayed.
    • Post Object – Gives the user the ability to use or display different post elements on that specific page.
    • Relationship – This gives the user the ability to choose from multiple post types and further filter using taxonomies. This allows you to create dynamic relationships on the page that displays this relationship code.
    • Taxonomy – Allows the user to choose a specific Taxonomy.

ACF code examples

Now that we know how these field groups work we can look at the code that makes everything work in your WordPress theme.

Display a field

<p><?php the_field('field_name'); ?></p>

Retrieving a field as a variable

<?php

$variable = get_field('field_name');

// do something with $variable

?>

Using conditional statements

get_field returns false if (value == “” || value == null || value == false)

<?php

if(get_field('field_name'))
{
	echo '<p>' . get_field('field_name') . '</p>';
}

?>

Working with Array values

checkbox, select, relationship, repeater

<?php

$values = get_field('field_name');
if($values)
{
	echo '<ul>';

	foreach($values as $value)
	{
		echo '<li>' . $value . '</li>';
	}

	echo '</ul>';
}

// always good to see exactly what you are working with
var_dump($values);

?>

Working with Images – URL

<img src="<?php the_field('image_test'); ?>" alt="" />

Working with Images – ID

By using the ID, you can retrieve any crop size of the image and even get the name of the file!

<?php $image = wp_get_attachment_image_src(get_field('image_test'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_field('image_test')) ?>" />

Working with the Repeater Field

repeater can be accessed by get_field or the_repeater_field / the_sub_field

<?php if( have_rows('repeater_field_name') ): ?>
 
    <ul>
 
    <?php while( have_rows('repeater_field_name') ): the_row(); ?>
 
        <li>sub_field_1 = <?php the_sub_field('sub_field_1'); ?>, sub_field_2 = <?php the_sub_field('sub_field_2'); ?>, etc</li>
        
        <?php 
        
        $sub_field_3 = get_sub_field('sub_field_3'); 
        
        // do something with $sub_field_3
        
        ?>
        
    <?php endwhile; ?>
 
    </ul>
 
<?php endif; ?>

Randomly select a repeater field row

<?php

$rows = get_field('repeater_field_name');
$row_count = count($rows);
$i = rand(0, $row_count - 1);

echo $rows[ $i ]['sub_field_name'];

?>

Getting values from another page

<?php

$other_page = 12;

?>
<p><?php the_field('field_name', $other_page); ?></p>
<?php

// get variable
$variable = get_field('field_name', $other_page);

// repeater field: note that the_sub_field and get_sub_field don't need a post id parameter
if( have_rows('repeater_field_name', $other_page) ): ?>
 
    <ul>
 
    <?php while( have_rows('repeater_field_name', $other_page) ): the_row(); ?>
    
        <li>sub_field_1 = <?php the_sub_field('sub_field_1'); ?>, sub_field_2 = <?php the_sub_field('sub_field_2'); ?>, etc</li>
        
        <?php 
        
        $sub_field_3 = get_sub_field('sub_field_3'); 
        
        // do something with $sub_field_3
        
        ?>
        
    <?php endwhile; ?>
 
    </ul>
 
<?php endif; ?>

Query posts with ACF values

Example of finding Events (post type) where location (custom field – select) equals Melbourne (value).
Lots to read here: http://codex.wordpress.org/Template_Tags/get_posts.

<?php

$posts = get_posts(array(
	'numberposts' => -1,
	'post_type' => 'event',
	'meta_key' => 'location',
	'meta_value' => 'melbourne'
));

if($posts)
{
	echo '<ul>';

	foreach($posts as $post)
	{
		echo '<li><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a></li>';
	}

	echo '</ul>';
}

?>

Custom Options Page

Add this to your functions.php file and customize the code to fit your options. Once this code snippet is in your functions.php file it will create a new options page in the left sidebar menu in the dashboard and you can choose which fields appear there.

if( function_exists('acf_add_options_page') ) {
 
	$option_page = acf_add_options_page(array(
		'page_title' 	=> 'Theme General Settings',
		'menu_title' 	=> 'Theme Settings',
		'menu_slug' 	=> 'theme-general-settings',
		'capability' 	=> 'edit_posts',
		'redirect' 	=> false
	));
 
}

Conclusion

The best way to take your WordPress development skills to the next level is by playing with all of these options and getting comfortable with them. I read through all of their documentation when I first started learning how to use this plugin and then created a staging site on Cloud9 where I could play to my hearts content. I can’t tell you how many of my clients rave about how easy it is to use the websites I develop and it is all thanks to ACF. I really hope you enjoyed this Advanced Custom Fields tutorial and please feel free to reach out to me if you need any further explanation.