-
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
www.isitedesign.com
Delight.us
www.cmsmyth.com
Why do we need structured content? If we ever hope to get to adaptive content we need structure.
Arguably, by default, WordPress creates “blobs” – what does in to that big primary WYSIWYG editor is a mixture of headings, subheadings, callouts, images, and other content – but in a fully unstructured way.
But we do actually have some existing metadata: Date Categories Tags Title Excerpt Post Thumbnail / Featured Image Author info (based on the logged in user). Further, media “attached” to the post are tracked as a relationship in meta and can be pulled up, including post-thumbnail.
In this simple example, we get a custom post type for alerts but there isn’t really much complexity to it – otherwise it is mostly a blob. I do get to use the “date published” differently in the template
Meteor slides plugin uses Custom Post Types to enable management of slideshows
This is the code in the template itself – secondary html areas are mapped based on their names
Example showing custom taxonomies. Here we’ve created a custom post type of “Stories” – and added two custom taxonomies, one for Location and one for Topics.
Note: adding ‘ popular_items ’ => NULL, to the $labels array will suppress the “ tag cloud ” on the admin edit screen for the custom taxonomy
Note we’re checking here to see if the nonce is correctly set (prevent forged form submission)
Lengthy discussion about the future of WP – whether relationships between posts belongs in core or not. For now, there is the Posts2Posts plugin