How to Work with Custom Templates in Wordpress

Zac Gordon
A free video tutorial from Zac Gordon
Expert WordPress Educator
4.5 instructor rating • 4 courses • 15,891 students

Learn more from the full course

Complete WordPress Theme & Plugin Development Course [2020]

Everything you need to become a hirable WordPress Developer building custom themes and plugins

16:04:39 of on-demand video • Updated January 2020

  • PHP for WordPress - The Loop, Conditionals, Hooks and More!
  • How to Work with Child and Starter Themes Like Pro
  • The Ins and Outs of the Template Hierarchy - Always Know What File to Customize
  • How To Enqueue and Work with JavaScript and CSS in Themes
  • The Complete List of Template Tags To Use When Customizing and Extending Themes
  • A Deep Understanding of How to Use Action and Filter Hooks to Programmatically Control WordPress
  • A Solid Starter Template For Building Your Own WordPress Plugins
  • Common Practices and Techniques for Building Custom WordPress Plugins
English [Auto] One of the greatest files in the Wordpress template key themes stack is the ability to create custom with any namedrop ph files so it's not being named customed up. It could be page dash wide page dash splash whatever you want to name it. It doesn't. There aren't any real hard core naming conventions around there but I will talk about some ideas. So if you don't have one of these then it will fall back to page speech. If you're dealing with a custom template for a static page or it'll fall back to single ph. If you're trying to apply a custom template to a post which is possible as well and then of course both of those fallback to a singular Dopp each piece and then ultimately indexed up each. So let's take a look at how we could set up a custom template. So we're going to start off with just popping open our page Dopp ph p. So let's grab our page up here and we'll do a simple file save as and we're going to save this as a template hyphen splash. So what we're going to do is we're going to set up a custom template that could be used for any page or post on the site as a special splash page. Now the naming convention around this if you're doing something that is just going to be used for pages you might want to call it something like page Tasche splash although that may conflict if you have a tag of a page called or a slug called slash then that's going to override it. So that could be a potential issue. The same could be said if you want to if it's a custom template just for posts then you could call it single dash whatever it is. But I'm going to choose a generic one. And I'm not saying I recommend this for all scenarios. You could call it whatever you want to name and how you want. You could also name it splash you could put it in a set of other folders. But for this case I'm going to call it template splosh because it makes sense it's a custom template and it's going to be splosh which is somewhat descriptive. So once I save that I've got my template splash and we'll call it template splosh and we've done this a number of times. Let's just go ahead and have this poll in our Splash Hutter and we'll do the same in our footer and have it poll and our Splash footer but we do have to strip out the sidebar and we're going to throw in that extra class of extended. So this is good but this is not actually going to get picked up by word press yet because we've named it outside of the template hierarchy. It will notice that this file is there but it won't know what to do with it and where to make it an offering. So what we have to do is add a special ph P comment at the top. And this could go inside of our call here. I'm just keeping them separate for clarity. Two forward slashes and then template name. And we're going to call this splash page. Adding this specific comment WordPress will scan all these files. So WordPress will see this comment template name and then it will pull in whatever appears after that and it will make it available to WordPress pages by default. Now if we want it to also work for posts we have to say template post type and then we could say post and page. And if we have a custom post type we could throw that in there as well. But in this case we just have posts and pages that were worried about. So when we come into our admin area now we should see this template splash page available to us lets just go ahead and test this out see if its working. So if I come in and I'm just editing my sample page here and on the sidebar under template which we could see right here there is now an option for splash page and if we update that and come over and view the page we could see OK its now got the splash page. This can be super handy. Hopefully you're thinking if you haven't already of all the possibilities of custom types of templates you could do here. I'm just going to go ahead and change it back so we get our navigation back and then I'll show you that we could come in to our blog posts. Hello ph. P let's go ahead and edit this and we should now see an option for post attributes splash page. Now the tricky thing about this and let me show you this before we save it. Notice how we have the author we have the replies and it's loading single about ph P. OK if we update this because we're polling in the page it's going to look different. And what I mean by that is because we're pulling in template parts content page here then that is going to always display pages whether it's a poster or a page. So one thing you might want to do in this case is do a conditional run a conditional statement and check to see if this is a post type of page. Then go ahead and display this. If it's a post type of post then go ahead and do posts instead. Or content. So that could be a little you know heads up to something else you could take this further with but this is really just a simple example of how we could set up a static Arabs or a custom template and we can name it whatever we want. And we could assign it to posts and pages. I'm going to do a quick file save as and I'm going to do another scenario that I think is pretty common. Sometimes you want to have a default theme that has a side bar for pages and then you want to have full width as well. So let's say that we only wanted to have this. We'll leave it for both. But if you remove this again then it's only going to work for pages by default. So all you know yeah we'll leave it. And just so that you have reference to that but maybe we'll change it this way. You don't need to do that but just trying to change it up show you some different options here. So it's going to be full width. But instead of that splash Hutter we just pull that out and we get our normal sight. So that's going to be template full width and it will give us the full site menu. So testing this out on our site again. Let's come back to our home page come into our sample page and edit that and we can see now full with shows up there. Go ahead. Updated view it and it's now a full with post and it's displaying the full width template. Really cool. Again the possibilities for working with this are are really almost unlimited and I find in most custom projects at some point I'm spinning up a custom template so go ahead and catch up with what we've done. We created a splash template and we created a full width template and we could play around with making them available to posts and pages. And then in your own site that you're building along with this really think about both for posts what are some maybe custom templates that you might want to have on occasion that are done a little bit differently and for pages. What are some different page options that you think you might encounter. Whether it's just for your own site and your own needs or if you're building something that might be used for general wider audience. What are Scott. What are some common scenarios there. So there's plenty to practice with the customer speech. And I really encourage you at this point to not just code through what we have done but take this further in your own project and build out something that really is practical and suits and need therefore you or a potential need or hey it's just a cool idea that you thought of and now you could do it with wordpress. So take a stab at that and then we're going to kind of start shifting gears and picking up some loose ends of the template hierarchy from here on out starting with looking at four or four page templates.