back to top
shopping basket

View your basket

Memory DVD

What our customers are saying:

I received delivery a little earlier and am delighted with the finished DVD...I know where to come next time!


Keeping the Header and Footer the Same With PHP

Keeping the Header and Footer the Same With PHP

PiciScan Web Design Blog RSS Feed

Posted on: Thursday, 26 February 2015

When I first started writing the PiciScan site out from scratch in Notepad, I would have the header and footer of each page within the body of the individual file I was editing. This was great, I thought, all I had to do was copy the code for the header from the first file, say the photo scanning file, and paste it into the top of each of all the other html files for the site. Well, it was great, until I started wanting to change the navigation, modify the header in some way, or even add a new page to the site. All the html files then needed editing to accomodate these alterations, and, as the site grew, this process took longer and longer. There had to be an easier way.

There was. All I had to do was save all my html files as php files and instead of the code that renders the header, include the following code:

<?php include 'php/header.php'; ?>

Well, that was nearly all I had to do. The code that I had removed had to be placed in a new file, called header.php and placed in a folder on the server, called php.

The above code also works if you want to keep the footer consistent across the site. It would look like this:

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

and be placed in the relevant place in your new php files. Now, in future, all you will need to do if you ever want to modify the header or the footer is modify these two files and upload them to the php folder on your server.

How to build the header.php file

Firstly, let's take a look at what would go into, for example, a new php file called new-page.php. There are certain parts of an html file that are essential, to have it render properly, and there are certain parts of the <head> that you will want to be unique to each page of your site. So, new-page.php might start out looking like this:

<!DOCTYPE html>
<html lang="en">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>Your Unique Web Page Title</title>
<meta name="Description" content="Your Unique Web Page Description">
<?php include 'php/header.php'; ?>
<h1>Your Unique Web Page Heading</h1>
<p>Hello World!</p>

The header.php file can include referencing a common css file, as well as anything else that appears in the <head> and the opening <body> tag.

<link href="/css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="/images/favicon.ico">
  <div class="header">
    <div class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="page-one">Page One</a></li>
        <li><a href="page-two">Page Two</a></li>
        <li><a href="page-three">Page Three</a></li>
  <div class="main-content">

As a browser reads your new-page.php it will get to the <?php include 'php/header.php'; ?> and insert the contents of your header.php file. It is another round trip for the browser to fetch this other file, but it will save you a lot of work.

Mark founded PiciScan in 2010, and sold it in October 2015 to Web By Numbers Ltd, who now employ him! He likes Star Wars, playing escape games and looking after his bonsai tree.

comments powered by Disqus

The Latest From our Scanning Blog

Christmas 2015

Christmas 2015

Posted: 14 December 2015

It’s nearly the time of year to be going up into the loft and bringing down all the Christmas decorations, locating the tree and seeing if those lights from last year still work, or if you need to buy any more...

Read more

The Latest From our Web Design Blog

Box Sizing: Border-Box

Box Sizing: Border-Box

Posted: 24 March 2016

I first came across box-sizing: border-box when it cropped up in a temporary colleague's CSS. I found it pretty annoying when I picked up work that he'd started as it seemed to get in the way. This was because, as I said in a previous post on margin ...

Read more