#CMSX #ChunkyWP@jeckman

Beyond Posts & Pages:Structured Content in

WordPress

Beyond Posts & Pages:Structured Content in

WordPress

John EckmanISITE Design | CMS Myth

#CMSX #ChunkyWP@jeckman

2

http://www.isitedesign.com/

#CMSX #ChunkyWP@jeckman

3

http://delight.us/

#CMSX #ChunkyWP@jeckman

4

http://www.cmsmyth.com/

#CMSX #ChunkyWP@jeckman

Shirts!Shirts!

5

#CMSX #ChunkyWP@jeckman

ShirtsShirtsFirst five people to tweet:

“Learning how to make WordPress Chunky with @jeckman at #cmsx #chunkyWP”

6

#CMSX #ChunkyWP@jeckman

AgendaAgenda• Why do we need structured content?• How does WordPress do it?

– Metadata– Custom Post Types– Custom Taxonomies

• Examples– Basic: Slides, Alerts– Complex: Stories

• Notes– Search– Controlling display– Relationships

7

#CMSX #ChunkyWP@jeckman

Content Strategy 201Content Strategy 201

8

#CMSX #ChunkyWP@jeckman

Adaptive ContentAdaptive ContentFive Key Elements of Adaptive Content:1.Reusable content

– Content developed to maximize reuse

– Different formats/types available

2.Structured content– Discrete chunks can be

combined in different ways on different platforms

9http://www.abookapart.com/products/content-strategy-for-mobile

#CMSX #ChunkyWP@jeckman

Adaptive Content, Cont’dAdaptive Content, Cont’d3. Presentation-independent

content– Design decisions made by platform

based on rules, not by authors

4. Meaningful metadata– Metadata which can be used by the

platform to drive presentation rules

5. Usable CMS interfaces– UI and workflow to encourage well

structured and metadata-enhanced content

10

#CMSX #ChunkyWP@jeckman

WordPress BlobsWordPress Blobs

11

#CMSX #ChunkyWP@jeckman

Getting chunkierGetting chunkier

12

#CMSX #ChunkyWP@jeckman

WordPress ChunksWordPress ChunksTo enhance structured content in WordPress, we need more:•Custom Post Types

– Not just “pages” and “posts”– Complex content types

•Custom Taxonomies– Sort, categorize, relate

•Custom Meta Data– More boxes for granular data

13

#CMSX #ChunkyWP@jeckman

Example: AlertsExample: Alerts

14

#CMSX #ChunkyWP@jeckman

Example: AlertsExample: Alerts

15

#CMSX #ChunkyWP@jeckman

Code Example (Simple)Code Example (Simple)

16

http://codex.wordpress.org/Function_Reference/register_post_type

#CMSX #ChunkyWP@jeckman

CodeCode

17

Key is register_post_typeArguments passed control:•What to call it (Labels)•Where to show it

– Public, Show UI, Searchable, has_archive

– Menu position

•Who can use it (capabilities)•What it includes (supports)

http://codex.wordpress.org/Function_Reference/register_post_type

#CMSX #ChunkyWP@jeckman

Example: SlidesExample: Slides

18

http://jleuze.com/plugins/meteor-slides/

#CMSX #ChunkyWP@jeckman

Example: Meteor SlidesExample: Meteor Slides

19

#CMSX #ChunkyWP@jeckman

Code Code

20

http://jleuze.com/plugins/meteor-slides/

#CMSX #ChunkyWP@jeckman

Code (Cont’d)Code (Cont’d)

21

#CMSX #ChunkyWP@jeckman

More Complex ExampleMore Complex Example• Client: Generation Citizen• Custom Post Type for

“Stories”• Secondary HTML Areas• Custom Taxonomies:

Locations, Topics• Custom Metadata• Attachments

22

#CMSX #ChunkyWP@jeckman

Demo – Stories pageDemo – Stories page

23

#CMSX #ChunkyWP@jeckman

Secondary HTML AreasSecondary HTML Areas

24

http://wordpress.org/extend/plugins/secondary-html-content/

#CMSX #ChunkyWP@jeckman

Secondary HTML areasSecondary HTML areas

25

#CMSX #ChunkyWP@jeckman

TaxonomiesTaxonomiesCustom Post Types can be further enhanced with custom Taxonomies

In this case that means:•Register Taxonomy•Show custom meta box •Save on submit

26

#CMSX #ChunkyWP@jeckman

27

Here we have a custom post type for “Stories” with two custom taxonomies: Locations and Topics

Here we have a custom post type for “Stories” with two custom taxonomies: Locations and Topics

#CMSX #ChunkyWP@jeckman

28

These Meta Boxes enable selection of Location / Topic from a pre-defined setThese Meta Boxes enable selection of Location / Topic from a pre-defined set

#CMSX #ChunkyWP@jeckman

Custom Taxonomy CodeCustom Taxonomy Code

29 http://codex.wordpress.org/Function_Reference/register_taxonomy

#CMSX #ChunkyWP@jeckman

Show Custom Meta BoxShow Custom Meta Box

30

#CMSX #ChunkyWP@jeckman

Style Locations BoxStyle Locations Box

31

#CMSX #ChunkyWP@jeckman

Save on SubmitSave on Submit

32

#CMSX #ChunkyWP@jeckman

33

We’ve also got custom meta data here for:•Pull Quote•School•Teacher•Democracy Coaches

#CMSX #ChunkyWP@jeckman

Custom Meta BoxesCustom Meta Boxes• Process for these other meta

boxes is similar:– add_meta_box() passed a

styling function– style function outputs the html

needed– save function added to

save_post action– update_post_meta to store

34

#CMSX #ChunkyWP@jeckman

AttachmentsAttachments

35

http://wordpress.org/extend/plugins/attachments/

#CMSX #ChunkyWP@jeckman

NotesNotes• Search

– WordPress search does not search custom post meta data

– This means secondary html areas– http://wordpress.org/extend/plug

ins/relevanssi/ or other search

• Display– You’ve customized the content

so you can’t rely on <?php the_content() ?>

36

#CMSX #ChunkyWP@jeckman

NotesNotes

37

#CMSX #ChunkyWP@jeckman

Q & AQ & A• Model content first• Find the tradeoff

– More structure = more complexity

– Less structure = less flexibility

• Focus on goals – why before how

• Go forth and structure content!

38

#CMSX #ChunkyWP@jeckman

39

Thank you.Thank you.

John EckmanISITE Design | CMS Mythwww.isitedesign.comwww.cmsmyth.com @jeckman

John EckmanISITE Design | CMS Mythwww.isitedesign.comwww.cmsmyth.com @jeckman

#CMSX #ChunkyWP@jeckman

ResourcesResources• Plugins

– http://wordpress.org/extend/plugins/advanced-custom-fields/

– http://wordpress.org/extend/plugins/custom-content-type-manager/

– http://wordpress.org/extend/plugins/types/ (part of premium toolset)

– http://wordpress.org/extend/plugins/custom-post-type-ui/

40

#CMSX #ChunkyWP@jeckman

ResourcesResources• Plugins

– http://wordpress.org/extend/plugins/posts-to-posts/

• Tools– http://generatewp.com/post-

type/

41