Advancing Your Custom Fields - WordCamp 2014

ADVANCING YOUR CUSTOM FIELDSTroy Chaplin

WordCamp Ottawa 2014

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

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

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

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

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

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>

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

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 ); ?>

BUILDING CONTENT FIELDSImages 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; ?>

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

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"; }

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

BUILDING RELATION FIELDSPage 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; ?>

BUILDING RELATION FIELDSBasic 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; ?>

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

ADD-ONS

Premium

• Flexible Content Field

• Gallery Field

• Repeater Field

• Options Page

Freebies

• PayPal Field

• Text Limiter

• WordPress WYSIWYG

• Gravity Forms Field

• Date and Time Picker

• Contact Form 7 Field

• Taxonomy Field

– 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.”

THANKS FOR COMING OUT! ANY QUESTIONS?

@troychaplin troychaplin.ca