Advanced Custom Fields: Amazing Possibilities and Irritating Limitations

April 19, 2015

EastBayWP.com

Our Meetup.com Page

http://www.meetup.com/Eastbay-WordPress-Meetup/

Ongoing Sponsor: Page.ly

http://page.ly/

INTRODUCTIONS

1. Name

2. Company (if appropriate)

3. WordPress background

4. Favorite Premium Plugins

Advanced Custom Fields Pro Amazing possibilities… and a few limitations

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

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

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.

How Much Does ACF Pro Cost?

One-time cost: $25 Personal, $100 Developer—Australian Dollars!

Create a Field Group

Select Field Group Location

You can choose to show your field groups for pages, page templates, post types, taxonomies, options pages, and widgets.

Set Field Group Options

This is handy if you want to hide the page/post content editor when you display your fields.

Add Fields to Your Group

Display Your Fields

1. <?php

2. if(get_field('field_name')

) {

3. echo '<p>' .

get_field('field_name') .

'</p>';

4. }

5. ?>

CUSTOM HOME PAGE LAYOUT Tutorial from Elliot Condon

Fields for this Layout

Entering the Content

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/code-for-condon-custom-page/

(There’s no way to show it in PowerPoint.)

CUSTOM HEADER RIGHT CONTENT FOR PAGES

Tutorial from Sridhar Katakam

Add Field Group

Enter Header Right Content

This box appears below the main content editor.

REPEATER FIELDS IN ACTION Demonstrated on WP Fangirl

Create Field Group

Repeater Fields & Sub-Fields

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_url').'">'. get_sub_field('premium_plugin_name') .'</a></li>';

7. }

8. echo '</ul>';

9. }

DISPLAY ACF GALLERY AS SLIDER

Tutorial from Elliot Condon

Create a Gallery Field Group

Add Photos to Gallery

Upload images to the gallery field. These are from Magdeleine.

Get FlexSlider.js

http://www.woothemes.com/flexslider/

Code Your Template

Updated instructions include proper enqueuing of flexslider.js

Details at http://acfdemo.rhymeswithsketch.com/gallery-slider-page-template-code/

PAGE WITH MAGNIFIC POPUP GALLERY

Tutorial from Tribeswell.com

Get Magnific Files

Go to http://dimsemenov.com/plugins/magnific-popup/ and click “Build Tool”

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' );

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();

Create Gallery Field Group

Or add existing gallery field group to new template.

Add Images to Gallery

Add Script to Page

• Put the JavaScript from the tutorial into the “Script” metabox.

• Be sure to change “$” to “jQuery” for non-conflict mode

Here’s Your Popup Lightbox

http://acfdemo.rhymeswithsketch.com/page-with-magnific-popup-gallery/

PAGE WITH CONTENT, WIDGET AREA & FULL-WIDTH SECTIONS

Tutorial from Sridhar Katakam

Create Field Group

This page uses one flexible content field with multiple layouts.

Add Page Content

HERO / CHECKERBOARD PAGE Tutorial from Sridhar Katakam

Create Field Group

• Location

• Options

• Flexible Content

– Hero Layout

– Text-Image Layout

– Image-Text Layout

Location & Options

Flexible Content: Hero

Includes image, text , CTA Button Display, CTA button URL, CTA button text

Text-Image & Image-Text

Entering Content

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

FRONT-END POSTING & EDITING Tutorial from The Stiz Media

Create Field Groups

Note Field Group IDs

This field group has an ID of 130, but yours will be different.

Get Field Keys

Add Field Group IDs to Template

This is where you need to enter your own field group IDs.

Add Field Keys to Template

Replace the keys shown in the demo template with your own. (Full template is too long to show.)

Apply Template to a Page

Content that you add in the content editor will appear above the posting form.

Fill Out the Posting Form

Voila! A Post

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

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