Using PHP for Shared Page Elements

Static pages still exist in some places. This method might not be as easy as using a CMS (such as WordPress), but there are still ways to make things easier on yourself.

Here’s the situation:

You have a coded template that you are using to make your website.
You decide on what pages you are going to need. You copy the template into index.html, projects.html, and contact.html, and a bunch of other pages.
You fill each page with content.
You then decide that that you want to change a small part of the header of the pages. You now have to edit each of the pages so that they match. What a waste of time.
This happens a few more times until you finally learn your lesson. You just set up your pages using PHP and a few functions. Now, you only have to edit one file to change the header of all of your pages.

It’s actually really simple to set up include()‘ed pages with PHP. Using this method, you can save yourself a lot of time. It might seem like it’s not hard to update each page individually, but I guarantee you that once you start to use this system, you’ll never go back to using completely static pages.

To set this up, here’s what you need to do:

Make sure that you have PHP installed. Most webservers have PHP, so chances are you will have it.
Change all .html files to .php files. You don’t have to change anything else – a .php file is the same as a .html file except for the fact that your webserver will run it through PHP before outputting it. (You might also have to change all <a> links on the pages to match this, but we will worry about that later.)
Decide what code makes up the different page elements. This is probably the hardest step, so here’s an example:

Let’s pretend that you have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<title>This is my page.</title>
		</head>
		<body>
			This is the body of my page. I would include some content here.
		</body>
	</html>

You basically want to split your code into three different parts: the header, the content, and the footer. The header and the footer are the shared page elements that we want to optimize. The content will be different for every page.

Use this general idea to determine what the different parts of your code are. Remember, the content is the part that is unique to every page. The header is the part above that, and the footer is the part below that.

Actually split the different parts into different files. Make a folder called includes/ and name the files header.php and footer.php. You don’t need a file here for content – that will differ from page to page.
Add include()s to each of your php files. The above code, when using shared page elements, would look like this:

<?php include( 'includes/header.php' ); ?>
	This is the body of my page. I would include some content here.
<?php include( 'includes/footer.php' ); ?>

This tells the .php file to ‘include’ the other .php files, causing your header and footer to appear.

You can now edit the includes/header.php file or the includes/footer.php file to instantly change the header or footer of every page that is using this system. Pretty cool, huh?

Update any links that still point to the old .html pages. This should be pretty quick – just replace ‘.html‘ with ‘.php‘ where it appears in the html code.

I tried to describe this the best that I could, but I know that my description isn’t perfect. So, if you have any questions, please leave a comment. :)

There are still a few things that we have to cover, but I’ll save them for a future post. Things like page titles aren’t very good when using this system, so we have to make a few modifications. Stay tuned!

Using PHP for Shared Page Elements

Leave a Reply Cancel reply