This document discusses custom fields in WordPress and how to enhance them using the Advanced Custom Fields plugin. It provides an overview of the different field types available in Advanced Custom Fields like text, text area, images, files, relationships and more. It also provides examples of how to retrieve and display custom field values on a website. The document recommends Advanced Custom Fields as it provides an intuitive interface for content editors and developers to create customizable fields and groups.

1. ADVANCINGYOUR CUSTOM FIELDS
Troy Chaplin
WordCamp Ottawa 2014

2. WHAT ARE CUSTOM FIELDS
• Meta data fields that store arbitrary information
• Meta data is handled with key and value pairs
• Same key can be used multiple times on same post
• Advanced functionality include dates for post expiration, or yes / no
values to show or hide elements on a post

3. ENHANCING CUSTOM FIELDS
• Core custom field interface is not user friendly or intuitive
• Confusing to non technical users
• Not immediately apparent what they are used for
• Require users to know exact key naming convention
• Don’t fit into a seamless workflow

4. ADVANCED CUSTOM FIELDS
• Powerful plugin to create groups of custom
fields
• Over 20 field types
• Easy integration for developer
• Intuitive custom field interfaces for content
editors
• Free and Premium add-ons for additional
functionality
• Conditional logic
• Set fields to be required to ensure data input

5. GETTING STARTED
• Similar feel to creating a post — uses a
custom post type
• Title area to easily identify groups in a
larger list
• Specify where groups will be used (posts,
pages, custom post types, categories,
taxonomies, templates, parents, and more)
• Options to set order of appearance,
position, style
• Simple way to hide other default items

6. BASIC FIELDS
• Text: open ended field that accepts
anything the user wishes to use
• Text Area: basic paragraph editor (this
one has a character limit applied)
• Number: accepts only numerical values
• Email & Password: open ended field
that accepts any form of text

7. BUILDING BASIC FIELDS
Getting the meta data
<?php the_field(‘field_name'); ?>
$textName = get_field(‘field_name');
Example
<article>
<h1><?php the_field('text'); ?></h1>
<p><?php the_field('text_area'); ?></p>
<ul>
<li><?php the_field('number'); ?></li>
<li><?php the_field('email'); ?></li>
<li><?php the_field('password'); ?></li>
</ul>
</article>

8. CONTENT FIELDS
• Text Area with WYSIWYG: full
content editor with full or basic tool
options and media uploader
• Image and File: upload and attach
images or files
• Image and files can be configured to
return values of object, URL or ID

9. BUILDING CONTENT FIELDS
<article>
<?php the_field('text_area'); ?>
<img src="<?php the_field(‘image’); ?>"/>
<p><a href="<?php the_field('file'); ?>">Download File</a></p>
</article>
Images by ID
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
<?php wp_get_attachment_image( $image, $size ); ?>

10. BUILDING CONTENT FIELDS
Images by Post Object
<?php
$image = get_field('image');
if( !empty($image) ):
$url = $image['url'];
$alt = $image['alt'];
$size = 'thumbnail';
$title = $image['title'];
$caption = $image['caption'];
$thumb = $image['sizes'][ $size ];
?>
<?php if( $caption ): ?>
<div class=“wp-caption">
<?php endif; ?>
<img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" />
<?php if( $caption ): ?>
<p class="wp-caption-text"><?php echo $caption; ?></p>
</div> // Closes wp-caption div
<?php endif; ?>
<?php endif; ?>

11. CHOICE FIELDS
• Select: a drop down list of options for
user to select
• Checkbox: a series of options where
users can select one or more items
• Radio: a series of options where users
can select only one item at a time
• True / False: a statement that users can
select to be true

12. BUILDING CHOICE FIELDS
Select or Checkbox Fields - Single Value
<?php the_field('field_name'); ?>
Select or Checkbox Fields - Multiple Values
<?php echo implode(', ', get_field('field_name')); ?>
True / False
if( get_field('field_name') ) {
echo "do something";
} else {
echo "do something else";
}

13. RELATION FIELDS
• Page Link: a drop down list of pages,
posts or custom post types, limited to
retrieving URL
• Post Object: same as page link, can
also retrieve URL, title and meta data
• Relationship: share data between
multiple posts through relationships
• Taxonomy: a list of categories, tags or
taxonomies to select
• User: a drop down list of core roles

14. BUILDING RELATION FIELDS
Page Link
<a href="<?php the_field('page_link'); ?>">Read this!</a>
Post Object (Single)
<?php
$post_object = get_field('post_object');
if( $post_object ):
$post = $post_object;
setup_postdata( $post );
?>
<div>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<span>Post Object Custom Field: <?php the_field('field_name'); ?></span>
</div>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>

15. BUILDING RELATION FIELDS
Basic loop (with setup_postdata)
<?php
$posts = get_field(‘relationship_field_name');
if( $posts ):
?>
<ul>
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<span>Custom field from $post: <?php the_field('author'); ?></span>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>

16. OTHER FIELDS
• Tabs: group fields inside tabs
• Google Maps: an interactive map with the
ability to search an address and place a
marker
• Date Picker: a jQuery date selection pop up
• Color Picker: a jQuery color selection pop
up
• Messages: a place for you to provide
additional instructions or notes that not have
an user input

17. ADD-ONS
Premium
• Flexible Content
Field
• Gallery Field
• Repeater Field
• Options Page
Freebies
• PayPal Field
• Text Limiter
• WordPress
WYSIWYG
• Gravity Forms Field
• Date andTime Picker
• Contact Form 7 Field
• Taxonomy Field

18. – Steve Jobs
“Simple can be harder than complex:You have to
work hard to get your thinking clean to make it simple.
But it’s worth it in the end because once you get
there, you can move mountains.”

23. THANKS FOR COMING OUT!
ANY QUESTIONS?
@troychaplin
troychaplin.ca