Building excellent web experiences with Advanced Custom Fields ...
Build a Better Editing Experience with Advanced Custom Fields - #WCTO16
-
Upload
jeseph-meyers -
Category
Design
-
view
320 -
download
3
Transcript of Build a Better Editing Experience with Advanced Custom Fields - #WCTO16
![Page 1: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/1.jpg)
Build a Better Editing Experience with
Advanced Custom Fields
![Page 2: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/2.jpg)
Jeseph Meyers IT’S LIKE JOSEPH - WITH AN “E”
@jesephm // #WCTO16
![Page 3: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/3.jpg)
“WordPress is not user friendly.” - Me, right now
![Page 4: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/4.jpg)
@jesephm // #WCTO16
![Page 5: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/5.jpg)
@jesephm // #WCTO16
![Page 6: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/6.jpg)
HTML is Intimidating
@jesephm // #WCTO16
![Page 7: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/7.jpg)
![Page 8: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/8.jpg)
What about page builders!?! - You, right now
![Page 9: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/9.jpg)
Heh, I’m nota logo
@jesephm // #WCTO16
![Page 10: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/10.jpg)
Still kinda confusing, isn’t it?
@jesephm // #WCTO16
![Page 11: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/11.jpg)
![Page 12: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/12.jpg)
This can drive youand/or your clientscrazy!
@jesephm // #WCTO16
![Page 13: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/13.jpg)
Source: https://developer.wordpress.org/reference/functions/add_editor_style/ @jesephm // #WCTO16
![Page 14: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/14.jpg)
Add Custom Styles toYour WordPress Visual Editor
https://robincornett.com/visual-editor-styles/
![Page 15: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/15.jpg)
HTML is intimidating!
@jesephm // #WCTO16
![Page 16: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/16.jpg)
https://www.advancedcustomfields.com/
![Page 17: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/17.jpg)
@jesephm // #WCTO16
![Page 18: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/18.jpg)
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
![Page 19: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/19.jpg)
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
![Page 20: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/20.jpg)
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
![Page 21: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/21.jpg)
![Page 22: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/22.jpg)
@jesephm // #WCTO16
![Page 23: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/23.jpg)
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
![Page 24: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/24.jpg)
![Page 25: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/25.jpg)
![Page 26: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/26.jpg)
![Page 27: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/27.jpg)
![Page 28: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/28.jpg)
Not with ACF!
![Page 29: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/29.jpg)
![Page 30: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/30.jpg)
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
![Page 31: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/31.jpg)
Now make 30 pages!
![Page 32: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/32.jpg)
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.
![Page 33: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/33.jpg)
![Page 34: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/34.jpg)
![Page 35: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/35.jpg)
Default ValuesRapid duplication of page types
@jesephm // #WCTO16
![Page 36: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/36.jpg)
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
![Page 37: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/37.jpg)
![Page 38: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/38.jpg)
What about SEO Data?
![Page 39: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/39.jpg)
![Page 40: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/40.jpg)
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
![Page 41: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/41.jpg)
![Page 42: Build a Better Editing Experience with Advanced Custom Fields - #WCTO16](https://reader035.fdocuments.in/reader035/viewer/2022062503/587f5fda1a28ab9b398b498b/html5/thumbnails/42.jpg)
Thank you!@jesephm
ACF custom user avatars: http://bit.ly/ACF_avatars