build a better editing experience with advanced custom fields - #wcto16

Build a Better Editing Experience with

Advanced Custom Fields

Jeseph Meyers IT’S LIKE JOSEPH - WITH AN “E”

@jesephm // #WCTO16

“WordPress is not user friendly.” - Me, right now

@jesephm // #WCTO16

@jesephm // #WCTO16

HTML is Intimidating

@jesephm // #WCTO16

What about page builders!?! - You, right now

Heh, I’m nota logo

@jesephm // #WCTO16

Still kinda confusing, isn’t it?

@jesephm // #WCTO16

This can drive youand/or your clientscrazy!

@jesephm // #WCTO16

Source: https://developer.wordpress.org/reference/functions/add_editor_style/ @jesephm // #WCTO16

Add Custom Styles toYour WordPress Visual Editor

https://robincornett.com/visual-editor-styles/

HTML is intimidating!

@jesephm // #WCTO16

https://www.advancedcustomfields.com/

@jesephm // #WCTO16

Should I use ACF?

Working knowledge of HTML, PHP (if/while/WordPress templates) and CSS

Create sites for yourself or others

Extend the functionality of WP Core (editing

experience)

@jesephm // #WCTO16

Do I need the pro (paid) version?

Free Field groups and content

grouping Simplify page/post edit screens Enhanced editing experience Media, embeds and pickers

Pro Flexible Content Repeater Fields Tabbed layouts Theme Options

@jesephm // #WCTO16

ACF – The Basics

Fields – Any content that will be added to a page template via ACF. Called using get_field or the_field. When using a repeater field or flexible content they are called via get_sub_field or the_sub_field.

Field-Group – A group of related content fields. Common usage would be a group of all fields used in a specific page template.

@jesephm // #WCTO16

@jesephm // #WCTO16

Input values into your theme

<h2><?php the_field( 'text' ); ?></h2>

<div><?php the_field( 'text_edit' ); ?></div>

<?php

$image = get_field( 'image’ );

if( !empty($image) ): ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

@jesephm // #WCTO16

Not with ACF!

Repeater Fields(pro feature)

// check if the repeater field has rows of data if( have_rows( 'repeater_field_name’ ) ):

// loop through the rows of data while ( have_rows( 'repeater_field_name’ ) ) : the_row();

// display a sub field value

the_sub_field( 'sub_field_name’ );

endwhile;

else :

// no rows found

endif;

@jesephm // #WCTO16

Now make 30 pages!

Conditional layouts created with simple “if" statement

@jesephm // #WCTO16

Layouts can be altered using checkboxes/radios or based on the stateof a given field/sub-field.

Default ValuesRapid duplication of page types

@jesephm // #WCTO16

Flexible Content(pro feature)

// check if the flexible content field has rows of data if( have_rows( 'flexible_content_field_name' ) ):

// loop through the rows of datawhile ( have_rows( 'flexible_content_field_name’ ) ) :

the_row();

if( get_row_layout() == 'paragraph' ):

the_sub_field( 'text’ );

elseif( get_row_layout() == 'download' ):

$file = get_sub_field( 'file' );

endif;

endwhile;

else :

// no layouts found

endif; @jesephm // #WCTO16

What about SEO Data?

Applications for ACF

Restaurant franchise Tour schedule (I can walk you through this one) Real estate listings Staff/team page Home pages without widgets! Service pages

@jesephm // #WCTO16

Thank you!@jesephm

jeseph@qcmny.com

ACF custom user avatars: http://bit.ly/ACF_avatars