23
ADVANCING YOUR CUSTOM FIELDS Troy Chaplin WordCamp Ottawa 2014

Advancing Your Custom Fields - WordCamp 2014

Embed Size (px)

DESCRIPTION

A presentation given by Troy Chaplin at WordCamp Ottawa in May 2014 about the plugin Advanced Custom Fields

Citation preview

Page 1: Advancing Your Custom Fields - WordCamp 2014

ADVANCING YOUR CUSTOM FIELDSTroy Chaplin

WordCamp Ottawa 2014

Page 2: Advancing Your Custom Fields - WordCamp 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

Page 3: Advancing Your Custom Fields - WordCamp 2014

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

Page 4: Advancing Your Custom Fields - WordCamp 2014

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

Page 5: Advancing Your Custom Fields - WordCamp 2014

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

Page 6: Advancing Your Custom Fields - WordCamp 2014

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

Page 7: Advancing Your Custom Fields - WordCamp 2014

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>

Page 8: Advancing Your Custom Fields - WordCamp 2014

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

Page 9: Advancing Your Custom Fields - WordCamp 2014

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

Page 10: Advancing Your Custom Fields - WordCamp 2014

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

Page 11: Advancing Your Custom Fields - WordCamp 2014

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

Page 12: Advancing Your Custom Fields - WordCamp 2014

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

Page 13: Advancing Your Custom Fields - WordCamp 2014

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

Page 14: Advancing Your Custom Fields - WordCamp 2014

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

Page 15: Advancing Your Custom Fields - WordCamp 2014

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

Page 16: Advancing Your Custom Fields - WordCamp 2014

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

Page 17: Advancing Your Custom Fields - WordCamp 2014

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

Page 18: Advancing Your Custom Fields - WordCamp 2014

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

Page 19: Advancing Your Custom Fields - WordCamp 2014
Page 20: Advancing Your Custom Fields - WordCamp 2014
Page 21: Advancing Your Custom Fields - WordCamp 2014
Page 22: Advancing Your Custom Fields - WordCamp 2014
Page 23: Advancing Your Custom Fields - WordCamp 2014

THANKS FOR COMING OUT! ANY QUESTIONS?

@troychaplin troychaplin.ca