build a better editing experience with advanced custom fields - #wcto16
TRANSCRIPT
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
ACF custom user avatars: http://bit.ly/ACF_avatars