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

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: will be posted in the meetup group after tonight

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!