Structuring Content in WordPress using Advanced Custom Fields

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

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

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