Developing a Simple Website Template with PHP
When developing websites it's always a good idea to look for ways to make the final product easier to maintain. For websites which contain more than a couple of pages, it can be a real time saver if you build them utilizing a template.
To build a template, you need to identify the components which stay the same from page to page throughout your website. For example, there probably is a page header containing your organization's logo and/or name. What about a main navigation area that links to the main sections of your website? How about a page footer?
Background
Before getting our hands dirty, let's talk a little about what our example website looks like behind the scenes. Not the code, but the directory structure. Websites typically consist of many files and folders. In Figure 1 below, you can see the example website is made up of four folders and at least one PHP file.
Figure 1. Directory Structure for the Example Website
Building the Template
So let's say the index.php file contains the following code and we want to create a template component for the main navigation:
...
<body>
<div id="page_header">Page Header</div>
<div id="main_navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About Us</a></li>
<li><a href="/resources/">Resources</a></li>
<li><a href="/events/">Events</a></li>
</ul>
</div>
<div id="main_content">
<h1>Main Content</h1>
...
First, we need to highlight and cut the main navigation code out of index.php. Then paste that code into a new file called main_navigation.html, which will be saved in the "inc" folder. We can now import the code back into index.php using the require() function provided by PHP.
...
<body>
<div id="page_header">Page Header</div>
<?php
//IMPORT THE MAIN NAVIGATION
require($_SERVER['DOCUMENT_ROOT'] . '/inc/main_navigation.html');
?>
<div id="main_content">
<h1>Main Content</h1>
...
Now you just repeat that process for any other template components you may have. For the example website above, we'll also replace the page header code:
...
<body>
<?php
//IMPORT THE PAGE HEADER
require($_SERVER['DOCUMENT_ROOT'] . '/inc/page_header.html');
//IMPORT THE MAIN NAVIGATION
require($_SERVER['DOCUMENT_ROOT'] . '/inc/main_navigation.html');
?>
<div id="main_content">
<h1>Main Content</h1>
...
Once all the template files are in place, you can start creating new pages based on the template. You just need to duplicate one of the files already using the template and customize the page as necessary.
Conclusion
The benefit for using templates is when you need to change something; you only need to update one file. For example, to include a contact us link in the main navigation for all of your pages, you only need to update the "main_navigation.html" file and you're done.
In addition to reducing the maintenance time require for a website, templates make it easier to add things like the Google Analytics tracking code. Or maybe you want to add a search engine to all of your pages. Templates give you the hook needed to easily incorporate content throughout your website.
Related Resources
- PHP Manual: require() – describes the require() and include() functions in more detail.
- PHP Manual: $_SERVER – help documentation for $_SERVER['DOCUMENT_ROOT'].
0 Comments
There are currently no comments.
Leave a Comment