SlideShare a Scribd company logo
1 of 29
STRUCTURING CONTENT 
with ADVANCED CUSTOM FIELDS 
WordCamp Buffalo 2014
Hello! 
I’m Jamie Schmid. 
EX-DESIGNER, CURRENT WORDPRESS ENTHUSIAST & INFORMATION ARCHITECT 
FREELANCE, CORPORATE & IN-BETWEEN 
PORTLAND, OR 
@jamieschmid
Why Custom Fields? 
 Structuring content is more important than ever 
 Take site out of WYSIWYG box 
 Chunks vs blobs: break content into manageable blocks 
 Serve together on one page, or divide & send to mobile, API, 
anywhere else 
 COPE: Create once, publish everywhere 
 Good experience for content publishers
Custom Post Types vs Taxonomies 
vs Custom Fields 
 Custom Post Types: WP has 2 different “post” types: post & page. 
 Taxonomy: Means of classifying things. Puts the post into a group. 
Category and Tags are examples of taxonomies. 
 Custom Fields: Data items consisting of a key/value pair, that must be 
bound to a content type. Store custom information about the object 
they are attached to. Default page already has fields: title field, 
WYSIWYG field, featured image field. These are the same thing, 
except custom to your own content. You’re just making up field 
name, value, and adding the tag to the template field ( the_title(); 
the_content(); ) yourself!
Why Advanced Custom Fields? 
o Difficulty in entering content interrupts the 
editor’s workflow 
o Core custom fields interface is confusing, 
not user friendly - lots of work to customize 
and limit 
o ACF provides an extremely easy to use GUI, 
fantastic documentation and support 
http://www.advancedcustomfields.com/
ACF - Available Fields 
Basic Fields 
 Text / Text Area 
 Number 
 Email 
 Password 
 Date/Color picker 
Content 
 WYSIWYG full or ltd 
 Image 
 File 
Choice 
 Select 
 Radio Button 
 Checkbox 
 True/False 
Relational 
 Page Link 
 Post Object 
 Relationship 
 Taxonomy 
 User 
jQuery 
 Google Map 
 Date Picker 
 Color Picker 
Layout 
 Message 
 Tab 
 Flex Content * 
 Repeater * 
 Gallery * 
 Options * 
* Pro only: $25 single site, $100 lifetime unlmited
Fields Demo!
Examples of 
ACF in Action
OPTIONS FIELD use case: content that is repeated in various places across the site
REPEATER FIELD use case: content whose format is repeated numerous times on a page
REPEATER FIELD use case: easy for user to add their own accordions on a page
Conditional Statements 
 In Your Theme: 
 Best practice to display CF’s with a 
conditional 
 Can display certain support 
elements only if field exists 
 Add class to body 
 Display alternate data 
 Only display posts with a specific 
custom field 
 In the Admin: 
 Setting expiration date for posts 
 Page-specific content types 
 Extended publish statuses
The (Not So Scary) Code
Basic Field 
Conditionals with image and text field
REPEATER FIELD uses the same syntax as the WordPress loop!
Content Modeling 
Planning your content types before you build 
is important. 
 Wireframe every page 
 You will probably find there are 
more pages than you thought. 
Maybe even whole sections, 
navigations and layouts. 
 Use standard naming conventions & 
language the user will understand 
 Identify unique blocks 
 That require special tags, special 
format, or shared content: these 
are probably good custom field 
candidates! 
But be realistic. 
 Draw a balance between strictly 
structured content, and freedom for 
the author to enter all the content 
they need 
 We don’t want to make the author 
bend their content to fit your 
structure 
 Get content as early as you can! 
Build out all your Custom Post Types, 
Custom Fields and Taxonomies at 
the onset; develop the template 
while your client populates their 
content on staging!
Admin UX 
Custom Fields Can GREATLY improve the Admin Panel User Experience! 
 Hide unused page elements 
 Field & Metabox naming conventions 
 Logical grouping of related fields 
 Tabs 
 Page placement – top, main, sidebar 
 Conditionals for showing different inputs 
 Input Validation 
 Notes/directions
Potential Issues  
 ACF Plugin must be installed for metadata fields to show 
 Can export as PHP for mu_plugins 
 wp_search: only searches the_content() – no custom fields 
 Search WP & Faceted Search plugins 
 rss: only feeds the_content() 
 Localization plugins: only translates the_content() (typically) 
 ACF text output is not escaped like native WordPress functions 
 https://github.com/10up/secured-advanced-custom-fields 
 http://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data
Questions / Examples? 
Thanks :) 
Jamie Schmid 
@jamieschmid

More Related Content

What's hot

1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
apnwebdev
 

What's hot (12)

Introduction to Xamarin.Forms
Introduction to Xamarin.FormsIntroduction to Xamarin.Forms
Introduction to Xamarin.Forms
 
Wordpress workflow for an agency world
Wordpress workflow for an agency worldWordpress workflow for an agency world
Wordpress workflow for an agency world
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
Effectively Validate A Website
Effectively Validate A WebsiteEffectively Validate A Website
Effectively Validate A Website
 
TMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS BasicsTMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS Basics
 
Web designing course bangalore
Web designing course bangaloreWeb designing course bangalore
Web designing course bangalore
 
Building Blocks For Your Modules Ui
Building Blocks For Your Modules UiBuilding Blocks For Your Modules Ui
Building Blocks For Your Modules Ui
 
Content Management for Web Designers
Content Management for Web DesignersContent Management for Web Designers
Content Management for Web Designers
 
Xhtml validation
Xhtml validationXhtml validation
Xhtml validation
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Introduction to Xamarin.Forms
Introduction to Xamarin.FormsIntroduction to Xamarin.Forms
Introduction to Xamarin.Forms
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 

Similar to Structuring Content in WordPress using Advanced Custom Fields

Drupal Training
Drupal TrainingDrupal Training
Drupal Training
Sam Davis
 
WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...
Denise Williams
 
Search overview
Search overviewSearch overview
Search overview
Hiep Luong
 

Similar to Structuring Content in WordPress using Advanced Custom Fields (20)

Kulpreet Singh's Tazzu WordCamp Presentation
Kulpreet Singh's Tazzu WordCamp PresentationKulpreet Singh's Tazzu WordCamp Presentation
Kulpreet Singh's Tazzu WordCamp Presentation
 
CORNELL DRUPAL CAMP 2015: One Content Type to Rule Them All
CORNELL DRUPAL CAMP 2015: One Content Type  to Rule Them AllCORNELL DRUPAL CAMP 2015: One Content Type  to Rule Them All
CORNELL DRUPAL CAMP 2015: One Content Type to Rule Them All
 
Spencer Nash - Advanced Custom Fields
Spencer Nash - Advanced Custom FieldsSpencer Nash - Advanced Custom Fields
Spencer Nash - Advanced Custom Fields
 
Accomplish It With Core: Sliders Galleries + More
Accomplish It With Core: Sliders Galleries + MoreAccomplish It With Core: Sliders Galleries + More
Accomplish It With Core: Sliders Galleries + More
 
Introduction to Advanced Custom Fields
Introduction to Advanced Custom FieldsIntroduction to Advanced Custom Fields
Introduction to Advanced Custom Fields
 
Accomplish It With Core: Sliders, Galleries and More
Accomplish It With Core: Sliders, Galleries and MoreAccomplish It With Core: Sliders, Galleries and More
Accomplish It With Core: Sliders, Galleries and More
 
Whats Up With Ontopoly?
Whats Up With Ontopoly?Whats Up With Ontopoly?
Whats Up With Ontopoly?
 
Custom Fields in Joomla - JoomlaDay UK 2016 - Marco Dings
Custom Fields in Joomla - JoomlaDay UK 2016 - Marco DingsCustom Fields in Joomla - JoomlaDay UK 2016 - Marco Dings
Custom Fields in Joomla - JoomlaDay UK 2016 - Marco Dings
 
Dita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and DeveloperDita for the web: Make Adaptive Content Simple for Writers and Developer
Dita for the web: Make Adaptive Content Simple for Writers and Developer
 
Drupal Training
Drupal TrainingDrupal Training
Drupal Training
 
WP 201 Custom Post Types - Custom Fields - WordCamp Columbus 2015
WP 201   Custom Post Types - Custom Fields - WordCamp Columbus 2015WP 201   Custom Post Types - Custom Fields - WordCamp Columbus 2015
WP 201 Custom Post Types - Custom Fields - WordCamp Columbus 2015
 
Html & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshopHtml & CSS - Best practices 2-hour-workshop
Html & CSS - Best practices 2-hour-workshop
 
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating LimitationsAdvanced Custom Fields: Amazing Possibilities and Irritating Limitations
Advanced Custom Fields: Amazing Possibilities and Irritating Limitations
 
Marky Markup and the Funky Bunch
Marky Markup and the Funky BunchMarky Markup and the Funky Bunch
Marky Markup and the Funky Bunch
 
The panels family
The panels familyThe panels family
The panels family
 
WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...WordPress Custom Fields: Control your content presentation by breaking out of...
WordPress Custom Fields: Control your content presentation by breaking out of...
 
Overview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site DesignOverview of Using Wordpress for Web Site Design
Overview of Using Wordpress for Web Site Design
 
Search overview
Search overviewSearch overview
Search overview
 
W pthemes
W pthemesW pthemes
W pthemes
 
You Can Take Your HAT Off
You Can Take Your HAT OffYou Can Take Your HAT Off
You Can Take Your HAT Off
 

More from Jamie Schmid

Introduction to Content Strategy - WordCamp Montreal 2016
Introduction to Content Strategy - WordCamp Montreal 2016Introduction to Content Strategy - WordCamp Montreal 2016
Introduction to Content Strategy - WordCamp Montreal 2016
Jamie Schmid
 
Structuring Content in WordPress: Against All the Odds
Structuring Content in WordPress: Against All the OddsStructuring Content in WordPress: Against All the Odds
Structuring Content in WordPress: Against All the Odds
Jamie Schmid
 

More from Jamie Schmid (20)

Content Architectures in WordPress 5
Content Architectures in WordPress 5Content Architectures in WordPress 5
Content Architectures in WordPress 5
 
Content Strategy in a Gutenberg World Lightning Talk at WordCamp Phoenix 2019
Content Strategy in a Gutenberg World   Lightning Talk at WordCamp Phoenix 2019Content Strategy in a Gutenberg World   Lightning Talk at WordCamp Phoenix 2019
Content Strategy in a Gutenberg World Lightning Talk at WordCamp Phoenix 2019
 
Dont Break Live lightning talk
Dont Break Live lightning talkDont Break Live lightning talk
Dont Break Live lightning talk
 
Introduction to WooCommerce
Introduction to WooCommerceIntroduction to WooCommerce
Introduction to WooCommerce
 
Securing your WooCommerce Site
Securing your WooCommerce SiteSecuring your WooCommerce Site
Securing your WooCommerce Site
 
WooCommerce Security - WordCamp OC 2018
WooCommerce Security - WordCamp OC 2018WooCommerce Security - WordCamp OC 2018
WooCommerce Security - WordCamp OC 2018
 
Remote Project Management WordCamp OC 2018
Remote Project Management WordCamp OC 2018Remote Project Management WordCamp OC 2018
Remote Project Management WordCamp OC 2018
 
YAY I'm Working Remotely! Now What?
YAY I'm Working Remotely! Now What?YAY I'm Working Remotely! Now What?
YAY I'm Working Remotely! Now What?
 
Making Security Make Sense to Users and Clients
Making Security Make Sense to Users and ClientsMaking Security Make Sense to Users and Clients
Making Security Make Sense to Users and Clients
 
Making Security Make Sense to Users and Clients
Making Security Make Sense to Users and ClientsMaking Security Make Sense to Users and Clients
Making Security Make Sense to Users and Clients
 
Introduction to Content Strategy: SANDCamp 2018
Introduction to Content Strategy: SANDCamp 2018Introduction to Content Strategy: SANDCamp 2018
Introduction to Content Strategy: SANDCamp 2018
 
Content Doesn't Grow on Trees - An Introduction to Content Strategy
Content Doesn't Grow on Trees - An Introduction to Content StrategyContent Doesn't Grow on Trees - An Introduction to Content Strategy
Content Doesn't Grow on Trees - An Introduction to Content Strategy
 
Introduction to Custom WordPress Themeing
Introduction to Custom WordPress ThemeingIntroduction to Custom WordPress Themeing
Introduction to Custom WordPress Themeing
 
Introduction to Content Strategy - WordCamp Montreal 2016
Introduction to Content Strategy - WordCamp Montreal 2016Introduction to Content Strategy - WordCamp Montreal 2016
Introduction to Content Strategy - WordCamp Montreal 2016
 
Content Architecture in WordPress
Content Architecture in WordPressContent Architecture in WordPress
Content Architecture in WordPress
 
Content Doesn't Grow on Trees - Intruduction to Content Strategy
Content Doesn't Grow on Trees - Intruduction to Content StrategyContent Doesn't Grow on Trees - Intruduction to Content Strategy
Content Doesn't Grow on Trees - Intruduction to Content Strategy
 
WCCBUS 2015 - Content Architecture in WordPress
WCCBUS 2015 - Content Architecture in WordPressWCCBUS 2015 - Content Architecture in WordPress
WCCBUS 2015 - Content Architecture in WordPress
 
WordPress Beginner: Choosing & Customizing Your Theme
WordPress Beginner: Choosing & Customizing Your ThemeWordPress Beginner: Choosing & Customizing Your Theme
WordPress Beginner: Choosing & Customizing Your Theme
 
Structuring Content in WordPress: Against All the Odds
Structuring Content in WordPress: Against All the OddsStructuring Content in WordPress: Against All the Odds
Structuring Content in WordPress: Against All the Odds
 
Structuring Content in Wordpress
Structuring Content in WordpressStructuring Content in Wordpress
Structuring Content in Wordpress
 

Recently uploaded

Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
soniya singh
 
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Chandigarh Call girls 9053900678 Call girls in Chandigarh
 
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
soniya singh
 

Recently uploaded (20)

Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Shahpur Jat Escort Service Delhi N.C.R.
 
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
VIP Model Call Girls NIBM ( Pune ) Call ON 8005736733 Starting From 5K to 25K...
 
Trump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts SweatshirtTrump Diapers Over Dems t shirts Sweatshirt
Trump Diapers Over Dems t shirts Sweatshirt
 
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
2nd Solid Symposium: Solid Pods vs Personal Knowledge Graphs
 
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
Shikrapur - Call Girls in Pune Neha 8005736733 | 100% Gennuine High Class Ind...
 
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Ashram Chowk Delhi 💯Call Us 🔝8264348440🔝
 
Enjoy Night⚡Call Girls Dlf City Phase 3 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 3 Gurgaon >༒8448380779 Escort ServiceEnjoy Night⚡Call Girls Dlf City Phase 3 Gurgaon >༒8448380779 Escort Service
Enjoy Night⚡Call Girls Dlf City Phase 3 Gurgaon >༒8448380779 Escort Service
 
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort ServiceCall Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Prashant Vihar, Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
 
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
𓀤Call On 7877925207 𓀤 Ahmedguda Call Girls Hot Model With Sexy Bhabi Ready Fo...
 
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...Russian Call Girls Pune  (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
Russian Call Girls Pune (Adult Only) 8005736733 Escort Service 24x7 Cash Pay...
 
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...Pune Airport ( Call Girls ) Pune  6297143586  Hot Model With Sexy Bhabi Ready...
Pune Airport ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready...
 
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
Low Sexy Call Girls In Mohali 9053900678 🥵Have Save And Good Place 🥵
 
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort ServiceBusty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
Busty Desi⚡Call Girls in Vasundhara Ghaziabad >༒8448380779 Escort Service
 
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
Call Girls In Defence Colony Delhi 💯Call Us 🔝8264348440🔝
 
'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...
'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...
'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...
 
Russian Call girl in Ajman +971563133746 Ajman Call girl Service
Russian Call girl in Ajman +971563133746 Ajman Call girl ServiceRussian Call girl in Ajman +971563133746 Ajman Call girl Service
Russian Call girl in Ajman +971563133746 Ajman Call girl Service
 
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting  High Prof...
VIP Model Call Girls Hadapsar ( Pune ) Call ON 9905417584 Starting High Prof...
 
Russian Call Girls in %(+971524965298 )# Call Girls in Dubai
Russian Call Girls in %(+971524965298  )#  Call Girls in DubaiRussian Call Girls in %(+971524965298  )#  Call Girls in Dubai
Russian Call Girls in %(+971524965298 )# Call Girls in Dubai
 
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
Call Now ☎ 8264348440 !! Call Girls in Green Park Escort Service Delhi N.C.R.
 
Al Barsha Night Partner +0567686026 Call Girls Dubai
Al Barsha Night Partner +0567686026 Call Girls  DubaiAl Barsha Night Partner +0567686026 Call Girls  Dubai
Al Barsha Night Partner +0567686026 Call Girls Dubai
 

Structuring Content in WordPress using Advanced Custom Fields

  • 1. STRUCTURING CONTENT with ADVANCED CUSTOM FIELDS WordCamp Buffalo 2014
  • 2. Hello! I’m Jamie Schmid. EX-DESIGNER, CURRENT WORDPRESS ENTHUSIAST & INFORMATION ARCHITECT FREELANCE, CORPORATE & IN-BETWEEN PORTLAND, OR @jamieschmid
  • 3. Why Custom Fields?  Structuring content is more important than ever  Take site out of WYSIWYG box  Chunks vs blobs: break content into manageable blocks  Serve together on one page, or divide & send to mobile, API, anywhere else  COPE: Create once, publish everywhere  Good experience for content publishers
  • 4. Custom Post Types vs Taxonomies vs Custom Fields  Custom Post Types: WP has 2 different “post” types: post & page.  Taxonomy: Means of classifying things. Puts the post into a group. Category and Tags are examples of taxonomies.  Custom Fields: Data items consisting of a key/value pair, that must be bound to a content type. Store custom information about the object they are attached to. Default page already has fields: title field, WYSIWYG field, featured image field. These are the same thing, except custom to your own content. You’re just making up field name, value, and adding the tag to the template field ( the_title(); the_content(); ) yourself!
  • 5. Why Advanced Custom Fields? o Difficulty in entering content interrupts the editor’s workflow o Core custom fields interface is confusing, not user friendly - lots of work to customize and limit o ACF provides an extremely easy to use GUI, fantastic documentation and support http://www.advancedcustomfields.com/
  • 6. ACF - Available Fields Basic Fields  Text / Text Area  Number  Email  Password  Date/Color picker Content  WYSIWYG full or ltd  Image  File Choice  Select  Radio Button  Checkbox  True/False Relational  Page Link  Post Object  Relationship  Taxonomy  User jQuery  Google Map  Date Picker  Color Picker Layout  Message  Tab  Flex Content *  Repeater *  Gallery *  Options * * Pro only: $25 single site, $100 lifetime unlmited
  • 8. Examples of ACF in Action
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14. OPTIONS FIELD use case: content that is repeated in various places across the site
  • 15.
  • 16. REPEATER FIELD use case: content whose format is repeated numerous times on a page
  • 17.
  • 18. REPEATER FIELD use case: easy for user to add their own accordions on a page
  • 19.
  • 20.
  • 21.
  • 22. Conditional Statements  In Your Theme:  Best practice to display CF’s with a conditional  Can display certain support elements only if field exists  Add class to body  Display alternate data  Only display posts with a specific custom field  In the Admin:  Setting expiration date for posts  Page-specific content types  Extended publish statuses
  • 23. The (Not So Scary) Code
  • 24. Basic Field Conditionals with image and text field
  • 25. REPEATER FIELD uses the same syntax as the WordPress loop!
  • 26. Content Modeling Planning your content types before you build is important.  Wireframe every page  You will probably find there are more pages than you thought. Maybe even whole sections, navigations and layouts.  Use standard naming conventions & language the user will understand  Identify unique blocks  That require special tags, special format, or shared content: these are probably good custom field candidates! But be realistic.  Draw a balance between strictly structured content, and freedom for the author to enter all the content they need  We don’t want to make the author bend their content to fit your structure  Get content as early as you can! Build out all your Custom Post Types, Custom Fields and Taxonomies at the onset; develop the template while your client populates their content on staging!
  • 27. Admin UX Custom Fields Can GREATLY improve the Admin Panel User Experience!  Hide unused page elements  Field & Metabox naming conventions  Logical grouping of related fields  Tabs  Page placement – top, main, sidebar  Conditionals for showing different inputs  Input Validation  Notes/directions
  • 28. Potential Issues   ACF Plugin must be installed for metadata fields to show  Can export as PHP for mu_plugins  wp_search: only searches the_content() – no custom fields  Search WP & Faceted Search plugins  rss: only feeds the_content()  Localization plugins: only translates the_content() (typically)  ACF text output is not escaped like native WordPress functions  https://github.com/10up/secured-advanced-custom-fields  http://codex.wordpress.org/Validating_Sanitizing_and_Escaping_User_Data
  • 29. Questions / Examples? Thanks :) Jamie Schmid @jamieschmid