Using the PHP Include Function to Template Faster
Today’s tutorial shows how using PHP’s include function for common elements can speed up development time. We’ll go over basic implementation and how to display page specific information (e.g. current menu location) while still using the common file.
Even if you’re the type of designer that outsources anything past XHTML/CSS, you’ll want to read this. Using includes in your next design can drastically cut down maintenance and time spent updating pages. This is PHP for designers at its finest.
How does include() work?
Put simply, the include function allows multiple pages to load the same blocks of code or common elements. This makes maintaining larger sites easy, because you’re able to make changes in one place and have those results effect everything at once. Nobody wants to go through dozens of pages just to update one menu item.
Includes work by taking chunks of code, and rendering it as part of the page. Think of it like reusable puzzle pieces.
Cutting Down the Common Code
As you can imagine, an enormous amount of repeat code is spared when duplicate pieces are put in the same place. Pages with thousands of lines may be reduced to a couple hundred. Scanning code couldn’t be easier. A page’s source code might look something like this before includes:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>PHP Include Demo</title>
<link rel="stylesheet" href="styles/global.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="navigation">
<li class="home"><a href="index.php">Home</a></li>
<li class="about"><a href="about.php">About</a></li>
<li class="services"><a href="#">Services</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>Welcome</h1>
<p>What a wonderfully constructed sentence!</p>
</div>
</div>
</body>
</html>
…and something like this after:
<?php include_once('./includes/header.php'); ?>
<div id="content">
<h1>Welcome</h1>
<p>What a wonderfully constructed sentence!</p>
</div>
<?php include_once('./includes/footer.php'); ?>
As you can see in the code above, all common code for pages have moved to the header.php and footer.php files. This makes editing much simpler, because the only page-specific code is visible.
For successful includes in templates, you will need to change certain pieces inside the included files from page to page. In the next step, we’ll take a look at how to pass variables into the referenced file.
But pages are dynamic!
It’s easy to convert an existing HTML template to include statements. The hard part comes when there are special cases.
If you’re already familiar with the include function, you may have run into a problem when trying to change information contained in the common elements (e.g. the page title) for specific pages. Not all information contained in the common files is the same for each page. Especially with navigation involved, these common elements still needs the ability to change.
Define Page Information
To keep things simple, we’ll stick with two unique elements for each page:
- Change the page title
- Highlight the current location on main menu
Both of these changes are controlled through variables defined on the each page. These will then carry over to the final page render. In order to do this, we’ll need to declare the variables before loading the header include. This lets us have a dynamic include of common code, instead of being stuck with the defaults.
Let’s go back to our earlier example and add in some extra variables. Keep in mind that this should appear at the top of the page file, and above any of the page’s content.
<?php
//Set values for page
$page_title = "Home | PHP Include Demo";
$current_page = "home";
//Load header
include_once('./includes/header.php');
?>
<!-- Page's HTML and content starts here -->
Display the Results
Once you’ve defined the title and current page variables, header.php will now be able to pull the information when loaded. Below are two sample code snippets to display page title and highlight the current menu location.
Page Title
<title><?php echo $page_title; ?></title>
Current Menu Location
This is probably one of the most common conflicts involving includes. Using the code below with the passed variable, the current menu location is assigned a class of “selected”. Some simple CSS styles can take it from there.
<ul id="navigation">
<li class="home"><a <?php if ($current_page == "home") { ?>class="selected"<?php } ?> href="index.php">Home</a></li>
<li class="about"><a <?php if ($current_page == "about") { ?>class="selected"<?php } ?> href="about.php">About</a></li>
<li class="services"><a <?php if ($current_page == "services") { ?>class="selected"<?php } ?> href="#">Services</a></li>
<li class="contact"><a <?php if ($current_page == "contact") { ?>class="selected"<?php } ?> href="#">Contact</a></li>
</ul>
Includes in Action
Now that your pages have a sort of “dynamic” includes, you’ll be able to easily customize results. I’ve taken a screenshot of an example page for reference. Source code for this project can be downloaded below.
Make things much easier to scale, doesn’t it?
Closing Thoughts
This kind of strategy is old news to all the PHP veterans out there, but it’s also a great tool for designers. There’s no limit to the number of elements that you can control from page to page — experiment away! I’ve included the source code of a similar project to help get you started.
If any PHP experts out there have suggestions or tips for best practice, we’d love hear from you. As always, please leave any questions or thoughts in the comments below.
