Streamlining Your Template Structures When Building Themes

Understanding the WordPress template hierarchy is a key component to understanding how themes work. However, many themes, including free, premium and custom, will include some inefficient practices that make them difficult to extend and customise.
In this talk you will:
- Gain an understanding of the theme template hierarchy
- Receive an in-depth look into WordPress actions, filters and template parts
- Learn how to apply this information to building themes that will lead to writing DRYer and more flexible code

Transcript

1. Streamlining Your Template Structures When Building Themes Cameron Jones
2. Streamlining Your Template Structures When Building Themes I’ve been working with WordPress and I’ve encountered a number of themes that are built in a really inefficient way. I’m going to present an approach to building themes that I believe is more efficient and easier to maintain than most of what I’ve seen.
3. Streamlining Your Template Structures When Building Themes It will help if you: • Know a little bit of PHP • Have made some changes to a theme or child theme • Understand different content types in WordPress (posts, pages, categories etc)
4. WordPress Template Hierarchy
6. WordPress Template Hierarchy Confusing, huh?
7. WordPress Template Hierarchy Isn’t this a bit like the good ole days of having to create a new HTML file for each new page??? That seems a little inefficient...
8. WordPress Template Hierarchy To help mitigate this, WordPress has some reusable template functions such as: • get_header • get_footer • get_sidebar Without these, you’d be adding the header, footer and sidebar to every single page
9. WordPress Template Hierarchy So a website will usually look something like this:
10. WordPress Template Hierarchy But this seems a bit backwards to me. We’re using the rather complicated template hierarchy...
12. WordPress Template Hierarchy … just to change this bit
13. WordPress Template Hierarchy One of the fundamental rules of programming is to write DRY code. Don’t Repeat Yourself Needing to call the functions like get_header() on lots of different templates isn’t really DRY code is it?
14. WordPress Template Hierarchy Wouldn’t it make more sense if it looked more like this?
15. WordPress Template Hierarchy But how are we going to get the template hierarchy to work with our new approach?
16. Global Theme Render Function
17. Global Theme Render Function Remember how everything in the template hierarchy flowed back to index.php? We’re going to only use index.php from the template hierarchy and control all the logic inside where the dynamic content goes
18. Global Theme Render Function So it’ll look something like this
19. Global Theme Render Function How do we achieve this with code?
20. functions.php
21. index.php
22. Global Theme Render Function Now we don’t have to worry about any new page type not having a header, footer or sidebar
23. Global Theme Render Function But if we’re adding ALL of our conditional logic to our render function, this one function will get really complicated...
24. Global Theme Render Function Let’s apply the template hierarchy logic to our render function, but on a smaller level.
25. Global Theme Render Function It’ll look something like this
26. Global Theme Render Function Now instead of having to build out a whole page template for each different type of page, we only need to change the small part of the page that will be different. But how?
27. Introducing get_template_part()
28. Introducing get_template_part() The get_template_part function allows us to pull in specific template partials from the theme. It will include the required template part, and can have modifiers to change which template to get. Searches the child theme first allowing for theme specific overrides
29. get_template_part()
30. get_template_part()
31. get_template_part()
32. get_template_part()
33. Introducing get_template_part() Now how do we use this with our render function?
34. Template Part Router
35. Template Part Router To help manage which template parts to pull in, we’re going to use a router. This will effectively replicate the logic of the template hierarchy.
36. The Loop
37. Template Part Router Types of content we need to cater for • Loop has posts ◦ Single post or page ◦ Archive (category, tag, author, post type) ◦ Blog (behaves like an archive but actually isn’t) ◦ Search (also kinda like an archive) • Loop doesn’t have posts ◦ 404 page ◦ Empty archive ◦ Empty blog ◦ Empty search results
38. Pro tip: is_listing()
39. Template Part Router Types of content we need to cater for • Loop has posts ◦ Single post or page ◦ Listing (archive, blog, search) • Loop doesn’t have posts ◦ 404 page ◦ Empty listing
40. functions.php - Theme render function
41. content.php - Template part router
42. Template Part Router Our folder structure: • template-parts ◦ single.php ◦ single-post.php ◦ listing.php ◦ listing-post.php ◦ 404.php ◦ no-posts.php • index.php • functions.php • style.css
43. Template Part Router Now we have a working template part router that can scale as we introduce new post types and taxonomies
44. Template Part Router But the template hierarchy is much more complex. What if you want to customise the template for a certain page? If you have a page at example.com/mypage, you can create a custom template at page-mypage.php. You can’t really do this now. What we have is better because we don’t need to build a whole template just for a small change, but what can we do instead?
45. Template Part Router 1. Make our template part router more complicated not really ideal 2. Put conditional logic in our template parts really good for small changes 3. Use hooks excellent idea!
46. Introducing The Hook System
47. Introducing The Hook System WordPress has a great hook system that allows you to jump in and change things at different places on your site.
48. Introducing The Hook System There are two types of hooks: actions and filters Actions are like a chopping board. You can place whatever you like on it. Filters are like a sieve. You’re given a value, it passes through the filter and comes out the other side changed.
49. Introducing The Hook System You’re probably already using hooks, even if you don’t realise it. The wp_enqueue_scripts action is used for the theme and plugins to add CSS and JavaScript to the site. The the_content filter is used to update the post content. WordPress core uses this to autocorrect “wordpress” to “WordPress”.
50. add_action
51. add_filter
52. Introducing The Hook System Hooks are often better than using templates because it guarantees more consistency between different content types and as plugins and themes are updated.
53. Introducing The Hook System We can use hooks to make small amendments based on the conditions that the template hierarchy is based off What are some examples?
54. Introducing The Hook System Useful actions: • loop_start - runs at the start of the loop • loop_end - runs at the end of the loop • loop_no_results - runs when the loop is empty • template_redirect - runs just before the page starts rendering • wp_head - runs in the <head> tag • wp_footer - runs right at the bottom of the page
55. Add pagination to listing pages
56. Add header image as a hero
57. Add search form to search results
58. Introducing The Hook System But what about archives or searches with no results? loop_start and loop_end won’t run if the loop is empty.
59. Add pagination to listing pages even when empty
60. Introducing The Hook System But this could get really complicated and repetitive if you have lots of hooks onto loop_no_results. Remember, Don’t Repeat Yourself.
61. Introducing The Hook System We can add our own hooks, or call existing hooks at new times
62. Run loop_start and loop_end on empty loops
63. A new custom action
64. Introducing The Hook System Useful filters: • the_content - Change the post or page contents • the_title - Change the post or page title • body_class - Add or remove CSS classes on the body tag • register_post_type_args - Useful for changing custom post types that plugins introduce
65. Post author badge in the comments
66. Post author badge in the comments
67. Change the post title on international talk like a pirate day (Sep 19)
68. Resources
69. Resources Some examples of this methodology in the wild include:
70. Resources • Simple example theme: https://github.com/cameronjonesweb/streamlining-tem plating • Slides: https://www.slideshare.net/cameronjonesweb/streamli ning-your-template-structures-when-building-themes
71. In Summary • Don’t Repeat Yourself • There is no right or wrong way to build themes • Use hooks where you can
72. Cameron Jones cameronjonesweb.com.au @cameronjonesweb
73. Digital Makers We are a full-service agency, busy designing and building beautiful digital products, platforms, and experiments. digitalmakers.io
74. Thank You!