Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Streamlining Your Template Structures When Building Themes

8eb77972cdb278e572a470e0ca7f63ed?s=47 Cameron Jones
November 08, 2018

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


Cameron Jones

November 08, 2018

More Decks by Cameron Jones

Other Decks in Technology


  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

  5. None
  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...
  11. None
  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

  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

  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!