Structuring Content in WordPressUSING ADVANCED CUSTOM FIELDS
Hello!I’m Jamie Schmid.
EX-ILLUSTRATOR, WORDPRESS ENTHUSIAST, INFORMATION ARCHITECT
FREELANCE, CORPORATE & IN-BETWEEN
MILWAUKEE / PORTLAND, OR
@JAMIESCHMID
How do Custom Fields work?
Key/value pairs
“Key” – “name” – a constant that identifies a specific field Stays the same for all posts, cannot be duplicated
Can be called multiple times on one page
Value – info displayed for each field when you call it Can change with each post
Can be globally accessed also
Where are Custom Fields used?
Yoast SEO fields
Genesis framework: different visual layouts to select from
Themify: color boxes to select different color themes
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
Why Advanced Custom Fields?o Core custom fields interface is
confusing, not user friendly
o Interrupts workflow
o Lots of work to customize and limit
http://www.advancedcustomfields.com/
Installation:Advanced Custom Fields is “Freemium”
Free Version
Text / textarea
Wysiwyg
Image
File
Page link
Post object
Relationship
Select
Checkbox
radio buttons
Color / date picker
true / false
Pro
Personal (single site) :$25 (can upgrade)
Developer (unlimited forever): $100
Features:
Repeater
Flex Content
Gallery
Options Panel
These are indispensable.
ACF - Available Fields
Basic Fields
Text / Text Area
Number
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
Fields Demo!
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
Conditionals Demo!
Admin UX
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
Admin UX Demo!
Content ModelingA process to describe all your types of data and the relationships between them
Audit EVERYTHING
Wireframe every pageSeriously, every page.
You will probably find:
There are more pages than you thought
Maybe even whole sections
Navigation issues
Layout limitations
Plan your custom fields & relationships right on the page, including id’s
Use standard naming conventions
Use language the user will understand
Identify unique blocks
That require special tags
Special output
Shared content across the site
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
No model survives first contact with real content.
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
Top Related