STRUCTURING CONTENTwith 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 ModelingPlanning 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 UXCustom 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