Beyond Posts & Pages: Structured Content in WordPress

How to take WordPress from blobs to chunks, creating structured content using custom post types, taxonomies, and metadata.

Transcript

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 2.  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 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
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/ register_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/ extend/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
28. #CMSX #ChunkyWP @jeckman 28 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/ extend/plugins/ attachments/
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/ relevanssi/ 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/ 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
41. #CMSX #ChunkyWP @jeckman Resources •  Plugins –  http://wordpress.org/extend/plugins/ posts-to-posts/ •  Tools –  http://generatewp.com/post-type/ 41