ADVANCINGYOUR CUSTOM FIELDS
Troy Chaplin	

WordCamp Ottawa 2014
WHAT ARE CUSTOM FIELDS
• Meta data fields that store arbitrary information	

• Meta data is handled with key and value pair...
ENHANCING CUSTOM FIELDS
• Core custom field interface is not user friendly or intuitive	

• Confusing to non technical user...
ADVANCED CUSTOM FIELDS
• Powerful plugin to create groups of custom
fields	

• Over 20 field types	

• Easy integration for ...
GETTING STARTED
• Similar feel to creating a post — uses a
custom post type	

• Title area to easily identify groups in a
...
BASIC FIELDS
• Text: open ended field that accepts
anything the user wishes to use	

• Text Area: basic paragraph editor (t...
BUILDING BASIC FIELDS
Getting the meta data
<?php the_field(‘field_name'); ?>	

$textName = get_field(‘field_name');	

Example...
CONTENT FIELDS
• Text Area with WYSIWYG: full
content editor with full or basic tool
options and media uploader	

• Image ...
BUILDING CONTENT FIELDS
<article>	

	

 <?php the_field('text_area'); ?>	

	

 <img src="<?php the_field(‘image’); ?>"/>	

	...
BUILDING CONTENT FIELDS
Images by Post Object
<?php 	

	

 $image = get_field('image');	

	

 if( !empty($image) ): 	

	

 ...
CHOICE FIELDS
• Select: a drop down list of options for
user to select	

• Checkbox: a series of options where
users can s...
BUILDING CHOICE FIELDS
Select or Checkbox Fields - Single Value
<?php the_field('field_name'); ?>	

Select or Checkbox Field...
RELATION FIELDS
• Page Link: a drop down list of pages,
posts or custom post types, limited to
retrieving URL	

• Post Obj...
BUILDING RELATION FIELDS
Page Link
<a href="<?php the_field('page_link'); ?>">Read this!</a>	

Post Object (Single)
<?php	
...
BUILDING RELATION FIELDS
Basic loop (with setup_postdata)
<?php	

	

 $posts = get_field(‘relationship_field_name');	

	

 i...
OTHER FIELDS
• Tabs: group fields inside tabs	

• Google Maps: an interactive map with the
ability to search an address and...
ADD-ONS
Premium
• Flexible Content
Field	

• Gallery Field	

• Repeater Field	

• Options Page
Freebies
• PayPal 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...
THANKS FOR COMING OUT!	

ANY QUESTIONS?
@troychaplin	

troychaplin.ca
Advancing Your Custom Fields - WordCamp 2014
Advancing Your Custom Fields - WordCamp 2014
Advancing Your Custom Fields - WordCamp 2014
Advancing Your Custom Fields - WordCamp 2014
Upcoming SlideShare
Loading in...5
×

Advancing Your Custom Fields - WordCamp 2014

428

Published on

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

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
428
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Advancing Your Custom Fields - WordCamp 2014

  1. 1. ADVANCINGYOUR CUSTOM FIELDS Troy Chaplin WordCamp Ottawa 2014
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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.”
  19. 19. THANKS FOR COMING OUT! ANY QUESTIONS? @troychaplin troychaplin.ca
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×