Slide 1
Slide 1 text
Streamlining Your Template
Structures When Building Themes
Cameron Jones
Slide 2
Slide 2 text
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.
Slide 3
Slide 3 text
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)
Slide 4
Slide 4 text
WordPress Template Hierarchy
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
WordPress Template Hierarchy
Confusing, huh?
Slide 7
Slide 7 text
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...
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
WordPress Template Hierarchy
So a website will usually look something like this:
Slide 10
Slide 10 text
WordPress Template Hierarchy
But this seems a bit backwards to me.
We’re using the rather complicated template hierarchy...
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
WordPress Template Hierarchy
… just to change this bit
Slide 13
Slide 13 text
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?
Slide 14
Slide 14 text
WordPress Template Hierarchy
Wouldn’t it make more sense if it looked more like this?
Slide 15
Slide 15 text
WordPress Template Hierarchy
But how are we going to get the template hierarchy to work
with our new approach?
Slide 16
Slide 16 text
Global Theme Render Function
Slide 17
Slide 17 text
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
Slide 18
Slide 18 text
Global Theme Render Function
So it’ll look something like this
Slide 19
Slide 19 text
Global Theme Render Function
How do we achieve this with code?
Slide 20
Slide 20 text
functions.php
Slide 21
Slide 21 text
index.php
Slide 22
Slide 22 text
Global Theme Render Function
Now we don’t have to worry about any new page type not
having a header, footer or sidebar
Slide 23
Slide 23 text
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...
Slide 24
Slide 24 text
Global Theme Render Function
Let’s apply the template hierarchy logic to our render
function, but on a smaller level.
Slide 25
Slide 25 text
Global Theme Render Function
It’ll look something like this
Slide 26
Slide 26 text
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?
Slide 27
Slide 27 text
Introducing get_template_part()
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
get_template_part()
Slide 30
Slide 30 text
get_template_part()
Slide 31
Slide 31 text
get_template_part()
Slide 32
Slide 32 text
get_template_part()
Slide 33
Slide 33 text
Introducing get_template_part()
Now how do we use this with our render function?
Slide 34
Slide 34 text
Template Part Router
Slide 35
Slide 35 text
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.
Slide 36
Slide 36 text
The Loop
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
Pro tip: is_listing()
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
functions.php - Theme render function
Slide 41
Slide 41 text
content.php - Template part router
Slide 42
Slide 42 text
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
Slide 43
Slide 43 text
Template Part Router
Now we have a working template part router that can scale
as we introduce new post types and taxonomies
Slide 44
Slide 44 text
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?
Slide 45
Slide 45 text
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!
Slide 46
Slide 46 text
Introducing The Hook System
Slide 47
Slide 47 text
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.
Slide 48
Slide 48 text
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.
Slide 49
Slide 49 text
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”.
Slide 50
Slide 50 text
add_action
Slide 51
Slide 51 text
add_filter
Slide 52
Slide 52 text
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.
Slide 53
Slide 53 text
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?
Slide 54
Slide 54 text
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 tag
● wp_footer - runs right at the bottom of the page
Slide 55
Slide 55 text
Add pagination to listing pages
Slide 56
Slide 56 text
Add header image as a hero
Slide 57
Slide 57 text
Add search form to search results
Slide 58
Slide 58 text
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.
Slide 59
Slide 59 text
Add pagination to listing pages even
when empty
Slide 60
Slide 60 text
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.
Slide 61
Slide 61 text
Introducing The Hook System
We can add our own hooks, or call existing hooks at new
times
Slide 62
Slide 62 text
Run loop_start and loop_end on empty loops
Slide 63
Slide 63 text
A new custom action
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
Post author badge in the comments
Slide 66
Slide 66 text
Post author badge in the comments
Slide 67
Slide 67 text
Change the post title on international talk
like a pirate day (Sep 19)
Slide 68
Slide 68 text
Resources
Slide 69
Slide 69 text
Resources
Some examples of this methodology in the wild include:
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
In Summary
● Don’t Repeat Yourself
● There is no right or wrong way to build themes
● Use hooks where you can
Slide 72
Slide 72 text
Cameron Jones
cameronjonesweb.com.au
@cameronjonesweb
Slide 73
Slide 73 text
Digital Makers
We are a full-service agency, busy designing and
building beautiful digital products, platforms, and
experiments.
digitalmakers.io
Slide 74
Slide 74 text
Thank You!