Advancing Your Custom Fields - WordCamp 2014


Published on

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

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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