Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
2 likes•2,164 views
The document outlines a meetup presentation on Advanced Custom Fields (ACF) for WordPress, covering its features, including custom field creation, various field types, and the differences between free and pro versions. It includes tutorials on utilizing ACF for custom layouts, galleries, and templates, as well as tips on integrating with themes like Genesis. The speaker, Sallie Goetsch, provides insights from her extensive experience with WordPress and community engagement.
![What Is ACF?
• Intuitive UI for creating and managing
custom fields
• Free & Pro versions
• 20 field types
• Uses the_field(), get_field(),
the_sub_field(), and
get_sub_field() to retrieve field
content
• Shortcode: [acf
field="{$field_name}"]
http://www.advancedcustomfields.com/pro](https://image.slidesharecdn.com/2015-04-acf-150420221601-conversion-gate02/85/Advanced-Custom-Fields-Amazing-Possibilities-and-Irritating-Limitations-7-320.jpg)
![Create Page Template
1. <?php
2. /* Template Name: Page with Magnific Gallery */
3. add_action('genesis_entry_content', 'magnific_gallery_loop', 8);
4. function magnific_gallery_loop() {
5. $images = get_field('image_gallery');
6. if($images):
7. echo '<div class="popup-gallery">';
8. foreach( $images as $image ):
9. echo '<a href="'.$image['url'].'" class="lightbox-
link" title="'. $image['caption'].'" data-
description="'.$image['description'].'">';
10. echo '<div class="image-wrap"><img
src="'.$image['url'].'"></div></a>';
11. endforeach;
12. echo '</div>';
13. endif;
14. }
15. genesis();](https://image.slidesharecdn.com/2015-04-acf-150420221601-conversion-gate02/85/Advanced-Custom-Fields-Amazing-Possibilities-and-Irritating-Limitations-35-320.jpg)
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
- 5. INTRODUCTIONS 1. Name 2. Company (if appropriate) 3. WordPress background 4. Favorite Premium Plugins
- 6. Advanced Custom Fields Pro Amazing possibilities… and a few limitations
- 7. What Is ACF? • Intuitive UI for creating and managing custom fields • Free & Pro versions • 20 field types • Uses the_field(), get_field(), the_sub_field(), and get_sub_field() to retrieve field content • Shortcode: [acf field="{$field_name}"] http://www.advancedcustomfields.com/pro
- 8. Fields in Free Version • Checkbox • Color Picker • Date Picker • Google Map • Image • oEmbed • Page Link • Post Object • Relationship • Select • Tab • Taxonomy • Text • Textarea • True/False • Wysiwig Editor
- 9. Additional Fields in ACF Pro The Repeater Field The repeater field allows you to create a set of sub fields which can be repeated again and again. The Gallery Field The gallery field provides a simple and intuitive interface for managing a collection of images. The Flexible Content Field The flexible content field is a complete content layout manager. Options Pages All data saved on an options page is global and can be displayed on any page.
- 10. How Much Does ACF Pro Cost? One-time cost: $25 Personal, $100 Developer—Australian Dollars!
- 11. Create a Field Group
- 12. Select Field Group Location You can choose to show your field groups for pages, page templates, post types, taxonomies, options pages, and widgets.
- 13. Set Field Group Options This is handy if you want to hide the page/post content editor when you display your fields.
- 14. Add Fields to Your Group
- 15. Display Your Fields 1. <?php 2. if(get_field('field_name') ) { 3. echo '<p>' . get_field('field_name') . '</p>'; 4. } 5. ?>
- 16. CUSTOM HOME PAGE LAYOUT Tutorial from Elliot Condon
- 17. Fields for this Layout
- 19. Code for the Page Template To see the code used to create this page template in the Genesis Sample theme, go to http://acfdemo.rhymeswithsketch.com/co de-for-condon-custom-page/ (There’s no way to show it in PowerPoint.)
- 20. CUSTOM HEADER RIGHT CONTENT FOR PAGES Tutorial from Sridhar Katakam
- 21. Add Field Group
- 22. Enter Header Right Content This box appears below the main content editor.
- 23. REPEATER FIELDS IN ACTION Demonstrated on WP Fangirl
- 25. Repeater Fields & Sub-Fields
- 26. Display Fields in Template 1. if(have_rows('premium_plugins')) { 2. echo '<h3 class="colophon">Premium Plugins</h3>'; 3. echo '<ul class="plugin-list">'; 4. while(have_rows('premium_plugins')) { 5. the_row(); 6. echo '<li><a href="'.get_sub_field('premium_plugin_u rl').'">'. get_sub_field('premium_plugin_name') .'</a></li>'; 7. } 8. echo '</ul>'; 9. }
- 27. DISPLAY ACF GALLERY AS SLIDER Tutorial from Elliot Condon
- 28. Create a Gallery Field Group
- 29. Add Photos to Gallery Upload images to the gallery field. These are from Magdeleine.
- 31. Code Your Template Updated instructions include proper enqueuing of flexslider.js Details at http://acfdemo.rhymeswithsketch.com/gal lery-slider-page-template-code/
- 32. PAGE WITH MAGNIFIC POPUP GALLERY Tutorial from Tribeswell.com
- 33. Get Magnific Files Go to http://dimsemenov.com/plugins/magnific- popup/ and click “Build Tool”
- 34. Enqueue Magnific 1. function magnific_popup_files() { 2. wp_enqueue_style( 'magnific', get_stylesheet_directory_uri() . '/css/magnific-popup-gallery.css' ); 3. wp_enqueue_script( 'magnific', get_stylesheet_directory_uri() .'/js/magnific-popup- gallery.min.js', array('jquery'), false, true ); 4. } 5. add_action( 'wp_enqueue_scripts', 'magnific_popup_files' );
- 35. Create Page Template 1. <?php 2. /* Template Name: Page with Magnific Gallery */ 3. add_action('genesis_entry_content', 'magnific_gallery_loop', 8); 4. function magnific_gallery_loop() { 5. $images = get_field('image_gallery'); 6. if($images): 7. echo '<div class="popup-gallery">'; 8. foreach( $images as $image ): 9. echo '<a href="'.$image['url'].'" class="lightbox- link" title="'. $image['caption'].'" data- description="'.$image['description'].'">'; 10. echo '<div class="image-wrap"><img src="'.$image['url'].'"></div></a>'; 11. endforeach; 12. echo '</div>'; 13. endif; 14. } 15. genesis();
- 36. Create Gallery Field Group Or add existing gallery field group to new template.
- 37. Add Images to Gallery
- 38. Add Script to Page • Put the JavaScript from the tutorial into the “Script” metabox. • Be sure to change “$” to “jQuery” for non-conflict mode
- 39. Here’s Your Popup Lightbox http://acfdemo.rhymeswithsketch.com/page-with-magnific-popup-gallery/
- 40. PAGE WITH CONTENT, WIDGET AREA & FULL-WIDTH SECTIONS Tutorial from Sridhar Katakam
- 41. Create Field Group This page uses one flexible content field with multiple layouts.
- 42. Add Page Content
- 43. HERO / CHECKERBOARD PAGE Tutorial from Sridhar Katakam
- 44. Create Field Group • Location • Options • Flexible Content – Hero Layout – Text-Image Layout – Image-Text Layout
- 46. Flexible Content: Hero Includes image, text , CTA Button Display, CTA button URL, CTA button text
- 48. Entering Content
- 49. Layouts Don’t Style Themselves You need to write CSS for things like • Making section full-width • Hero image stretch display • Overlay for the hero image • Positioning of hero text over image • Color of hero text • Width of Image & Text sections
- 50. FRONT-END POSTING & EDITING Tutorial from The Stiz Media
- 52. Note Field Group IDs This field group has an ID of 130, but yours will be different.
- 53. Get Field Keys
- 54. Add Field Group IDs to Template This is where you need to enter your own field group IDs.
- 55. Add Field Keys to Template Replace the keys shown in the demo template with your own. (Full template is too long to show.)
- 56. Apply Template to a Page Content that you add in the content editor will appear above the posting form.
- 57. Fill Out the Posting Form
- 58. Voila! A Post
- 59. Just a Few Caveats • ACF does not replace custom post types, but it works well with them. • Retrieving field data is harder than retrieving CPT content. • Fields created by ACF are stored either in the post_meta table or the wp_options table. • You can’t search on custom fields
- 60. About the Presenter Sallie Goetsch (rhymes with ‘sketch’) Got online in 1985. Started building websites in 1995. Discovered WordPress in 2005. Organizer of the East Bay WordPress Meetup. @salliegoetsch salliegoetsch http://wpfangirl.com 510-969-9947