1.
#CMSX #ChunkyWP@jeckman
Beyond Posts & Pages:
Structured Content in
WordPress
John Eckman
ISITE Design | CMS Myth

2.
#CMSX #ChunkyWP@jeckman
2
http://www.isitedesign.com/

3.
#CMSX #ChunkyWP@jeckman
3
http://delight.us/

4.
#CMSX #ChunkyWP@jeckman
4
http://www.cmsmyth.com/

5.
#CMSX #ChunkyWP@jeckman
Shirts!
5

6.
#CMSX #ChunkyWP@jeckman
Shirts
First five people to tweet:
“Learning how to make WordPress
Chunky with @jeckman at #cmsx
#chunkyWP”
6

7.
#CMSX #ChunkyWP@jeckman
Agenda
• 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

8.
#CMSX #ChunkyWP@jeckman
Content Strategy 201
8

9.
#CMSX #ChunkyWP@jeckman
Adaptive Content
Five Key Elements of Adaptive
Content:
1.Reusable content
– Content developed to maximize reuse
– Different formats/types available
1.Structured content
– Discrete chunks can be combined in
different ways on different platforms
9
http://www.abookapart.com/products/content-strategy-for-mobile

10.
#CMSX #ChunkyWP@jeckman
Adaptive Content, Cont’d
3. Presentation-independent content
– Design decisions made by platform
based on rules, not by authors
3. Meaningful metadata
– Metadata which can be used by the
platform to drive presentation rules
3. Usable CMS interfaces
– UI and workflow to encourage well
structured and metadata-enhanced
content
10

11.
#CMSX #ChunkyWP@jeckman
WordPress Blobs
11

12.
#CMSX #ChunkyWP@jeckman
Getting chunkier
12

13.
#CMSX #ChunkyWP@jeckman
WordPress Chunks
To 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

14.
#CMSX #ChunkyWP@jeckman
Example: Alerts
14

15.
#CMSX #ChunkyWP@jeckman
Example: Alerts
15

16.
#CMSX #ChunkyWP@jeckman
Code Example (Simple)
16
http://codex.wordpress.org/Function_Reference/register_post_type

17.
#CMSX #ChunkyWP@jeckman
Code
17
Key is register_post_type
Arguments 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/r
egister_post_type

18.
#CMSX #ChunkyWP@jeckman
Example: Slides
18
http://jleuze.com/plugins/meteor-slides/

19.
#CMSX #ChunkyWP@jeckman
Example: Meteor Slides
19

20.
#CMSX #ChunkyWP@jeckman
Code
20
http://jleuze.com/plugins/meteor-slides/

21.
#CMSX #ChunkyWP@jeckman
Code (Cont’d)
21

22.
#CMSX #ChunkyWP@jeckman
More Complex Example
• Client: Generation Citizen
• Custom Post Type for “Stories”
• Secondary HTML Areas
• Custom Taxonomies: Locations,
Topics
• Custom Metadata
• Attachments
22

23.
#CMSX #ChunkyWP@jeckman
Demo – Stories page
23

24.
#CMSX #ChunkyWP@jeckman
Secondary HTML Areas
24
http://wordpress.org/exten
d/plugins/secondary-html-
content/

25.
#CMSX #ChunkyWP@jeckman
Secondary HTML areas
25

26.
#CMSX #ChunkyWP@jeckman
Taxonomies
Custom Post Types can be further
enhanced with custom Taxonomies
In this case that means:
•Register Taxonomy
•Show custom meta box
•Save on submit
26

27.
#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

28.
#CMSX #ChunkyWP@jeckman
28
These Meta Boxes enable selection of
Location / Topic from a pre-defined set
These Meta Boxes enable selection of
Location / Topic from a pre-defined set

29.
#CMSX #ChunkyWP@jeckman
Custom Taxonomy Code
29 http://codex.wordpress.org/Function_Reference/register_taxonomy

30.
#CMSX #ChunkyWP@jeckman
Show Custom Meta Box
30

31.
#CMSX #ChunkyWP@jeckman
Style Locations Box
31

32.
#CMSX #ChunkyWP@jeckman
Save on Submit
32

33.
#CMSX #ChunkyWP@jeckman
33
We’ve also got custom meta data here for:
•Pull Quote
•School
•Teacher
•Democracy Coaches

34.
#CMSX #ChunkyWP@jeckman
Custom 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

35.
#CMSX #ChunkyWP@jeckman
Attachments
35
http://wordpress.org/ex
tend/plugins/attachme
nts/

36.
#CMSX #ChunkyWP@jeckman
Notes
• Search
– WordPress search does not search
custom post meta data
– This means secondary html areas
– http://wordpress.org/extend/plugins/relevan
or other search
• Display
– You’ve customized the content so you
can’t rely on <?php the_content() ?>
36

37.
#CMSX #ChunkyWP@jeckman
Notes
37

38.
#CMSX #ChunkyWP@jeckman
Q & 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

39.
#CMSX #ChunkyWP@jeckman
39
Thank you.
John Eckman
ISITE Design | CMS Myth
www.isitedesign.com
www.cmsmyth.com
@jeckman

40.
#CMSX #ChunkyWP@jeckman
Resources
• Plugins
– http://wordpress.org/extend/plugins/a
dvanced-custom-fields/
– http://wordpress.org/extend/plugins/c
ustom-content-type-manager/
– http://wordpress.org/extend/plugins/t
ypes/ (part of premium toolset)
– http://wordpress.org/extend/plugins/c
ustom-post-type-ui/
40

41.
#CMSX #ChunkyWP@jeckman
Resources
• Plugins
– http://wordpress.org/extend/plugins/p
osts-to-posts/
• Tools
– http://generatewp.com/post-type/
41