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

Template Hierarchy

Template Hierarchy

Intro to the WordPress Template System.

WordCamp Columbus

Caleb Burks

July 17, 2015
Tweet

More Decks by Caleb Burks

Other Decks in Programming

Transcript

  1. TEMPLATE HIERARCHY
    intro to the WordPress template structure

    View Slide

  2. ABOUT ME
    ▸ Caleb Burks
    ▸ WC Ninja at Automattic
    ▸ Loves Gummy Bears
    ▸ Tweets at @WPprodigy

    View Slide

  3. WHAT'S A TEMPLATE?

    View Slide

  4. View Slide

  5. HOW DOES THE HIERARCHY WORK?

    View Slide

  6. REQUIREMENTS TO BE A THEME
    ▸ style.css
    ▸ index.php

    View Slide

  7. STYLE.CSS
    /*
    Theme Name: My Theme
    Theme URI: http://awesometheme.com
    Author: Caleb Burks
    Author URI: http://author.com
    Description: Blah Blah
    License: GNU General Public License v3 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: storefront
    */

    View Slide

  8. MAIN TEMPLATES: INDEX
    ▸ home.php - blog homepage
    ▸ index.php - backup for home.php

    View Slide

  9. INDEX EXAMPLE

    View Slide

  10. MAIN TEMPLATES: POSTS
    ▸ single.php - Single Post Page
    ▸ singular.php - Fallback (new)

    View Slide

  11. MAIN TEMPLATES: PAGE
    ▸ front-page.php - static homepage
    ▸ page.php - backup for front-page.php
    ▸ singular.php - Fallback (new)

    View Slide

  12. AREN'T THERE MORE PARTS?

    View Slide

  13. COMPONENTIZED TEMPLATES
    ▸ get_header()
    ▸ get_footer()
    ▸ get_sidebar()

    View Slide

  14. HEADER.PHP
    ▸ wp_head()
    ▸ wp_title()
    ▸ body_class()

    View Slide

  15. FOOTER.PHP
    ▸ wp_footer()
    ▸ date(‘Y’)

    View Slide

  16. SIDEBAR.PHP
    ▸ dynamic_sidebar()

    View Slide

  17. A CLOSER LOOK

    View Slide

  18. View Slide

  19. INCLUDING TEMPLATES
    get_template_part();
    This is essentially a PHP include or require, on
    steroids.

    View Slide

  20. CONTENT.PHP
    Used for posts in the index pages.
    ▸ the_title()
    ▸ the_content()
    ▸ the_excerpt()

    View Slide

  21. OTHER CONTENT TEMPLATE PARTS
    content-single.php for single posts.
    content-page.php for single pages.
    content-search.php for results from searches.

    View Slide

  22. BLOG TEMPLATES
    ▸ index.php or home.php
    ▸ content.php

    View Slide

  23. SINGLE TEMPLATES
    ▸ single.php for single posts
    ▸ page.php for single pages

    View Slide

  24. BUT WAIT,
    THERE'S MORE!

    View Slide

  25. ARCHIVE TEMPLATES
    ▸ Categories
    ▸ Tags
    ▸ Date-Based
    ▸ Author-Based

    View Slide

  26. ARCHIVE.PHP
    Used for displaying archive pages
    ▸ date.php
    ▸ category.php
    ▸ taxonomy.php
    ▸ tag.php
    ▸ author.php

    View Slide

  27. COMMENTS.PHP
    ▸ Author comment highlighting
    ▸ Display gravatars if appropriate
    ▸ Support threaded comments

    View Slide

  28. SEARCH.PHP
    Displays a list of posts/pages based on search
    query.
    ▸ Include the search form again
    ▸ get_search_form()

    View Slide

  29. CUSTOM TEMPLATES

    View Slide

  30. CUSTOM TEMPLATES: ARCHIVES
    ▸ category-$slug.php
    ▸ category-$id.php
    ▸ tag-$slug.php
    ▸ tag-$id.php
    Applies to authors, taxonimies, and CPT's as well.

    View Slide

  31. CUSTOM TEMPLATES: POSTS

    https://codex.wordpress.org/Post_Formats
    Example: content-video.php

    View Slide

  32. CUSTOM TEMPLATES: PAGES
    ▸ page-$slug.php
    ▸ page-$id.php
    OR...

    View Slide

  33. CUSTOM TEMPLATES: PAGES

    View Slide

  34. CUSTOM TEMPLATES: PAGES
    Make your own template with just one extra line of code!

    View Slide

  35. CUSTOM TEMPLATES: PAGES
    How to create a custom home page template:
    1. Copy page.php
    2. Rename it to page-home.php
    3. Add the following comment to the top:
    4. Template Name: Homepage

    View Slide

  36. CONFUSED YET?

    View Slide

  37. AWESOME TOOLS
    ▸ What The File
    https://wordpress.org/plugins/what-the-
    file/

    View Slide

  38. AWESOME TOOLS
    ▸ WPhierarchy.com

    View Slide

  39. AWESOME TOOLS
    ▸ _s
    underscores.com

    View Slide

  40. QUESTIONS?

    View Slide