The Advanced Custom Fields plugin for WordPress gives developers amazing capabilities, but it does have some limitations. Learn about uses for ACF and ACF Pro at the April 2015 East Bay WordPress Meetup.

1. April 19, 2015

2. EastBayWP.com

3. Our Meetup.com Page
http://www.meetup.com/Eastbay-WordPress-Meetup/

4. Ongoing Sponsor: Page.ly
http://page.ly/

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

18. Entering the Content

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

24. Create Field Group

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.

30. Get FlexSlider.js
http://www.woothemes.com/flexslider/

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

45. Location & Options

46. Flexible Content: Hero
Includes image, text , CTA Button Display,
CTA button URL, CTA button text

47. Text-Image & Image-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

51. Create Field Groups

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