Your SlideShare is downloading. ×
Advancing Your Custom Fields - WordCamp 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Advancing Your Custom Fields - WordCamp 2014

329
views

Published on

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

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
329
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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.”
  • 19. THANKS FOR COMING OUT! ANY QUESTIONS? @troychaplin troychaplin.ca