Wrangling the WordPress Template Hierarchy Like a Boss
- 1. Wrangling theWrangling the WordPress Template HierarchyWordPress Template Hierarchy Like a BossLike a Boss
- 2. Let's start from the top!Let's start from the top! index.phpindex.php The FreelancerThe Freelancer
- 3. What is the WordPress TemplateWhat is the WordPress Template Hierarchy Anyway?Hierarchy Anyway?
- 4. What is the WordPress TemplateWhat is the WordPress Template Hierarchy Anyway?Hierarchy Anyway?
- 5. What is the WordPress TemplateWhat is the WordPress Template Hierarchy Anyway?Hierarchy Anyway? A theme is made up of many template parts.
- 6. What is the WordPress TemplateWhat is the WordPress Template Hierarchy Anyway?Hierarchy Anyway? A theme is made up of many template parts. v
- 7. What is the WordPress TemplateWhat is the WordPress Template Hierarchy Anyway?Hierarchy Anyway? A theme is made up of many template parts. That work together to create the pages and posts that are viewable by the site visitors. v
- 8. What is the WordPress TemplateWhat is the WordPress Template Hierarchy Anyway?Hierarchy Anyway?
- 10. Let's start from the top!Let's start from the top!
- 11. Let's start from the top!Let's start from the top! index.phpindex.php
- 12. Let's start from the top!Let's start from the top! index.phpindex.php The FreelancerThe Freelancer
- 13. The Basic LoopThe Basic Loop <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?>
- 18. We're Hiring!We're Hiring! singular.phsingular.ph ppSince WP 4.3Since WP 4.3
- 19. Meet the new employees!Meet the new employees!
- 20. Meet the new employees!Meet the new employees! page.phppage.php
- 21. Meet the new employees!Meet the new employees! page.phppage.php
- 22. Meet the new employees!Meet the new employees! page.phppage.php single.phpsingle.php
- 23. Meet the new employees!Meet the new employees! page.phppage.php single.phpsingle.php
- 24. Meet the new employees!Meet the new employees! page.phppage.php single.phpsingle.php archive.phparchive.php
- 25. Meet the new employees!Meet the new employees! page.phppage.php single.phpsingle.php archive.phparchive.php
- 26. Meet the new employees!Meet the new employees! single.phpsingle.php
- 34. The TeamThe Team
- 45. <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?> Your Basic LoopYour Basic Loop
- 46. <div> <p>Something awesome goes here</p> </div> <div> <p>Something really awesome goes here</p> </div> Your Static HTMLYour Static HTML
- 48. <?php get_template_part('$slug'); ?> Call To ActionCall To Action
- 50. <?php get_header(); ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'template-parts/section-home-visit', 'section' ); ?> <?php get_template_part( 'template-parts/section-home-book', 'section' ); ?> <?php get_template_part( 'sidebar-home', 'sidebar' ); ?> <?php endwhile; // End of the loop. ?> </main><!-- #main --> </div><!-- #primary --> <?php get_footer(); ?> Parts Making the WholeParts Making the Whole
- 51. <div id="school-visit" class="section"> <div class="school-visit-text section-text"> <h2><?php the_field('school_visit_header'); ?></h2> <p><?php the_field('school_section_text'); ?></p> <p class="call-to-action"><span><a href="<?php the_field('school_visit_button_page_link'); ?>"><?php the_field('school_visit_button_text'); ? ></a></span> <?php the_field('school_visit_after_button_text'); ?></p> </div> <?php $attachment_id = get_field('school_visit_image'); $size = "home-school-visit"; // (thumbnail, medium, large, full or custom size) ?> <?php echo wp_get_attachment_image( $attachment_id, $size); ?> </div> One of the PartsOne of the Parts
- 52. Template Parts haveTemplate Parts have a hierarchy too!a hierarchy too! content-book.phpcontent-book.php content.phcontent.ph pp
- 53. Template Parts haveTemplate Parts have a hierarchy too!a hierarchy too! content-book.phpcontent-book.php content.phcontent.ph pp loop.phploop.php loop-book.phploop-book.php
- 54. Don't Get LostDon't Get Lost in Yourin Your TemplatesTemplates
- 55. Alicia St. RoseAlicia St. Rose @IntrepidRealist@IntrepidRealist Review this Session @: http://wclax.reviews
Editor's Notes
- #2: How Many have heard of it?
- #3: You won&apos;t even see your site if this file isn&apos;t present! Every post, page and custom post type answers to it, unless there are some other staff members taking care of things down the pipeline. The index.php is the ultimate freelancer. Wearing many hats. But, in most themes the hat is pretty much the same. Just a basic loop, so all pages, posts and post types look exactly the same. Boring...
- #4: How many have heard of it?
- #5: How many have found this image and gotten more confused after that visit? This wonderfully, interaction resource can found at: http://wphierarchy.com/ But it takes some explainin’ if your not familiar with it. This is going to be my attempt at demystification.
- #6: In most cases, a theme is made up of many different templates and template parts
- #8: That work together to create complete pages, posts and attachments that are viewable on the WWW.
- #9: While, to some, this looks like a foreign mass of confusion, it is readily understood by WordPress. 3. Behind the scenes in the boardroom, WordPress and your theme have teamed up and created naming conventions which they vow to uphold. 4. Because everyone is on the same page, it’s a piece of cake for WordPress to find the right template at the right time.
- #10: It does this through the magic of Query Power, not Curry Powder, Query Power! We don’t have to go into detail about this super power, the WordPress Codex has ample discussion so your eyes can glaze over later. Just know that WordPress is kindly waiting to deliver on any and all of your template files as long as you’ve named appropriately.
- #12: You may have noticed this file in your theme. Is the ultimate sole proprietor. Every post, page, archive, comments list, custom post type etc. answers to it. Unless there are other staff members taking care of things down the pipeline, all the content in your site will be delivered a la index.php’s layout.
- #13: You won&apos;t even see your site if this file isn&apos;t present! Every post, page and custom post type answers to it, unless there are some other staff members taking care of things down the pipeline. The index.php is the ultimate freelancer. Wearing many hats. But, in most themes the hat is pretty much the same. Just a basic loop, so all pages, posts and post types look exactly the same. Boring...
- #14: In some cases the index.php contains just a basic loop, so all pages, posts, custom post types, everything! look exactly the same. Boring… There are ways to spice up this file, diversify, so to speak: you can fill it with tons of conditional loops depending on what type of page your site is dishing up at the moment. But there’s a better way. Hire some staff, ie, additional, more specific template files, let them take care of some of those loops and layouts.
- #15: Eventually, you’ll want your index.php to work only part time, maybe even go on an early retirement. Because you’ll have a whole team of templates taking care of the specific tasks that used to wear old index.php out.
- #16: 1. Let’s start by interviewing some prospects.
- #17: This is a new position that was created in WordPress 4.3+ When you hire singular.php, her job is to display content on all of your posts, custom post types and pages. She doesn’t do comments, or archives nor God forbid the authors pages. The loops and code you task her with will be displayed the same on your static pages and your blog posts, and those cool custom post types you just made.
- #20: Looks like we’ve got to hire a couple more temps, ha, templates. Let’s have singular.php delegate her work to page.php and single.php.
- #21: Of course page.php will handle everything that shows up on the static pages.
- #24: And single.php? Perhaps you were expecting it to be called post.php? Well, it’s not. single.php is more appropriate because it displays the single page view of a post or custom post type as opposed to it’s archive.
- #25: As long as we’re mentioning the archive let’s go ahead and add archive.php to the staff. Man is he necessary! archive.php will busy himself dishing out blog posts and custom post types in a list format with featured images and excerpts? Otherwise, index.php was still going to have to handle that.
- #26: So now we’ve got a pretty solid team! They’re working hard pumping out pages, posts, categories and taxonomy archives. Maybe it’s time for a promotion? More money, less work. Am I right? If you are smart enough to pull that off, you deserve every penny! So Maybe some of the tasks that these temps are doing can be managed by others, more efficiently and more specifically.
- #27: Let’s look at single.php, for example. Do we really want our blog post and custom post types to look the same. We probably want to ixnay comments on the custom post types, eh?
- #28: Let’s say our theme is for a popular children and young adult author, Bruce Hale, for example. We have a custom post type for Books. Because he’s written a lot of books! We need a template on staff that is going to work hard to display his individual books in an appealing way, not like a common blog post. Well, we found the right guy for the job: single-book.php
- #29: He only cares about the single book view. Once he clocks in, he takes the reigns from single.php and diligently works at displaying the unique book layout without unsightlies like comments or post meta .
- #31: He only cares about the single book view. Once he clocks in, he takes the reigns from single.php and diligently works at displaying the unique book layout without unsightlies like comments or post meta .
- #32: Of course, since, as mentioned before, Bruce has written a lot of books, we probably want to hire a new temp to take care of the book archive.
- #33: The perfect qualified candidate showed up: archive-book.php
- #34: Her job is to focus on the list of all of Bruce’s books and display them in a way more fitting of literature.
- #35: Now you could get by with this team for just about any theme. And a quick look at the hierarchical chart is a bit easier to grasp.
- #36: Remember Bruce&apos;s homepage? It has a specific layout that&apos;s different than all of the other static pages. It would be nice if it stayed that way.
- #37: Specialists that can come in. Don’t have to use them all the time, but they come in handy:
- #38: front-page.php Like a gate keeper to the homepage of the website.
- #39: It doesn’t matter what layout template gets turned on in the Admin, front-page.php will not let it slip past. As long as he’s on the staff, that’s what your going to see.
- #40: home.php can be a bit confusing. You’d think it was the Home Page aka Front Page of the website. It’s not, we’ve already got front-page.php working on that.
- #41: So what does home.php do? She provides the home to the listing of your blog posts. Once home.php shows up, archive.php can hand off the blog list task to her!
- #42: Remember way back when I sort of poo poo&apos;d the idea of stuffing a bunch of conditionals into the index.php or any file, for that matter? Well, under the right circumstances, conditionals work quite well! Primarily when dealing with template parts Template parts are files that usually don&apos;t deliver full pages and posts, but rather suppliment or enhance them.
- #43: The most famous are: header.php which delivers the header on every page of your site
- #44: sidebar.php which delivers the sidebar to your pages and posts
- #45: And footer.php which contains the footer info visible on every page of your site. A rule of thumb to follow: The code in full templates can display full page or post on your site. A template part cannot be displayed outside of a post or page. In other, words they don&apos;t stand alone
- #46: You can create any type of Template part. The can contain loops
- #47: HTML
- #48: You can name them anything as long as it&apos;s relevant to and the function of the template part.
- #49: You can add the template part to anything
- #50: Back to Bruce&apos;s home page. Remember it had a specific layout on a template called front-page.php?
- #51: Here&apos;s the simple code of the front-page.php calling the distinctive parts of the page which are in template parts
- #52: Here&apos;s the template part. Just a div. All content is generated by custom field data.
- #53: Content-book.php would override simple content.php. Set up a default template part and create additional templates to target more specific posts or post types.
- #54: Works for any of your template parts..
- #55: Put comments in files to know where you are. “This is the future home of...”