Like many, when I first started learning how to build websites I coded each complete page individually. It only took a few times of having to go through each page separately to update the navigation or fix a bug that appeared later down the road before it dawned on me that there has to be a better way. That was when I learned about using global header and footer files. An include file is one  that is used on some or every page. This way you can make a change in one place and it will take effect globally across your site. This tutorial is meant to help those who are new to web development and have not yet been exposed to using included files. There are different ways to do this, but this is a simple and easy to understand method. Once you get the hang of using code separation, you will eventually begin to learn how to build dynamic websites.

Step  1

Create your html document like normal. I highly recommend building the entire page in one document before splitting it up.  It could get messy if you are opening a tag in one file and closing in different file.

index.html


<!DOCTYPE html>

<html>

<head>

<meta name="description" content="Your meta description" />

<title>My Page</title>

<link rel="stylesheet" href="/css/style.css" />

</head>

<body>

<header>

<nav>

   <div><img src="/images/logo.jpg" alt="logo"></div>

   <ul>

      <li><a href="">Link 1</a></li>

      <li><a href="">Link 2</a></li>

      <li><a href="">Link 3</a></li>

      <li><a href="">Link 4</a></li>

   </ul>

</nav>

</header>

<div class="container">

   <h1>Heading 1</h1>

   <p>Some text.</p>

   <h2>Heading 2</h2>

   <p>Some more text.</p>

</div>

<footer>

   <ul>

      <li><a href="">Link 1</a></li>

      <li><a href="">Link 2</a></li>

      <li><a href="">Link 3</a></li>

      <li><a href="">Link 4</a></li>

   </ul>

</footer>

<script src="/js/some-plugin.js"></script>

<script type="text/javascript">

   (function() {

      //do something

   })();

</script>

</body>

</html>

Step 2

Create a file called called header.php. I usually prefer to create a folder called “inc” or “includes” so I can keep these files organized. Once your layout is complete, you want to put everything in the header file that will be on every page. This usually includes the doctype, opening html tag, head section, opening body tag, header (navigation, logo, ..etc) and opening page container div if using one to wrap your page content. Highlight and cut this section then paste it into your header.php file.

header.php
<!DOCTYPE html>

<html>

<head>

<meta name="description" content="Check out my page using a global header and footer." />

<title>My Page</title>

<link rel="stylesheet" href="/css/style.css" />

</head>

<body>

<header>

<nav>

   <div><img src="/images/logo.jpg" alt="logo"></div>

   <ul>

      <li><a href="">Link 1</a></li>

      <li><a href="">Link 2</a></li>

      <li><a href="">Link 3</a></li>

      <li><a href="">Link 4</a></li>

   </ul>

</nav>

</header>

<div class="container">

 

Step 3

Next create a file called footer.php. This is going to be what is on every page in the footer section. In your index.html page, highlight, cut, then paste into the footer.php file.  If using a container div to wrap each page’s content, start with the closing container div tag down to the closing html tag.

footer.php

</div>

<footer>

   <ul>

      <li><a href="">Link 1</a></li>

      <li><a href="">Link 2</a></li>

      <li><a href="">Link 3</a></li>

      <li><a href="">Link 4</a></li>

   </ul>

</footer>

<script src="/js/some-plugin.js"></script>

<script type="text/javascript">

   (function() {

      //do something

   })();

</script>

</body>

</html>

 

Step 4

Rename your index.html to index.php. Your file will now look something like:

index.php


<h1>Heading 1</h1>

<p>Some text.</p>

<h2>Heading 2</h2>

<p>Some more text.</p>

 

Step 5

Now it’s time to use the header.php and footer.php files.  In your index.php file add php include statements to place the code where you want it.  It will look like this:

index.php


<?php

include '/inc/header.php';

?>

<h1>Heading 1</h1>

<p>Some text.</p>

<h2>Heading 2</h2>

<p>Some more text.</p>

<?php

include '/inc/footer.php';

?>

Now every new page you create, you only have to code that pages content then include the header and footer file. This is handy when you have a large site and need to make adjustments in the navigation or footer. Also depending on the server configuration, you may need to adjust the path to external resources. I prefer to start all paths with “/”, which signifies the root of your site, where your index.php (homepage) will be. Then just add the path to the resource relative to the root.

So now some may be asking “Ok that’s cool, but does that means I’m going to have the same title and meta description on every page?” or “What if I want that script to run only on the homepage?” Well with PHP it’s easy. There are more sophisticated ways to do this, but I’m trying to keep it simple.  With a few variables and if statements you can easily load different information in the header and footer depending on what page it on.

Step 6

For the title tag and meta description, we will need to create and set two variables on each page. It is important to remember to create and set the variable BEFORE including header.php. Then in the header.php file, we will check to see if the variable is set, and then echo that variables value.

So in your index.php file add the following. Note- variable names can be whatever you decide.  Then add the text that you want to use for that pages title and meta description.  So on other pages, you will want to create the $title and $metaD variables and set them to whatever you want those pages to have.

index.php


<?php

$title = "My Homepage";

$metaD = "Welcome to my homepage";

include '/inc/header.php';

?>

<h1>Heading 1</h1>

<p>Some text.</p>

<h2>Heading 2</h2>

<p>Some more text.</p>

<?php

include '/inc/footer.php';

?>

 

Step 7

Now we need to add code to the header.php file. Where ever you want the values of $title and $metaD to be placed we need to check to see if they exist or are not  empty, if it returns false, we will echo a default placeholder.

So it will look something like.

<?php

if(isset($title) && !empty($title)) {

echo $title;

}

else {

echo "Default title tag";

}

?>

So for this example, we would put this between the <title></title>.  The $metaD will be echoed inside of the meta tags content attribute.

header.php


<!DOCTYPE html>

<html>

<head>

<meta name="description" content="<?php

if(isset($metaD) && !empty($metaD)) { 
   echo $metaD; 
} 
else { 
   echo "Some meta description"; 
} ?>" />

<title><?php 
if(isset($title) && !empty($title)) { 
   echo $title; 
} 
else { 
   echo "Default title tag"; 
} ?></title>

<link rel="stylesheet" href="/css/style.css" />

</head>

<body>

<header>

<nav>

   <div><img src="/images/logo.jpg" alt="logo"></div>

   <ul>

      <li><a href="">Link 1</a></li>

      <li><a href="">Link 2</a></li>

      <li><a href="">Link 3</a></li>

      <li><a href="">Link 4</a></li>

   </ul>

</nav>

</header>

<div class="container">

 

Step 8

You can use a similar method to load resources on a specific page. What I like to do is create a variable that is unique to each page, I usually go with something simple like $page. So just like the $title and $metaD, we will need to create and set a variable before the header.php file is included. Set the $page variable as a simple one word string value that signifies what page it is.

Index.php


<?php

$page = "home";

$title = "My Homepage";

$metaD = "Welcome to my homepage";

include '/inc/header.php';

?>

<h1>Heading 1</h1>

<p>Some text.</p>

<h2>Heading 2</h2>

<p>Some more text.</p>

<?php

include '/inc/footer.php';

?>

This will be helpful if we only want to load a javascript file on one page. So if you had a image slider plugin on the homepage, you wouldn’t want that script to load on every page. Those are the types of things that slow down page load time.

This is a little different than echoing values because it will be conditionally printing html. You could place all inside an echo, but when you have html with a bunch of attributes it can get tricky with the use of single and double quotes.

I’m essentially breaking an if statement up into two different sets of php tags. So in the footer of the example, if I only wanted to load the JavaScript file and executing script on the homepage, I can do the following.

 


<?php

if (isset($page) && !empty($page)) {

   if($page == "home") {

?>

<script src="/js/some-plugin.js"></script>

<script type="text/javascript">

   (function() {

      //do something

   })();

</script>

<?php

   }

   else{}

}

else {}

?>

 

Step 9

So our footer file would look something like:

footer.php


</div>

<footer>

   <ul>

      <li><a href="">Link 1</a></li>

      <li><a href="">Link 2</a></li>

      <li><a href="">Link 3</a></li>

      <li><a href="">Link 4</a></li>

   </ul>

</footer>

<?php

if (isset($page) && !empty($page)) {

if($page == "home") {

?>

<script src="/js/some-plugin.js"></script>

<script type="text/javascript">

   (function() {

      //do something

   })();

</script>

<?php

}

else{}

}

else {}

?>

</body>

</html>

So now the JavaScript file will only load on the homepage. Once you get the hang of this concept, you will find there are more effective ways to pull this off. You will even start to break the header and footer up into multiple includes. The rule I follow is, if something is going to be on most or all pages, put that code in a separate file.

I hope this is enough to get you started.  Good luck!

Leave a Reply

  • (will not be published)