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.
In your new project folder create the following:
- partials ← FOLDER
- header.php ← within the “partials” folder
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.
- Once you’ve pasted this in, save your files as index.php, not index.html.
- Internal links in the nav are .php, not .html
<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>
<h1>PHP SITE WITH SHARED HEADER</h1>
<h2>This H2 is on the homepage</h2>
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).
Click on “Start Servers”.
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.
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!
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.
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.
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.
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.
Open header.php, paste in the content you just cut from index.php, and save 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:
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:
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.
<h2>Contact Page with the same header as the homepage</h2>
<li>Phone: 123 456 7890</li>
<li>Fax: 555 555 1234</li>
<li>Homing Pigeon: You'll need one of our pigeons…</li>
<li>Owl: Muggles need not inquire</li>
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.
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.
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!