35
Build a Better Editing Experience with Advanced Custom Fields

Build a Better Editing Experience with Advanced Custom Fields

Embed Size (px)

Citation preview

Page 1: Build a Better Editing Experience with Advanced Custom Fields

Build a Better Editing Experience with

Advanced Custom Fields

Page 2: Build a Better Editing Experience with Advanced Custom Fields

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

@jesephm // #WCBuf

Page 3: Build a Better Editing Experience with Advanced Custom Fields

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

Page 4: Build a Better Editing Experience with Advanced Custom Fields

@jesephm // #WCBuf

Page 5: Build a Better Editing Experience with Advanced Custom Fields

@jesephm // #WCBuf

Page 6: Build a Better Editing Experience with Advanced Custom Fields

HTML is intimidating!

@jesephm // #WCBuf

Page 7: Build a Better Editing Experience with Advanced Custom Fields
Page 8: Build a Better Editing Experience with Advanced Custom Fields

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

Page 9: Build a Better Editing Experience with Advanced Custom Fields

Heh, I’m nota logo

@jesephm // #WCBuf

Page 10: Build a Better Editing Experience with Advanced Custom Fields
Page 11: Build a Better Editing Experience with Advanced Custom Fields

Still kinda confusing, isn’t it?

@jesephm // #WCBuf

Page 12: Build a Better Editing Experience with Advanced Custom Fields

@jesephm // #WCBuf

This will drive youand/or your clientscrazy!

Page 14: Build a Better Editing Experience with Advanced Custom Fields

HTML is intimidating!

@jesephm // #WCBuf

Page 15: Build a Better Editing Experience with Advanced Custom Fields

https://www.advancedcustomfields.com/

Page 16: Build a Better Editing Experience with Advanced Custom Fields

@jesephm // #WCBuf

Page 17: Build a Better Editing Experience with Advanced Custom Fields

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 // #WCBuf

Page 18: Build a Better Editing Experience with Advanced Custom Fields

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 // #WCBuf

Page 19: Build a Better Editing Experience with Advanced Custom Fields

ACF – The Basics

Fields – Any content that will be added to a page template via ACF. Called using “get_field” or “the_field”

Field-Group – A group of content that is displayed as section. This will generally be a group of components added to create a page layout. Fields within a group are referenced using “get_sub_field” or “the_sub_field”.

@jesephm // #WCBuf

Page 20: Build a Better Editing Experience with Advanced Custom Fields
Page 21: Build a Better Editing Experience with Advanced Custom Fields

@jesephm // #WCBuf

Page 22: Build a Better Editing Experience with Advanced Custom Fields

Input values into your theme

@jesephm // #WCBuf

<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; ?>

Page 23: Build a Better Editing Experience with Advanced Custom Fields

@jesephm // #WCBuf

Page 24: Build a Better Editing Experience with Advanced Custom Fields
Page 25: Build a Better Editing Experience with Advanced Custom Fields
Page 26: Build a Better Editing Experience with Advanced Custom Fields
Page 27: Build a Better Editing Experience with Advanced Custom Fields

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 // #WCBuf

Page 28: Build a Better Editing Experience with Advanced Custom Fields

Now make 30 pages!

Page 29: Build a Better Editing Experience with Advanced Custom Fields

One template3 versions

rapid deploymentvia ACF

Past Event

Future Event

Live Event @jesephm // #WCBuf

Page 30: Build a Better Editing Experience with Advanced Custom Fields

Default ValuesRapid duplication of page types

@jesephm // #WCBuf

Page 31: Build a Better Editing Experience with Advanced Custom Fields

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 // #WCBuf

Page 32: Build a Better Editing Experience with Advanced Custom Fields
Page 33: Build a Better Editing Experience with Advanced Custom Fields

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 // #WCBuf

Page 34: Build a Better Editing Experience with Advanced Custom Fields
Page 35: Build a Better Editing Experience with Advanced Custom Fields

Thank you!@jesephm

[email protected]

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

Use ACF to create/edit posts: STAY SEATED