An introduction to the WordPress plugin Advanced Custom Fields and Advanced Custom Fields Pro. What is it? Who should be using it? What does it offer?

1. Wil Brown
@DeveloperWil
zeropointdevelopment.com for WordPress Sydney
Introduction

2. Extends the post editor allowing easy
collection of different types of data
through specific field types.
Retrieve data from posts and build into
custom WordPress templates using PHP
functions.
@DeveloperWil #wpsyd

3. @DeveloperWil #wpsyd

4. • Develop sites for clients or yourself
• Working knowledge of HTML, CSS and PHP
• Understand WordPress templating
• Create websites that require flexible & dynamic
data input
@DeveloperWil #wpsyd

5. ACF v4.x is available for free on WordPress.org
https://wordpress.org/plugins/advanced-custom-fields/
@DeveloperWil #wpsyd

6. Basic
– Text
– Text Area
– Number
– Email
– Password
Content
– Wysiwig Editor
– Image
– File
@DeveloperWil #wpsyd
Choice
– Select
– Checkbox
– Radio Button
– True / False
Layout
– Message
– Tab

7. Relational
– Page Link
– Post Object
– Relationship
– Taxonomy
– User
@DeveloperWil #wpsyd
jQuery
– Google Map
– Date Picker
– Color Picker

8. ACF Pro v5.x includes extra fields & features.
https://www.advancedcustomfields.com/pro/
Costs: one-time payment, lifetime updates
AUD $25 for 1 site, AUD $100 for unlimited sites
@DeveloperWil #wpsyd

9. • Repeater Field
Create a set of sub fields which can be repeated again and again whilst editing
content.
• Gallery Field
The gallery field provides a simple and intuitive interface for managing a
collection of images.
• Flexible Content Field
The flexible content field is a complete content layout manager!
• Clone Field
Allows you to select and display existing fields.
@DeveloperWil #wpsyd

10. • Options Pages
Provides a set of functions to add extra admin pages.
• URL
Validates proper http:// https:// URIs
• Range
Number range.
• oEmbed
Embed videos, images, tweets, audio, and other content.
@DeveloperWil #wpsyd

11. • Link
Provides a simple way to select or define a link (url, title, target)
• Date Time Picker
Creates a jQuery date & time selection popup
• Time Picker
Creates a jQuery time selection popup.
• Group
Create a group of fields for consistent layout.
@DeveloperWil #wpsyd

12. ACF uses field groups to attach fields to posts.
Each field group contains a title, fields, location
rules and visual settings.
@DeveloperWil #wpsyd

13. Attaching field groups
@DeveloperWil #wpsyd

14. Validation is built-in for all fields.
All fields can be set to be “required”.
@DeveloperWil #wpsyd

15. Show fields based on field toggles or rule groups
@DeveloperWil #wpsyd

16. Google Map, Date Picker, Color Picker
@DeveloperWil #wpsyd

17. Documentation:
https://www.advancedcustomfields.com/resources
All field data saved as native post_meta. You can
use get_post_meta() however best practice to use
get_field() or the_field().
Why? Because ACF will format the value
depending on the field type and make
development quicker and easier!
@DeveloperWil #wpsyd

18. @DeveloperWil #wpsyd
<?php
/**
* Template Name: Home Page
*/
get_header();
?>
<div id="primary">
<div id="content" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_field('custom_title'); ?></h1>
<img src="<?php the_field('hero_image'); ?>" />
<p><?php the_content(); ?></p>
<?php endwhile; // end of the loop.
?>
<div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>

19. @DeveloperWil #wpsyd
Display a field
Retrieve a field as a variable
Using conditional statements
get_field returns false if (value == “” || value == null || value == false)
<p><?php the_field('field_name'); ?></p>
<?php
$variable = get_field('field_name’);
// do something with $variable
?>
<?php
if(get_field('field_name')){
echo '<p>' . get_field('field_name') . '</p>’;
}
?>

20. @DeveloperWil #wpsyd
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'); ?></li>
<li>sub_field_2 = <?php the_sub_field('sub_field_2'); ?></li>
<?php
$sub_field_3 = get_sub_field('sub_field_3’);
// do something with $sub_field_3
?>
<?php endwhile; ?>
</ul>
<?php endif; ?>

21. @DeveloperWil #wpsyd
ACF can be extended and used alongside the WP
API.
• Actions & Filters
• Add-ons
• Creating new field types
• ACF to WP-API plugin
• Local JSON
• Synchronized JSON

22. @DeveloperWil #wpsyd
• ACF Documentation
• WordPress Melbourne User Group May 2013
Developer Meetup - Elliot Condon & Anthony
Cole
• Using Advanced Custom Fields within a
WordPress Custom Theme
• Jared Novack: Advanced Advanced
Custom Fields

23. [Front Cover] advancedcustomfields.com
[3] advancedcustomfields.com
[5] advancedcustomfields.com
[8] advancedcustomfields.com
[12] advancedcustomfields.com
[13] advancedcustomfields.com
[14] zeropointdevelopment.com
[15] zeropointdevelopment.com
[16] advancedcustomfields.com
[Back Cover] zeropointdevelopment.com
@DeveloperWil #wpsyd

24. ▪ 20+ years in IT: Dev & SysOps
▪ WordPress Developer since 2008
▪ Plugins, APIs, Security & Systems Integrations
▪ Organiser WPSyd & WordCamp Sydney
zeropointdevelopment.com
@DeveloperWil
♥ Pizza & Craft Beer
@DeveloperWil #wpsyd

25. @DeveloperWil #wpsyd
@DeveloperWil