'Any fool can make something complicated. It takes a genius to make it simple.' —Woody Guthrie

How to Create a Static Header and Footer

by Ethan Glover, Sat, Oct 25, 2014 - (Edited) Sat, Oct 25, 2014

When I set out to learn HTML and CSS, I took my websites off of WordPress and I currently write all the code manually. This includes writing the HTML for every single page, updating the RSS files and sitemap files manually, etc., etc.. One of my biggest annoyances when I started doing this was rewriting the header, footer and navigation bar for every page. Every time I wanted to change something like adding a new social network to the left-hand side or updating the footer to include comments, I had to make that same change on every page.

But, I eventually came across a solution with PHP include. That's exactly what I want to explain how to do here. First, note that pages have to be written in PHP for it to work. So instead of a page having the extension .html, it will have to have the extension .php. Second, when you write these pages locally and open them in your browser, you will not be able to see your included elements. The site must be live on a server that supports dynamic pages in order to work. (For example, I host my site with a standard host, BlueHost. Sites like GitHub and simple Amazon AWS setups only support static webpages.)

Step 1

The first step involves everything you want to remain static across all pages into their own files. For example, you'll see the code for my head and footer sections below. These files are saved in a folder called "scripts" and titled head.php and footer.php respectively.

head.php

<head>
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
	</script>
	<![endif]-->
		<meta charset="UTF-8" />
	<meta name="description" content="<?php echo $description;?>"/>
	<meta name="keywords" content="<?php echo $keywords;?>"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="../stylesheets/stylesheet.css" rel="stylesheet" media="screen">
	<link href="../stylesheets/stylesheetprint.css" rel="stylesheet" media="print">
	<title><?php echo $title;?></title>
			
	<!-- Sumo me next line -->
	<script src="//load.sumome.com/" data-sumo-site-id="bbb5fb4d656be17c4ee1c99e66881100a7866abcc05c90b3959145a01893e040" async></script>
			
	<!-- MathJax -->
	<script type="text/javascript"
		src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
	</script>
			
	<!-- Google Code Prettify -->
	<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>  
 </head>

footer.php

<footer>
	<div id="disqus_thread"></div>
	<script type="text/javascript">
		/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
		var disqus_shortname = 'ethanglover'; // required: replace example with your forum shortname

		/* * * DON'T EDIT BELOW THIS LINE * * */
		(function() {
			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
		})();
	</script>
	<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
	<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-55015534-1', 'auto');
	  ga('send', 'pageview');

	</script>

	<a href="http://jigsaw.w3.org/css-validator/check/referer">
		<img style="border:0;width:88px;height:31px" 
		src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
		alt="Valid CSS!" /></a>
	<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
		<img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
</footer>

So as you can see, there's nothing special here. Just copy pasted code in their own special files. The next step is including these on displayed pages.

Step 2

The only (almost) complicated step is putting your description, title, and keywords into the head file. You'll notice that the file uses <?php echo $description;?> for the description for example. Turns out, this is exactly how you'll include the head file in your page HTML. In your page HTML you'll send the description to the head file. …Confusing? It's simpler than it sounds, take a look below.

<?php
  $description="How to create a static header and footer on your website.";
  $title="How to Create a Static Header and Footer";
  include '../scripts/head.php';
?>

The footer in this example takes nothing extra and is quite easy to implement.

<?php include '../scripts/footer.php'?>

You're Done!

That's it! Now when you upload your files, as long as your include is pointing to the right path/folder (in the same way that you might include a CSS file) your page will display as intended. When you look at the pages source code, it will not show the PHP include, but display the head and footer as if the HTML were written directly into one file.

From now on, if you want to change these elements, you only have to change one file and every page that points to that file will automatically change.

Pro Tip: If you have many pages in many different directories it might be hard to get the paths correct. (For some files you have to go back two levels (../../), and some only one (../)) When I originally wrote my files I created separate files to accommodate each way. This is a naive mistake. You can either link directly to your head and footer files with (http://...). Or you can simply link back as far as possible. So if your pages only go two levels deep doing (../../) on a page that is only one level deep is the same thing. If the code can't go any further, it will simply skip the command to go back more.

Back to Top