Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we created and added a style sheet to our first page, admin.php. In this movie, we're going to build on that by starting our second page, manage_content.php. And for this page, we want to reuse the same look that we had for admin.php. Pages would share a common header, footer and other page elements are often said to share the same layout. So what we want to do is create manage content dot php with the same layout that we had for admin.php. Let's start by opening up both pages. So we've got manage_content.php, that's going to be the page that we're working on, and I'm going to open up admin.php.
Which has the layout, all the html that we need to have that same look. So as a starting point let's do a select all on admin.php and copy it and let's just replace everything that's in managed_content.php with that. Then we'lll take out the parts here that are specific to the admin menu and then we're just going to change this to instead say Manage Content. We'll Save that. Now hopefully you cringed a little bit when I did that just now, because as we noted a few times already in this tutorial.
One of the things that makes a great developer is the ability to not repeat yourself. If you find yourself doing big sections of Copy Paste like I just did, that's a sign that you are probably doing something wrong. As we've seen, we can use loops, functions, and include require statements to help us to reuse our code effectively. In this case we can take the html that's going to be common to both pages and move it to separate files which then both pages can include. Then if we want to make a change to our layout later we can change the included files and that change will then appear on all pages that share the same layout. Let's try that instead, so what I'm going to do is grab everything here that's above main.
Everything above that and I'm just going to cut it. So it just gets removed form there. And then I'm going to open a New file. I'm going to Paste it into here. And Save it in widget_corp inside includes. And I'm going to save it as header.php. And then I'll close that up. We'll do the same thing on the footer, so everything from div id footer down. We're going to cut that out of there, make a new file, and we're going to save that in widget_corp, in includes as footer.php. Okay, now, that would work, and we could certainly just have those includes like this.
However, because these are going to be different from a lot of the other kinds of code that's going to be in our includes folder. I'm actually going to go a little farther and just create a new folder called layouts. I'm going to put them inside that. So that'll just help to group them together a little bit more. And I can put all my layouts into a folder called layouts now. So now, we just need to come back over here and actually include those. And we can do that with our PHP tag, include and then we just have to tell it the path to the file that we want to include. So let's look at how we get there. What we need to do is go from manage content, we need to go backwards one directory to go outside of public.
And then we can go into our includes folder, into layouts, and to header.php. So the way that we go backwards a directory is with dot, dot that references the parent directory. So for Manage Content, go to the parent directory. And from there we can then go into includes, into layouts, and into header.php. That's the file that we want. We can do the same thing then down here for the footer. I'll just Copy and Past that in down here, instead of header, it's going to be footer. I'm also just going to bring all this back over to the left side of the page.
Now, you'll notice another thing that's really nice about doing it this way is that our header and footer are now out of the way. We can really focus on what's important on this page which is really just the meat of the page right here in the middle. The header and the footer are just kind of evaporated. Let's try bringing this up in our browser and see if it worked. So save your page, we'll go over to Firefox and we can just click on this link for Manage Website Content. That takes us to managecontent.php, Manage Content, and it has our correct layout. So now we just need to apply that same thing over to our admin page.
So I'll just copy that, and everything from the top of the page all the way down to right above main can be removed and we'll just put in our include instead. Ill also just select those, bring those back over to the far left and then we'll do the same thing at the bottom, take everything out and use our include footer instead. Let's trying bringing that page up again, that's going to be admin.php. And there it is, has the same layout. Now notice that I have untitled up here at the top, so let's actually try and make a change here.
Let's Save this and Close it, save that and close it and let me just get to where I can see the page. Let's go to header.php and instead of untitled, we'll call it Widget Corp, Save it. We'll come back over to Firefox, Reload this page and you'll see we now have a page title here, Manage Website Content. We have a page title here, too. So making a change that included File, made the change to all files which use it. And that makes sense. So you can see that this is a way to work smarter. Okay now that we've done includes for layouts, I also want to do one more before we leave this topic. And that's going to be to put a functions.php placeholder in the includes folder.
So I'm just going to open up text mate again, I'll make a new file, and I'm just, open some php tags in it. And I'll just leave it like that. Well Save it inside widget_corp inside includes, not inside layouts, just inside includes. I'm going to call it functions.php. Save it, and now in our Managed Content page, I can include that file as well and we'll have access to all of those functions. So not in layouts, I don't need that anymore. But inside functions.php, and now, it'll load up anything that I've got in there, any functions that I've got will become available to me in this PHP page.
Let's go back and just load it, make sure we didn't break anything. Reload the page, no problems whatsoever. Now, remember when we talked about include and require, I said that it is actually better when you have functions to use require once. And that'll make sure that it is included, it's required to be included or else we get an error, and it will only be included once. We can do the same thing with our headers, our footers. It's really not as important as it is with functions. Functions can't be defined more than once, so we want to ensure that it only happens one time. So we'll save and our managed content page has it's functions.
Let's just do that last change, also to the admin page. Just so that it has them, too. It doesn't actually have functions right now that it needs. It's just real simple with links. But I can go ahead and include it here, too. Just in case I need it in the future, it'll be there as well. I'll just make it a standard part of what I add to the top of all my pages.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99158 Viewers
56 Video lessons · 112432 Viewers
71 Video lessons · 81245 Viewers
131 Video lessons · 39016 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.