 Over the last seven or eight years, she has been delighting customers with design and development. She runs her shop out of Santa Barbara, and she is here today to talk to you about wrangling the temple hierarchy like a boss. Would you please welcome with me Alicia. Thank you everybody, just a little more background, I was wonderful to get introduced by Chris Lima, kind of a special. I am from Santa Barbara, in addition to creating custom, what I will call small batch, artisan WordPress themes, I also coach people on WordPress on how to use it, and I'm starting a new thing where I sit with them as their right side brain, if they want to DIY their own site, and so I kind of sit with them if they get stuck, and I can quickly help them. So that's just another way that you too could help with WordPress, it's not all about development, you could actually inspire and coach people. So what we're going to talk about today is the template hierarchy, we're going to talk about what it is, we're going to talk about what it does, and then I have a feeling you'll come to your own conclusions at the end on why you should use it. So how many people have actually heard of the WordPress template hierarchy? Look at all you people, how many have visited wphiarchy.com and tried to wrangle this? How many people don't know what that is? Okay, so the people who just raised their hands are my favorite people in the room. I love everybody here, but these people that came in the room who don't know what this is, they came here and they were brave enough to raise their hand and say they didn't know what it was, and they're going to leave here knowing something brand new. It's going to help them. So we're going to demystify the confusion around this crazy chart, and just want to know if you guys are ready to wrangle. Okay, so to start off, a theme is made up of many different templates and template parts. I don't know if anybody's ever looked into their theme file or folder and seen all the different files, and then closed it very quickly and said, I don't need to do this, I can drag and drop. Has anybody done that? Okay, well that's the wrong approach if you want to get far, WordPress, and stand up here and talk about it. Okay, so it's made up of many different templates and template parts, like all these folks. These parts work together to create the pages and the posts and even the attachments that are viewable on your WordPress site. So we'll go back to this rigmarole, that's what we're going to call this. And so let's imagine that WordPress and your theme have teamed up together and they're going to create this bureaucratic hierarchy with job titles for each template file, and having specific titles for these files will enable them to choose the right one for the right job. So you have to make sure that they have their proper job title. WordPress will be able to do this job more efficiently with something called query powder, not query powder. I think I just said query powder, but it's query powder. And we don't have to go into that right now. You can look at what a WordWP query is on the codex and have your eyes glazed over later. But just know that this query is very important to pull the pages and the content that you have on certain types of pages in your theme. WordPress needs to know where you are in your theme at the time, and it can pull the proper page and layout. So how does the hierarchy actually work? So the best place to start is at the top. If anyone's familiar with index.php, you seen that file? Yeah. And you're like, okay, it's cool. It's doing something in the theme. So you might have noticed. What we're going to call the index.php is the sole proprietor. It's kind of like the freelancer. This file does everything. If you don't even have this file in your theme, you're probably not going to see anything. Because this is the one that does the job that's going to produce the content and the layout that's on your pages and your posts and your archives. Even that crazy thing called the comments list. Custom post types. If anyone's done any of those. They're all going to be fed to the front of your site from index.php unless there are other folks on the job force or in the office to do other tasks. So the freelancer wears many hats, but in most themes this hat's pretty boring. It's just the basic loop. The basic loop is, we don't have to go really into deep detail, but that's how your pages and your post types are rendered. Your WordPress is looking to see how many of those you have and keeps looping through them and showing them. So if index.php usually has basic loop, which means that your pages, your posts, your events, other post types like portfolio, they're all going to look just like this. Boring. So you might want to hire more staff to diversify everything, make it look a little better. So eventually you want index.php to only work part-time. Actually you might even want them to go on early retirement. Just get them out of the picture. He's only there in case something fails. You have the wrong template name or something, but index.php, he'll be there to catch it. But you just want him to go golfing. So let's interview some new prospects. How about singular.php? Singular.php is a new file since WordPress 4.3. Singular.php will display the content that's on your posts, your pages, and your custom post types. So as long as you create that file, if it's in your theme, whatever's in that file, even nothing, when you go to a page you're going to see white, a blank page, until you put something in there. You can put something in there like, cool, this is where I'm going to put my single page. And they all know that you have the right file. But it does not handle things like archives or comments or author pages. And it loops through the code and it will display your static pages and your blog posts and your custom post types. Exactly the same. Whatever's in that file, it's all going to look the same. We don't have to worry about index.php anymore because now she's doing that job for him. And you might have changed the layout a little bit. And so now it looks a little different. And so you don't have to worry about everything looking the same. But it's still kind of boring because now you have three things doing the task. One person doing the task for three things and it's boring because sometimes when you create a custom post type, you want a different layout, you want it to look really cool. So we're going to hire some new people. We're going to get page.php. Singular.php is going to delegate some of her work to page. Remember, she was doing posts and pages and custom post types. Now she's like, I'm done with the pages. I can't do it anymore. It's boring. It doesn't move. There's no date. There's no tags. It's like, I'm going to let this guy do it. So this guy is only going to concern himself with pages. We have single.php. She's like, Singular is kind of done with the blog post. It's like getting me nowhere. So Singular.php is going to be the single view of a blog post. And it's incidentally going to pick up your post type as well. And sometimes we know that our post types are special to us. They might be our portfolio items. They might be events to our massage workshops. And we don't want them to look like single blog posts. So even though Singular.php is doing a job, it's still doing a job for two things. And these two folks are not going to deal with your archive. Now I know you guys are aware that when you go to a WordPress site and you look at the blog and you see a list of the blog posts, that's an archive. And sometimes you'll see an archive for custom post types. And it's just listed. Sometimes the layout's really cool. You're like, how did they do that? So that's an archive. So while we're at it, why don't we just hire that person too? And he's extremely necessary because he's going to dish out all those archives secretly. They're not pages that you can find. So they're secretly dynamically generated so that when you land on the archive, it happens to show everything. And so whatever's in that archive.php, he's going to dish it up for everything. That's an archive. So now we have a pretty solid team. We could literally get by with just this. If you're not going too far. You know, maybe you're just like doing a blog. So you have a single post page. Then you have an archive that you can style. You can have your thumbnail and a little excerpt. Or maybe you can have those cool little thumbnails with an overlay that slides up when you hover over it. Not like full jazz. But you can design that in your archive.php. So not only does the archive.php handle the blog archive. Like I said, he does handle the custom post type. And I'm not sure of all you know that custom post types have categories, but they're not called categories. They're called taxonomies. So if you've ever seen that word, it's just a special Latin word for category for your post types. So you can get more confused in WordPress. That's all it is. It's a test. Okay, so now these guys, they don't want to work. They don't want to do all the work. So it's time for a promotion. It's time for more money and less work. For your information, that's how promotion is supposed to work. It's not supposed to be more work, less money because you got promoted. You're supposed to figure out how to work less for more. So we're going to hire some more people to make things run more efficiently and give tasks out specifically. So remember we had single.php. Like I said, blog posts and custom post types are going to look the same. We don't want that. We want to do something special. We want our site to look awesome. We want to make it look custom. We don't want events to look like blog posts with comments on the bottom because there's no need for that. So I'm going to plug my friend here. I don't know. You guys got kids. Anybody read Bruce Hale books? He is a children's book author and he writes books. So he's going to need a custom post type for books because he's written a lot of books and had a happy meal, by the way. That's big. He was in a happy meal. So we need a template on staff that was going to work hard to display his individual books. So in a compelling way and an appealing way, that's not boring. That maybe like this guy is the limit. How would you display a book and all the information that you would need on a page for one of his publications? And so we needed to hire someone for that job. And we found him. This person's called single-book.php. He only cares about a single page that's displaying a book custom post type. We know that he's displaying a single page because single is still in there, but we've also hinted that this guy's only dealing with books. So we put our custom post type book inside the name of the file. So once he clocks in, he takes the reins from single.php and says, give me all that book stuff because that's what I'm all about. I'm going to display these books. I'm going to display it like this, which doesn't look like a blog post at all. It's got published date, thumbnail for the book. There seems to be a couple of testimonials on the bottom, a review on the sidebar, the three places where you can purchase this book, and then something awesome eventually went there in that spot. But the thing is, in single-book.php, this entire layout is coded in that file. And so once that file actually exists with this layout, whenever I go to a page to look at one of his individual books, it will automatically just pull this because I created that file. There are things you could have done. You could have gone into single.php and you could have done a bunch of conditionals and you could have said, if I'm on post type that's book, I'll show this chunk of HTML. Else, show this. And then you have this huge, unwieldy file where it's a bunch of junk in it. And then if you need to change anything or someone comes and takes your site over, they're digging through all this code. And you don't really need to do that. You just have its simple file for book. If you don't want it anymore, just hide it. Throw it away. But you should never do that because you really want to make things unique. You want to make things special for your clients. You don't want to look like you hacked a blog. You never want your site to look like you hacked a blog. So, of course, as we mentioned, Bruce had a lot of books. So he had a book archive. And so instead of having just a list of his books with a little excerpt and read more like a blog, we decided to have thumbnails. And you just click on one to go to the individual page. So we had to hire archive-book. It's our archive file. But now we specifically are using that one for book. And remember archive.php is still in the theme. Single.php is still in the theme. But because these more specific files are there, they are going to ignore the more broader ones. So the more specific you get with your files, just putting them in the theme means the theme will go there first. And so here she is. That's all she's going to do. She's going to archive. She's going to do a really good job, too. This woman. So now this is kind of all you need from that crazy chart that I showed you earlier. This could do the job. Just replace book with the other post-type that you've created. Maybe it's a portfolio. Maybe it's a recording or a movie or an event. But it starts off with index.php. Let me see this. This is swag from LA WordCamp. Is it working? So you have your index.php. Remember that guy? We sent him golfing. And then we hired Singular and Archive. Archive needed a little help with the books. So hired books. I'm not working for me. So hired book. And then we have Singular.php who's like diversified their job here with Single and Page. And then Single went and found an intern, I guess. And then had them working on this. So now we're going to go back to Bruce's homepage. And it has a specific layout that's different than all the other static pages on the site. And everybody knows that that homepage needs to be the vestibule to your house. Like you are like the lobby. It's got to look good. And from that lobby, you go off into the rest of the site. You don't really have to return to the lobby. Not much. So never have a home button in your navigation. Just saying that's old school. You don't want to do that. It's like showing your old school list. And nobody's doing it anymore. Remember your logo is home. Okay, automatically in WordPress it goes home. Spread that knowledge. So your homepage has to look a little different. So this is Bruce's homepage. And we would like the homepage to stay that way. Standard way of creating a homepage is to create a template. And then you go to home page in admin and turn that template on. And then there you have a homepage. Like you'll find a theme that does that. So sometimes the client is kind of curious. They're like cats. They go a moment around in there. You know what I'm saying? And then they kind of turn it off. And you're like the homepage is gone. And there's no way to like client proof that. But there is a way to client proof that. Because you can call in specialist. And one of those specialists is called front page. What the front-page.php file does is whatever is in that file is going to be on the front of the website. Just by creating that file and putting it in the theme folder, that is what's going to be in the front. So there's nothing on there. It's going to get the white screen of death. But you know why it's the white screen of death. Because you created that file and there's nothing in it. That's a test, by the way, to know that it's working. Before you start coding and figure out it's not working. So create the file. And it doesn't matter what the layout template is turned on in the admin. Whatever they do back there, it's not going to affect it because this file is present. And this person will not allow any front page weirdness to get past him. So then there's also another page called the home.php. And this is rarely seen in the theme, but you might have seen it. Because WordPress started off as a blogging platform. Home has always been the list of blog posts. And that might be confusing to people who've actually tried to make a home page and saw a home page. And then they had two home pages in the menu or something and they couldn't figure out what was going on. It's because home literally is where the blog is in WordPress. It's called that. So if you create a template called home.php, you've automatically created the template that's going to render whatever the blog list is going to look like. So maybe your blog list doesn't want to... You don't want it to look like an archive. You want it to look really cool and maybe vague and strange and like Pinterest or something instead of having a list. Well, you can put all that layout and everything in a file called home, create that file. Once that file is created, WordPress will automatically get whatever's in that file to show your blog post. And she's extremely happy to do that job. And the archive person went out looking for her and had enough of the blog. They want to do more important things with their time, like golf. So then when... I believe like a few moments ago I said it might be a bad idea to stuff your files with a bunch of conditional statements and a whole bunch of chunks of code. It's not a bad idea to have those conditional statements and say if, else, or whatever. But you can do it in a way that's more efficient and you can do it with what's called template parts instead of putting chunks of code in one file and having it be like 12 feet long. Some of these template parts we are already aware of and they're already like kind of ingrown in WordPress and that would be the header.php. You notice that on every page there's a get header. That's a template part. And template parts can't stand alone. They're pieces that get pulled into a full template file so that you can use them everywhere you'd like in different files, but there's only one piece, one template part that you get to edit and when you edit that it gets edited across the site. So the header is one of them. You've probably seen sidebar.php where it says get sidebar. And this is like when you're actually... you open your theme and you actually look in the files to read the code. First of all, I had to ask, how many people have actually done that? Okay, that's good. How many people did it for more than 10 seconds? Okay. All right, all right, good. All right, so then you also have footer.php so that will have like your date and time stamp, you know. So template parts can contain quite a few things. It can contain a basic loop that you're going to use everywhere so you just pull that into a theme. It's the same loop. I don't want to repeat the code everywhere. I'm just going to pull it in. It can contain just plain old HTML. There's like a phrase, this is awesome and you want to throw it in different places. You can name them anything you want as long as they're relevant to the function of the template part. And that's called semantics. Semantics means that you name something so you know what the hell it does. Okay, I'm talking to you Bootstrap. You don't name something column 25 in a column 50. You name it, whatever it is doing, come on. I'm a fan, can you tell? I'm a Bootstrap fan. Anyway, you can call it a loop.php, you can call fun stuff and you've got to make sure there's fun stuff in there. Win a vacation. You're going to have that sprinkled through all your theme files. Mailchimp, your email campaign form. You can have that in a template part and you can stick it in a sidebar. You can stick it on a footer. You can stick it inside just the page for your blog or whatever. And you can also have something called content which you might have noticed is already in your theme if you're using the right one to start with, that would be underscores. I'm a huge fan of that. So if you've never heard of that, please go to underscores.me and download it and learn something. I'm serious. Put out by automatic, well developed and it's a great starting point if you want to create whatever you want. So how do you get these into your themes? Into your theme files? It's very simple. You just get it. You type this little tag in and see how we make this thing work again. And you just make sure you got these guys or nothing's going to happen. This is saying PHP, okay? And you get template part and then the part that you named it, you don't need the PHP part. PHP part, everybody knows. Everybody's on the same page. This is PHP. So just put that in there and everything that's in that file is going to show up in that space. And if you wanted to do a lot of your conditionals, you can say get template part loop, else get fun stuff, else whatever. If it's page 35, get the loop. You can do literally stuff like that. You can orchestrate your own site to do whatever the heck you want. And so we're going to go back to Bruce's homepage and he had all these sections in his homepage. He had a school visit section which was here in the top. He also had his latest book and he had a crazy sidebar which we couldn't see in this slide that had a testimonial. And all of this is just, I'm calling it in a basic loop. Instead of content, I'm getting this. This is one of the parts. This is the school visit part. And this is the code in that piece. I also use something called advanced custom fields if anyone's familiar with that. This is another way to client-proof your site. You just create fields for them to fill in the information. And you stick these really cool buff fields, blah, blah, blah, inside your code, inside your layout, they'll never mess it up. They're just going to put the content in those fields, press publish, and watch the magic happen. But you have talked to them in advance to make sure that layout's okay with them. So there's no surprises. So that's... So template parts also have a hierarchy. So you notice in your theme there's a content.php. And whatever's in that, there's a tag called get content, and it's going to pull content.php. But maybe you'd like a little more specific content for a book. And like I showed you, that book page had a thumbnail upload, it also had a description of the book, and it also had a couple of reviews. So that would all be in content-book until we pull that up. It works with loops, works with any of your template parts. And so if we go back to this, some people were wondering what this part was all about. Because before I showed you, you just put the name of the theme, or the template file here, and also I put my template parts in a folder. So this is the path to that actual file. So it's nice to group your template parts into a folder or something. Underscore already does that for you. And so what this does, if I have a section that I created, section.php, and I have section-home-visit.php, if anything happens to my home visit and it disappears, the section.php is a default and will show up in case the other file is missing. So this is kind of like insurance. And finally, just to help you out, you don't want to get lost in your templates. So it's a good idea, before you start coding and getting crazy, that when you actually create one and you're pretty sure you know where it should show up, you might want to just put a little sentence in it and say this is the future home of the book archive. And so then you go to your test server or your website and you put in like BruceHale.com slash books. And if I see a page that says my future home of book archive, then I can breathe and I can go and code in that file. Otherwise it's kind of easy to get lost and maybe you've misnamed something and index has been called off the golf course and you don't know that yet. So index.php is working for you. So it is a good idea to like test out. And I think with that I am complete. And that's me. Okay, so I made this kind of short so we can have questions. All right, I got a little trick for my questions. Have you ever spoken at a WordCamp before? No. Well, you're going to. Because the mics are here. Yes. So how does content.php know to hand over the reins to content-book.php? All right. By the simple fact of content-book being available, that's going to be the one you're going to choose. Let me go back here. And do you see how I say get template part? Hey, where is my? No. Okay. Okay, I'm going to call it. You see here? A section-home visit. If I just called section, then I'm just going to get the section part. But I created a section called home. So let's use your example of book. Content book. So if I was just going to get content here, it would be get template part content. Okay. And I wouldn't need this part. Because content is the base. Now I want book. So I created the file. I put it in my theme. And in this area, I'm going to say content-book. And just by doing that, I'm going to pull it in. So create the file, then call it. And so you're just making things more specific for yourself. The cool part about WordPress isn't about learning something and having to reply it to everybody. It's about people coming to you to make you more specific about something so you can get better skills. So always let your client teach you something new. I had the greatest time working with Bruce. Because I got to learn about children's books and young adult books. And also I had to help him with the information architecture of the site and how he wanted to show his books. And I knew that books had to be specific and he had to be awesome looking. So with this knowledge, you'll be able to make one file that you only work in for books and you never have to worry about the rest of your site looking funny. You know what I mean? Sometimes you'll mess with a file and then you're like, oh my god, it messed up the archive too. I don't know how long ago it got messed up so it looks like I have to scrap this. You know, I don't know if you've been in that position. Did I answer your question? Can you tell me what you think I said? Okay. The book is what you call your custom post type when you create it. Yes. There you go. See, we keep digging. It's like a treasure hunt. And then his nugget is in. He's got the nugget. Okay. That is it. So also Google create custom post types. Please, you can do those on your own. You do not need to plug in. You just don't. All right. Anybody else have a question? And don't be scared to come up here. It's really cool. You have to come up here. So my question is when you go into a page sometimes you might want to say a full width template. How do you actually get one of those PHP templates created and to show up in that dropdown menu so you can select, you know, full width or contact us page. Do you know what I mean? Inside WordPress. What I'm talking about is creating what's called a page template. Okay. So the ling is a little confusing because it's the same word. So a template inside a beam is not the same as a page template that's going to show up in the admin. So there is a header that you put inside a page template that will enable it to show up in the admin. And so if you want that to happen it's a simple thing. It's like a page template colon and you put the name of it and then whatever is in there by simply doing that thing at the header you're going to have it as a selection. Yes, exactly. Exactly. I don't have anything like that. My whole thing I do what I like to call small batch artisan WordPress themes. My clients know exactly what they want. They know exactly what they need and I don't want them to have to turn on something like that. We talk it out ahead of time and they're not getting a theme where they can later on change things around. They're getting what they needed for their business. And so I'm a little different. If you're making a theme for a marketplace you're going to probably see that. And then there's just too many whistles and bells and choices and the next thing you know there's one and there's one on the homepage and you know what I mean it's like just make people what they need. It's not that difficult when she gets the skill under your belt and it's actually really fun. So any more questions? You spoke in there about a get temple field clock. Can you go over that again? The get template field. Oh. Okay. Let me get to go back and see if I can find that. Yeah. I might have to do one of these. Okay. I'm going to tell you. I did kind of do one on my favorite developer plugins. When I say developer plugins they're plugins that force you to use code to use them. They're not some UI where you drag and drop and you don't learn anything. And then like the plugin breaks and you're up that creek. That works. This is going to be on TV. So anyway what this is is a plugin called advanced custom field. And instead of get meta which you might be familiar with when you may use custom fields that are inside of WordPress it's using the field for its plugin. It's an amazing plugin. It'll allow you to create anything. And if you couple that plugin with something called post to post post types to each other this guy's the limit on what you can make.