Automatically include your header and footer on every page of your website
Ranked #3,366 in Internet, #189,689 overall
Using the same header and footer on every page of your site
Many popular websites use the same header and footer on each individual page contained within the site. This tutorial explains how you can use PHP includes so that you will be able to maintain your website more quickly and easily. For example, if you need to make a change to part of the navigation bar, you will only need to make that change in one place, instead of having to change it on every single page.
What you need to know about website headers and footers
As mentioned above, many popular websites use the same header and footer on each individual page contained within the site. For example, the header image/logo is the same on each page, as is the navigation bar and the site details contained within the footer. With a traditional HTML site (ie one which doesn't have any server-side scripting), if you want to make a change to the navigation bar, you have to make the change on each individual page, which can be very time consuming if your website contains a lot of pages!
Fortunately, there is a solution to this. It involves using PHP, but don't worry, it's a fairly simple technique to use, even if you haven't done any server-side scripting before. This method involves using PHP includes so that you can create one header file and one footer file for your website and then automatically include the content from these files on each of your pages. That way, if you need to make a change to the header or footer, you only need to do so in one place, rather than having to edit every single page within your site.
Before you start doing any work with this tutorial, you need to make sure that PHP is enabled on the webserver where your site is hosted. Otherwise, the PHP files won't work. If you are on a paid hosting plan, there is a good chance that PHP is activated and if so, you're ready to go. If your site uses a free host, then you might not be able to use PHP unless you upgrade, but it's worth checking anyway.
Fortunately, there is a solution to this. It involves using PHP, but don't worry, it's a fairly simple technique to use, even if you haven't done any server-side scripting before. This method involves using PHP includes so that you can create one header file and one footer file for your website and then automatically include the content from these files on each of your pages. That way, if you need to make a change to the header or footer, you only need to do so in one place, rather than having to edit every single page within your site.
Before you start doing any work with this tutorial, you need to make sure that PHP is enabled on the webserver where your site is hosted. Otherwise, the PHP files won't work. If you are on a paid hosting plan, there is a good chance that PHP is activated and if so, you're ready to go. If your site uses a free host, then you might not be able to use PHP unless you upgrade, but it's worth checking anyway.
How PHP includes are used
The code for the header and footer areas are placed in separate files, named header.php and footer.php, respectively. The files for the actual webpages (eg index.php, about.php) should only include code which is unique to that page. All the generic code (ie that which is repeated on all pages) should be placed in the header or footer file, depending on where it appears on the page.The diagram helps explain the concept of PHP includes. The filename for the homepage of the site is index.php, and this index file calls an external file named header.php, which contains the header image/logo and the sidebar navigation. After this, the content that is unique to index.php is displayed. Finally, the index file calls another external file named footer.php, containing the footer details.
Books about PHP from Amazon
If you would like to learn more background information about PHP, you may find the books below useful.
Step by step guide on how to use PHP includes
1) Firstly, you need to convert your website to from HTML to PHP. This is just a matter of changing all the file extensions from .html to .php. You can either do this directly on the webserver (using an FTP program if your website is hosted on a remote server), or if you can prefer, you can do it on your local PC and then upload the files to the webserver and delete the old HTML files.
If you decide to rename the files on your own PC, you will firstly need to make sure that Windows Explorer is set up to show file extensions (by default, these are hidden). To do this, go to Tools -> Folder Options, click the View tab and uncheck the box which says "Hide extensions for known file types" and click OK. You will now be able to change the file extensions. You will probably get a message box warning you that if you change a file extension, the file may become unusable and it will ask if you are sure you want to change it. It is perfectly safe to click Yes on this occasion.
2) Now you can create the header.php and footer.php files.
To create the header.php file, look through the code in your index.php file and cut all the generic header content (including all your HTML header tags, doctype, meta tags, stylesheet link, site logo, navigation and sidebar) and paste it into the header.php file and then save both files. In other words, the header.php file should encompass all the header code right from the opening <html> tag all the way down to the end of your sidebar. To create the footer.php file, open your index.php file and cut all the generic footer content (this could include your site details, copyright message, any credit links etc) and paste it into footer.php. Then save both files. The footer.php file should include all the footer content plus the closing </html> tag.
Once you have completed the above step, your index.php file should only contain the content and code which is unique to that page.
3) Now you can go through all the other pages within your website (eg about.php, contact.php), and delete the header and footer code.
4) You now need to add the PHP includes to the top and bottom of each web page, so that they call the code from the header and footer files. To do this, open index.php and at the very top of the file, add the following line of code:
At the very bottom of the index.php file, add the following line of code:
Save and close the index.php file. Repeat this step for every page within your site.
5) You are now ready to upload all the files to your webserver. I'd recommend that you test all the pages to make sure they are still working correctly. If you view the source of the page, the code will look the same as it did before you converted the pages to PHP. This is because the PHP code is interpreted on the webserver and just the pure HTML is seen by the browser. This means that no one will know that you have used PHP includes, because the component files (eg header.php, index.php and footer.php) are joined together before the user even sees them.
If you decide to rename the files on your own PC, you will firstly need to make sure that Windows Explorer is set up to show file extensions (by default, these are hidden). To do this, go to Tools -> Folder Options, click the View tab and uncheck the box which says "Hide extensions for known file types" and click OK. You will now be able to change the file extensions. You will probably get a message box warning you that if you change a file extension, the file may become unusable and it will ask if you are sure you want to change it. It is perfectly safe to click Yes on this occasion.
2) Now you can create the header.php and footer.php files.
To create the header.php file, look through the code in your index.php file and cut all the generic header content (including all your HTML header tags, doctype, meta tags, stylesheet link, site logo, navigation and sidebar) and paste it into the header.php file and then save both files. In other words, the header.php file should encompass all the header code right from the opening <html> tag all the way down to the end of your sidebar. To create the footer.php file, open your index.php file and cut all the generic footer content (this could include your site details, copyright message, any credit links etc) and paste it into footer.php. Then save both files. The footer.php file should include all the footer content plus the closing </html> tag.
Once you have completed the above step, your index.php file should only contain the content and code which is unique to that page.
3) Now you can go through all the other pages within your website (eg about.php, contact.php), and delete the header and footer code.
4) You now need to add the PHP includes to the top and bottom of each web page, so that they call the code from the header and footer files. To do this, open index.php and at the very top of the file, add the following line of code:
<?php include("header.php"); ?>
At the very bottom of the index.php file, add the following line of code:
<?php include("footer.php"); ?>
Save and close the index.php file. Repeat this step for every page within your site.
5) You are now ready to upload all the files to your webserver. I'd recommend that you test all the pages to make sure they are still working correctly. If you view the source of the page, the code will look the same as it did before you converted the pages to PHP. This is because the PHP code is interpreted on the webserver and just the pure HTML is seen by the browser. This means that no one will know that you have used PHP includes, because the component files (eg header.php, index.php and footer.php) are joined together before the user even sees them.
Conclusion
This tutorial has described how to use a simple but powerful method to re-use the same header and footer throughout your website. It works on all webservers which have PHP enabled.
About the author of this page
My other web-development related pages
If you enjoyed this page, check out the other Squidoo lenses that I have created.
Would you like to join Squidoo?
Join Squidoo!
If you would like to create web pages like this one, why not join Squidoo? Click this link to get started!
Any comments or questions?
If you have any questions or comments about the above tutorial, please add them below and I'll do my best to answer them.
-
-
goo2eyes
Jan 24, 2012 @ 9:08 am | delete
- thank you for sharing this. i have bookmarked your lens.
-
-
-
Inkhand
Jan 9, 2012 @ 10:41 pm | delete
- This lens is very helpful for those of us who have no idea how to use header and footer on each page in a site.
-
-
-
wolfie10
Oct 26, 2011 @ 3:39 am | delete
- still learning. just a few more things to think about thanks for the info
-
-
-
ana_nimoss
Oct 17, 2011 @ 1:26 am | delete
- I love your lenses. I find them very helpful as a newbie, and your lenses are a lot easier to understand than many others. Thank you, indeed!
-
by WebaliciousGuides
Hi, my name is Victoria and I am a 28 year old woman from Norwich, England. Last year I started a new career as a web developer and I'm enjoying it a lot.... more »
- 16 featured lenses
- Winner of 18 trophies!
- Top lens » How to request a job application form via email
Feeling creative?
Create a Lens!
Explore related pages
- Best Forum Platforms Best Forum Platforms
- Learning PHP with Programming Exercises Learning PHP with Programming Exercises
- Which Programming Language Is Best? Which Programming Language Is Best?
- Live Update javascript: tips and tricks for web designers Live Update javascript: tips and tricks for web designers
- Comparing Wordpress and Joomla Comparing Wordpress and Joomla
- The Essentials for Good Web Design The Essentials for Good Web Design
PHP and MySQL Web Development for Dummies
PHP & MySQL Web Development All-in-One Desk Reference For Dummies
Amazon Price: $15.00 (as of 05/31/2012)
I found this book very useful as an introduction to web development using PHP and MySQL. It explains how you can install PHP and MySQL and the necessary web servers on your own computer so that you can develop and test your websites locally. It can also be used as a desk reference in case you get stuck on any aspect of PHP or MySQL.
