All about various WordPress content types and how to store custom data and create relationships with taxonomies. Transcript & slides from WordCamp Omaha.

1. Content-Driven
WordPress Development
Stephanie Eckles @5t3ph thinkdobecreate.com

2. WordPress Is:
• An extremely flexible CMS
• An easily modifiable database
• A strong foundation to jump-start projects
• A growing app platform
• ...Sometimes a blog

3. Can WordPress
do X?

4. Presentation Goals
• See how a content-first development
approach looks
• Review how WordPress displays and relates
content
• Design a structure that supports content-
first development

5. Customizing WordPress
requires a
content-first
approach

6. Benefits of
Content-First Development
• More productive discussions with
content writers
• Better understanding of the site
architecture by designers
• Speedier sites
• More efficient queries
• Less confusion for the end user

8. What is the relationship of
this content to the rest of
the project?

9. A Simple Example:
Blog Considerations
• Categories
• Tags
• Handle multiple authors
• Have related sidebar content

10. For successful
content-first development,
all possibilities for
content relationships
are identified up-front.

11. What events would
cause this piece of
content to be
modified?

12. Dynamic Sidebar
• Dynamic sidebar content will be related
posts widget
• Related posts are based on matching the
category
• They are ordered with the newest first,
displaying up to 5
• They should exclude the current post

13. Content-driven
development means being
very purposeful in
choosing the mechanisms
for data entry.

14. Typical Marketing Website Needs
• Unique front page
• Non-central blog page
• Multi-level navigation
• Multiple menus (header, footer, sitemap)
• Resources section with press releases,
case studies, and white papers
• Lead generation forms
• Landing pages for services
• Search

15. How WordPress
Handles Content

16. Index vs. Home vs.
Front-Page

17. Remnants from
HTML Development
• index.html - default page rendered
- www.site.com/ > loads > www.site.com/index.html
• "Index" equates both "Home" and "Front
Page" for the root site

18. WordPress: Index, Home,
and Front Page
= 3 Different Use Cases

19. index.php
• The lowest-tier default template used if no
unique templates exist above it in the template
hierarchy (we'll circle back to that)
• Can be both the home and front page IF there
is no intention to make the front page unique
- Or if you want to deal with a crazy mess of
conditionals

20. home.php
• Relic of WordPress being a largely blog
platform
• Template for posts if either:
1. Front page settings of site is set to show latest
posts
2. Blog is non-central to the site's focus (i.e. not the
"home" page)
• Then set a different published Page as the "Posts"
page under Settings > Reading

21. front-page.php
• If this exists in a theme, will be first
priority to be used to display the site's front
page, regardless if latests posts or a static page
is chosen
• "Front page" static page can be defined under
Settings > Reading

23. Front Page Dictated
By Site's Purpose

24. WordPress As A Blog
• Create a unique home.php
• Leave default Reading settings to
display latest posts

25. WordPress For A Business
• Create unique front-page.php
• Publish a "Home" page
• Define the "Home" page as the front page
under Reading settings

26. WordPress For A
Business With a Blog
• Create unique front-page.php and unique
home.php
• Publish a "Home" page
• Publish a "Blog" page
• Define the "Home" page as the front page
under Reading settings
• Define the "Blog" page as the posts page
under Reading settings

27. #DoingItWrong
• Not define the front and posts pages
• Create your "home" page template on index.php
• Create a custom page template and write an
unnecessary query to create a paginated blog
template

28. Any Questions on
Index vs. Home vs.
Front Page?

29. Posts v. Pages

30. Posts
• Date-based
• Use categories
• Displayed in RSS feed
• Generally for blog or
news articles
Template hierarchy in
priority order:
- single-posttype.php
(we'll get to that)
- single.php
- index.php

31. Pages
• Generally static
• No categories or
tags
• Hierarchal (can
define parent and
child relationships)
• Usually top-level
content for non-
blog focused sites
Template hierarchy in
priority order:
- Custom template chosen
from Page Attributes
- page-pageslug.php
- page-id.php
- page.php
- index.php

32. Custom Meta

33. Benefits of
Custom Meta Data
• Can be any key/value pair
• Can be displayed automatically in a way
dictated by the theme
• Can be used to affect the main query

34. Greatest Benefit of
Custom Meta Data
• Can be entered via a custom-created meta
box on the edit screen of any post type
• Allows for precise data entry due to
constraints of the form field chosen
• Finer control over display or use
information within the theme
- Example:A meta box for a call-to-action
button would have a text field for the url and a
text field for the button text

36. Custom Post Types

37. Custom Post Type Benefits
• Customize URL structure
- site.com/**posttype**/post-slug/
• Can be excluded from search and nav menu selection
- Useful for: using entries as slide content in a carousel
• Can prevent inclusion in front-end queries
- Useful for: a documentation index displayed only in admin

38. Custom Post Type Benefits
• Limit UI elements on edit page
- Useful for: only showing the title, excerpt, and featured
image to create an image carousel with non-html captions
• Can define menu placement and structure for admin
- Useful for: grouping related CPTs, such as for a Resources
section
• More clearly defined area to edit particular content
- Meaning less calls and emails of "how do I change this?

39. CPT Location:
Theme or Plugin?

40. Marketing Site Example
• Resources Section
- Press releases
- Case studies
- White papers

41. Content-First Considerations:
• What information is related to each unique
content entry
• What is displayed for each entry on the
main resources page
• What is displayed on the single view for
each entry
• Special circumstances for viewing content
• How to make the content easily
maintainable by the end user

42. Content Considerations
For Each Type
• Title
• Full Content / Description
• Document download
• Special Content Case
- Newsletter Issue Archives

43. Resource PageView
Considerations
• Title
• Excerpt
• "Read More" link

44. Single ResourceView
Considerations
• Title
• Full Content
• Access to document
download
- Button for direct
download
• List of other recent
resources of same
type

45. Preparing for Content
• Determine content entry UI elements
- Title
- Editor
- Excerpt
- Meta Box
• Upload field for a document download
- Unique Feature
• A way to link "Issues" for the newsletter CPT

46. Preparing for Content
• Setup a CPT for each resource type
- Benefits:
• Pretty URL: site.com/case-study/name-of-case-study/
• Archive page generation
• More obvious editing access for end user
• Can target edit screen by post type for including
additional meta boxes and taxonomies

47. Custom Taxonomies
• Category-like capabilities
- Can also function like tags if no hierarchy needed or
multiples chosen per post
• Archive page generation
• Easy method to focus queries around
• Can be added to any post type - and even to
users!

48. Taxonomy vs. Meta Box
• Taxonomies are for grouping things
categorically.
• Meta boxes are for data that is customized
per post.

50. Content Structure:
Page Templates
• page-resources.php
- Pro: Easily identified in our theme structure
- Con: Loses association if a content editor
changes the slug
• template-resources.php
- Pro: Keeps association regardless of slug
- Con: Could be applied to other pages by
content editors less familiar with the site's
architecture

51. CPTs And Custom
Taxonomies In
Action!

52. Basic WP_Query $args For Each
Resource Page Section Loop
$args = array(
'post_type' => 'case_study',
'posts_per_page' => 10
)
);

53. Adding the Issues Taxonomy
To Newsletters
$args = array(
'post_type' => 'newsletter',
'posts_per_page' => 10,
'tax_query' => array(
array(
'taxonomy' => 'issues',
'field' => 'slug',
'terms' => 'spring-2014'
)
)
);

55. Content Structure:
SingleView
<?php while ( have_posts() ) : the_post(); ?>
/* Line of awesome */
<?php get_template_part( 'content', get_post_type() ); ?>
/* pagination & comments */
<?php endwhile; // end of the loop. ?>

56. get_template_part()
For A Case Study
get_template_part( 'content', get_post_type() );
==
get_template_part( 'content', 'case_study' );
==
include 'content-case_study.php';

57. Conditional Inclusion
<?php while ( have_posts() ) : the_post(); ?>
<?php
if( 'case_study' == get_post_type() || 'white_paper' == get_post_type() ) {
get_template_part( 'content', 'document' );
} else {
// i.e. 'post' or 'newsletter'
get_template_part( 'content', get_post_type() );
}
?>
/* pagination & comments */
<?php endwhile; // end of the loop. ?>

58. Conditional Sidebar
$resource_cpts = array('case_study', 'white_paper', 'newsletter');
if( in_array( get_post_type(), $resource_cpts) ) {
get_sidebar('resources');
} else {
// For single blog posts
get_sidebar();
}

59. Resources Content Structure Recap
• Create a CPT for each resource type
• Create a custom taxonomy for newsletter issues
• template-resources.php
- Three tidy queries to show each of our resource types

60. Resources Content Structure Recap
• single.php
- Keep a tidy loop with a simple conditional and
get_template_part()
• Create two content templates
- content-document.php for both case studies and
white papers
- content-newsletters.php for... newsletters

61. Applied Benefits Of
Content-First Development
• Conclude that three CPTs are needed
• Find that users would benefit from a meta box and
custom taxonomy
• Know to create one unique template:
- template-resources.php

62. Applied Benefits Of
Content-First Development
• Know to prepare UI elements for two content
parts:
1.content-document.php
2.content-newsletters.php
• Can note template files as wireframe notes for
designers
• Know that your end user will be able to find, edit,
and create new content easily!

63. In Conclusion...

64. A content-first development
approach to WordPress makes for:

65. A content-first development
approach to WordPress makes for:
• cleaner themes

66. A content-first development
approach to WordPress makes for:
• cleaner themes
• less back-tracking and exclamations of
"oh yeah, we need to do this!"

67. A content-first development
approach to WordPress makes for:
• cleaner themes
• less back-tracking and exclamations of
"oh yeah, we need to do this!"
• happier end users

68. A content-first development
approach to WordPress makes for:
• cleaner themes
• less back-tracking and exclamations of
"oh yeah, we need to do this!"
• happier end users
•happier you

69. Q&A Time!
Stephanie Eckles @5t3ph thinkdobecreate.com

70. Q&A Time!
Stephanie Eckles @5t3ph thinkdobecreate.com