Difficulty level: Novice
Honestly anyone with knowledge of HTML can do this and trust me it will save you loads of time in the long run. The main idea behind this structure is that anything that is going to be on more than one page in your website is going to be called through a php include. The reasoning behind it is that if you ever plan on updating the design or structure of your site, you’ll be able to do so much quicker through this method because instead of updating each page individually, you’ll only have to update one file. It is also a wonderful solution because of how clean your markup will look.
The first thing we want to do is map out the areas that we are going to be using on every page on our site. Let’s start with the information between our <head> tags.
<head> – include name: “head-constants.php”
Likely culprits in this section include your content type, favicon, stylesheets, javascript and possibly RSS feeds:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/global.css" />
<script type="text/javascript" src="/js/global.js">
<link rel="shortcut icon" href="/images/favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="Development Blog RSS" href="http://www.jaredlunde.com/blog/feed/" />
Next let’s think about the <body> of our document. Since I like to keep similar page structure on all of my sites for easier user navigation, I’m going to include a file that has the <body> tag within it. This file will be required directly after the </head> tag.
<body> – include name: “body-top.php”
<body>
<div class="main">
<div class="content">
Now that I have my main page structure set in body-top.php, I’ll want to include a file within body-top.php that takes care of the header portion of my website.
Header & Navigation – include name: “header.php”
Within header.php, we’ll keep our markup for our logo, navigation, search bar, etc. Anything that will be in the header of every page on your site.
If you have a sidebar that is constant on your entire site, it’d be a good idea to include that as well, but for the sake of length I’m only going to include a footer in this example.
Footer – include name: “footer.php”
The footer is where we will close our body, html and set structure tags. You may also want to include a footer navigation or copyright information in this file as we did with header.php.
</div>
</div>
</body>
</html>
So what does this look like when it is all pieced together into a document?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello World!</title>
<meta name="description" content="An example of a well-structured HTML layout" />
<?php require('head-constants.php'); ?>
</head>
<?php require('body-top.php'); ?>
Here is the rest of our body content.
<?php require('footer.php'); ?>
It’s looks clean and pretty doesn’t it? What’s great is that we can now spend 10 minutes updating all of our pages instead of 10 hours or having to deal with the horror of a massive find/replace.
Very very very simple. I would recomend using smarty templates or another template engine for example. html and php can get messy and is horrible to write, although probably quicker. Think I would like to see next a post on the next step. i.e. having a page.php?url=”some_page” and then showing how to create a really basic cms by querying the url in a database populating the template with different content each time and maybe a nice little .htaccess re-write to sweeten the deal. I’m waiting…
Thank you for the comment, Matthew. Yep, definitely about as simple as you can get. I attribute the speed at which I learned to develop to basic organizational techniques like this, because you can so easily adapt the same principle to PHP classes, database design, etc. By organizing your site’s backend and frontend on paper beforehand, you can really get a sense of how streamlined you can make things. A carpenter doesn’t start building stairs until he has a plan you know? What’s the next step?
The problem I have with using template tools like Smarty is that at some point you’re not exactly learning anything about the different languages, you’re really just learning how to work around a framework – which definitely isn’t a bad thing for some people/projects.
I’ll definitely consider doing a basic CMS with rewriting on my next development post, which if I stay on the track I’ve been on should be in the next week.
Your post shows some of the basics, but if you have a site with more than one layout in your site, you could run into problems with your structure. Plus, having the nested includes like you have, at least for this example, simply adds another unnecessary level of complexity. Why have an include with 3 lines, that just then calls another include…
To help make it more simple, when we are building a small site like your example would be for, we have only header and footer includes. The header contains doctypes, any logic needed for js/css includes, along with possible header and sidebar content, depending on the appropriateness to the design. The one thing that needs to then be addressed is differing title and meta tags. What we do, is at the top of each page we set two variables.
This way we have the proper variables set for $title and $desc that can then be used within header.php to output.
One other quick thing, is that you are using PHP short-tags in your post. Short-tags are improper and full PHP tag should be used in lieu of them. They can be disabled on a server by server basis at the whim of the system administrator, and are therefore poor for portability. Plus, to top it off, to help the situation, PHP6 will be deprecating them, making even more of a case to discontinue using them.
Short tag: <?Full tag: <?phpAdam, what you’ve discussed with two includes is definitely another solution, but for a true novice my example is probably better. I was doing this under the assumption that a reader had little to no real understanding of PHP. In that case, using variables such as $title and $desc that change with the pages is probably not an option. In all honesty, this solution is probably more flexible than what you are talking about as far as varying layouts goes.
As far as I am concerned, it really comes down to a combination of preference and skill level in terms of where you go with your layout.