Sharing Headers and Footers Across Multi-Page Websites

Writing DRY (Don’t Repeat Yourself) code (markup, or styles) is a core concept of efficient and maintainable development. If you are repeating yourself, there’s likely a better way of addressing the challenge you’re solving. Headers and footers shared across multiple pages are prime candidates for a DRY method as they repeat in an identical fashion.

I’ve been building multi-page sites which have the same header and footer on each page of the site. I was finding myself copying and pasting the HTML for the header and footer to each page so that these sections would be hard coded on each individual page. If a change needed to be made, such as adding a new link to a navigation menu, that change would need to be made on each page of the site — this was inefficient development and created substantially more potential for errors.

There’s a better and DRY way of sharing identical content across pages which we will walk through in this post. By the end of this post we will have built a 2-page website with a shared header which will appear at the top of both pages, and a style sheet which will also apply to both pages.

We are working locally, but almost all hosting providers already have the tools we will be using installed and available to you at no additional cost included in your hosting package.

How to Share a Single Header (Or Any Other Element) Across Multiple Pages

HTML on its own does not provide us with the tools we need to solve the problem of writing content like headers and footers once and sharing them across multiple pages. We’ll be solving this by leveraging an additional tool, the language PHP, which is already installed and available to you if you are hosting websites with almost any major hosting provider.

I am new to PHP and have so far learned just enough to solve this problem — learning this amount of PHP took me about 30-seconds as we’re only using one statement from the language, so don’t feel intimidated about needing to learn a whole new language to make use of this method.

PHP will allow us to create blocks of HTML which we can call upon to be inserted into our other pages. If you have worked with partials in SASS/SCSS this will be a very familiar and similar process.

Since we will be working on our computers rather than pushing everything live to a hosting service, we will need a server with PHP installed locally.

Getting a Server with PHP

We need a way to actually serve up our PHP files and so we’ll need a local server to handle this. You can create a local server on your computer by downloading MAMP which allows you to create a local server with PHP already installed.

You can download MAMP for free here: https://www.mamp.info/en/

(NOTE FOR WINDOWS USERS: MAMP stands for Mac, Apache, MySQL, PHP, and while they claim to work on Windows computers, I have only tried this on a Mac. I’d recommend following along with MAMP if it works for you, but if it doesn’t, there appear to be similar Windows alternatives around. Try googling “WAMP.”)

Setting up MAMP is as easy as clicking through the standard install options. I changed absolutely nothing in my installation and am working with the out of the box setup.

Install MAMP before moving on.

Create a Simple Website

We’ll create a 2-page site with a shared header.

Once complete we will have a home page, a contact page, a style sheet, and a header which will populate to both pages.

Create Your Project Files and Folders

Locate the “MAMP” folder, and the “htdocs” folder within “MAMP”. In the folder “htdocs” create a new folder for your project. If you’re working on a mac, MAMP should have installed into your Applications folder.

Applications>MAMP>htdocs>nameOfYourProject

In your new project folder create the following:

  • index.php
  • contact.php
  • partials ← FOLDER
  • header.php ← within the “partials” folder
  • styles.css
What your file and folder setup should look like

The folders “MAMP” and “htdocs” should already exist after you’ve installed MAMP.

“testWithPHP” is the name of the project folder I created. Yours will be whatever you named the “nameOfYourProject” folder.

The rest of your setup should be identical.

What we just created:

  • index.php — As always, index is the homepage of your site.
  • contact.php — This will be a simple contact page, which will serve the purpose of having a second page for our site so that we can see the header populating to more than one page.
  • partials — This folder will contain the PHP partials which will populate on the other pages of the site. We will only be creating a header.php partial, but the partials folder could contain other partials such as a footer. It could even contain partials nested in other partials, like a list of navigation links which you might want to reuse throughout your site.
  • partials/header.php — This will contain the markup for our header.
  • styles.css — This will be a style sheet which we’ll apply to the pages of our site.

Building the Website

Let’s put some content in those index.php and contact.php pages!

We’re going to keep it super simple and build a very bare-bones site.

We’ll start by building out the header in the index.php file, and then once we’re satisfied with the header, we’ll cut it from the index.php file. We’ll then place the header in the header.php file so that we can reuse it on the contact.php page.

In index.php we’ll set up the page like a normal HTML index file.

Make sure you include the link to the style.css file in your <head> as we’ll be sharing this style sheet on all pages.

<link rel=”stylesheet” href=”styles.css”>

Open index.php in your preferred text editor, paste in the following HTML, and save the file.

IMPORTANT:

  • Once you’ve pasted this in, save your files as index.php, not index.html.
  • Internal links in the nav are .php, not .html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<link rel=”stylesheet” href=”styles.css”>
<title>PHP Test 2</title>
</head>
<body>
<header>
<h1>PHP SITE WITH SHARED HEADER</h1>
<nav>
<ul>
<li><a href=”index.php”>Home</a></li>
<li><a href=”contact.php”>Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>This H2 is on the homepage</h2>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>
</main>
</body>
</html>

Getting Your Local Server Up and Running

Before we’re able to see our website we’ll need to start the MAMP servers so that the PHP files are actually being served.

Open MAMP (not “MAMP Pro,” which will have also downloaded with MAMP).

Open “MAMP” within the “MAMP” folder, not “MAMP PRO”

Click on “Start Servers”.

MAMP Start Servers button

When the servers are started “Start Servers” should change to “Stop Servers”, and the circles next to “Apache Server” and “MySQL Server” should turn green.

What MAMP should look like after the servers have started

Open up your browser and go to http://localhost:8888/nameOfYourProject/index.php. Remember to replace nameOfYourProject with the name of the project folder you created. (Something I failed to remember several times while writing this post…)

You should see your page. Congrats, you’ve just made your first page with PHP!

What the homepage should look like at this point in the project

Adding Styles to Your Site

The process for adding style to your site is identical to any other site you’ve worked on. Your CSS will still be a .css file not a .php file. You can still work with SASS/SCSS/LESS, etc. For simplicity, we’re sticking with simple CSS for this exercise.

We’ll now add some style to our site in the styles.css file which will demonstrate later that we are still able to access the styles.css and other outside style sheets from the link in the head. This will continue to be true even after we move the header to its own PHP file.

I’ve placed two styles in my styles.css file. A background color of “lightblue” for the header section and a background color of “tomato” for the main section.

CSS setting the background of header to lightblue and main tomato

Save your styles.css and refresh your index.php in your browser. You should now see that your header background color has become lightblue and your main background color has become tomato.

Site with lightblue header section and tomato main section

Separating the Header from the Rest of the Site

Now the exciting part! We’re going to remove the header from the rest of the page so that we can reuse it on other pages, such as the contact page, when we build it later.

Go to your text editor and open index.php and header.php.

In index.php cut everything from the top of the opening <html> tag to the end of your closing </header> tag.

Highlight of what to cut from index.php. Cut from the start of <!DOCTYPE html> to the end of </header>

Note that this includes the link to your style sheet, which is why your style sheet will continue to work on other pages of your site once we’ve pulled the header back in using PHP.

Save index.php.

Open header.php, paste in the content you just cut from index.php, and save header.php.

Content cut from index.php pasted in header.php

But how do we get it back on index.php?

Go back to index.php. At the top of your index.php file add the following and save:

<?php
include(‘includes/header.php’);
?>

This will insert the content of header.php into your HTML when the page is served.

You should now have an index.php file and a header.php file with the following content:

index.php with the header removed and the PHP include added

If you go back to your browser and reload your site. It should look exactly the same as before, but your header (and doctype, opening html tag, and head) are being served from your separate header.php file.

Creating a Second Page with the Same Header

To see this in action let’s create that contact page and also pull in the header.

Open contact.php in your text editor and again at the top start with the PHP include which pulls in the header.php content. Then add the rest of the HTML for your contact page.

    <?php
include('includes/header.php');
?>
<main>
<h2>Contact Page with the same header as the homepage</h2>
<ul>
<li>Phone: 123 456 7890</li>
<li>Fax: 555 555 1234</li>
<li><a href="email@email.com">email@email.com</a></li>
<li>Homing Pigeon: You'll need one of our pigeons…</li>
<li>Owl: Muggles need not inquire</li>
</ul>
</main>
</body>
</html>
What the contact.php page should look like in your text editor

Save your contact.php file and open it up in your browser at http://localhost:8888/nameOfYourProject/contact.php. Again remember to replace nameOfYourProject with the name of your project.

You should now see you contact page with the header you built for your homepage.

What the contact page should look like in your browser

Any changes you make to your header can be made in header.php and will automatically appear on all pages of your site.

But You Said Headers AND FOOTERS!!

It’s the exact same process! Replace any part of your site with a PHP file and use the include statement to include it in your pages.

<?php
include(‘includes/whateverYouWantToInclude.php’);
?>

Good luck with your new DRY header and footer skills!

If you see any errors in this post or if there is something which is not clear, please comment and I will do my best to update it!

Title icons made by Freepik and Vectors-Market from www.flaticon.com