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

Streamlining Your Template Structures When Building Themes

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
Tweet

More Decks by Cameron Jones

Other Decks in Technology

Transcript

  1. 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.
  2. 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)
  3. 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...
  4. 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
  5. WordPress Template Hierarchy But this seems a bit backwards to

    me. We’re using the rather complicated template hierarchy...
  6. 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?
  7. WordPress Template Hierarchy But how are we going to get

    the template hierarchy to work with our new approach?
  8. 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
  9. Global Theme Render Function Now we don’t have to worry

    about any new page type not having a header, footer or sidebar
  10. 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...
  11. Global Theme Render Function Let’s apply the template hierarchy logic

    to our render function, but on a smaller level.
  12. 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?
  13. 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
  14. 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.
  15. 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
  16. 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
  17. 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
  18. Template Part Router Now we have a working template part

    router that can scale as we introduce new post types and taxonomies
  19. 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?
  20. 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!
  21. 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.
  22. 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.
  23. 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”.
  24. 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.
  25. 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?
  26. 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
  27. 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.
  28. 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.
  29. Introducing The Hook System We can add our own hooks,

    or call existing hooks at new times
  30. 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
  31. In Summary • Don’t Repeat Yourself • There is no

    right or wrong way to build themes • Use hooks where you can
  32. Digital Makers We are a full-service agency, busy designing and

    building beautiful digital products, platforms, and experiments. digitalmakers.io