3.2 Creating Hierarchical Pages and Using Page Templates

Hello, and welcome back to this Tuts+ course on creating content with posts and pages in WordPress. In this part of the course, we're gonna continue working on pages, and I'll show you how to add hierarchical structure for your pages, and also how to use page templates. Now, I was working with the 2019 theme before and that doesn't have page templates, so I've now activated another theme called ColorMag. And you'll find that most themes tend to have some page templates, and what those will do is give you a different layout for different pages. So let's go into the Contact page and edit that. So if I scroll down, I'm in the document pane here, I scroll down, we have this Page Attributes section here, and you might need to highlight that, so you can see it. And we'll ignore the layout section here because that's something specific to the theme, I'm gonna show you the template instead. So we've got a Default template, a Contact Page template, and a Page Builder template. Now, we're on a contact page, so I'm gonna use the Contact Page template. We can also create a parent page if we want, and I'm gonna make that a child of the Home page. I can then update my page, and then if I view my page, you'll see that it looks very different now because I'm using a different theme. So I need to add my widgets all over again, because when you change your theme, you'll have different widget areas. So let's go back into the Customizer, and we'll add the widgets all over again, and you can see there's a whole load of new things being added here because I've got a different theme. So I'm not gonna do this through the Customizer actually, I'm gonna do it through the widget screen because that will make it a little bit easier for you. And I'm gonna dismiss this cuz I'm just doing this for a demo, I don't need to worry about those plug ins. So you can see over here in the right sidebar we've got Search, Recent Posts, and Tag Cloud. Now, I'm going to add those instead to the footer, so I'll put Search and Sidebar, Footer Sidebar One, I'll put the recent posts in Footer Sidebar Two, and I'll put Footer Sidebar Three, can be my Tag Cloud. So now let's have a look at my site, so you can see down here I've got this content here. And there's also an example widget here, so I could add another widget here. So that, having gone all the way around the houses and shown you widget areas, just so I could demonstrate how that works when you change your theme, back on our Contact page, this is using a different template. Now, at the moment it's quite difficult to see any difference from that template, but when you start adding content it will look different from the standard template. But here's my contact form, now, I'm gonna add a hierarchical structure of pages, my contact page, not my contact form, sorry, I'm gonna update that. Checking that, yeah, that's still on that contact page template, and I'm gonna add a new page. I'm gonna use this option over here for adding a new page this time in the menu, and I'm gonna add two offices. So I'm gonna add an office in Liverpool, And if I go into the Document pane here, I'm gonna make that a child of the contact page, and I'll publish that. And I'm gonna add another one. And I'm gonna make that Birmingham, which is my hometown. And again, I'll go in the document over here, and I'll make that a child of the contact page. So if I go back into my pages listing, Contact is a child of home, and Birmingham and Liverpool are both children of Contact. Now, that won't be reflected in the menu, it will be reflected in any widgets that you use that display pages, however. So if you use a widget in your sidebar, or possibly even in a post or a page, that will show this structure, but if you want to add them to your menu in that structure, you need to edit the menu. So I'm gonna do that through the Menu screen this time, you already seen the Customizer and how we do it through that. And here's my menu with the structure, so I'm gonna add contact, Birmingham and Liverpool to the menu. In fact, I'm not gonna add contact, let's remove that, and it's very easy to remove it, but I'm going to add Birmingham and Liverpool underneath Contact. I then save the menu, and then if I go to my site and I hover over Contact, you've got Birmingham and Liverpool here, and we've also got these categories here that we added earlier on in the course. So that's how you use page templates, and you add pages in a hierarchical structure in your site. In the next part of the course we'll summarize what we've covered, I'll go over everything again with you as a recap on what you've learned during the course. See you next time, and thanks for watching.