How to Use PHP Header and Footer Templates

Header.php ~ Footer.php ~ Index.php

There’s a really good rea­son to learn how to use PHP header and footer tem­plates, and that’s because it allows you to change one file that will take effect across your entire site. Think: logos, copy­right infor­ma­tion, chang­ing your legal name, whatever…but it alle­vi­ates the chore of hav­ing to make mul­ti­ple edits.

PHP, being a server-side lan­guage, will need for you to have an Apache server set up on your computing-machine. If you don’t have that arrange­ment yet, don’t fear;  there are links over there on the left that will han­dle it for you. Choose which type of OS you’re using, and load up WAMP, LAMP, MAMP or XAMP. And Here’s a tuto­r­ial I found VERY use­ful to show you how to install Word­Press locally. It’s sort of tech­ni­cal, so take your time and do it right the first time. You can also do all the PHP and Word­Press edits on your live site, but I wouldn’t endorse that, if they’re going to be exten­sive at all.

If you’re intim­i­dated by PHP and are think­ing of stay­ing in an HTML/CSS cocoon, don’t worry; you don’t need to be a PHP mas­ter­mind to use it. PHP sim­ply selects what con­tent to put in where after you’ve made it all with HTML/CSS. Sound good? It is!

The How-To Part

  • Cre­ate an index.php file, header.php file, and footer.php file.
  • Cut & paste all your header code, begin­ning way back at your open­ing html tag or doc­type dec­la­ra­tion. If you don’t have one, you should.
  • Repeat with your footer HTML and stick it in your footer.php file.
  • Write two lines of code in your index.php file, one at the top, and one at the bottom:
  • Place this one in the header: <?php include("header.php"); ?>
  • Place this one in the footer: <?php include("footer.php"); ?>
  • Run it on your server. You’re done.

 

Here’s what each file should resemble:

 

header.php:
1
2
3
4
5
<html>
  <body>
    <div class="header">
      Logo, navigation, et cetera goes in here
    </div>

 

footer.php:
1
2
3
4
5
    <div class="footer">
      Footer content goes in here
    </div>
  </body>
</html>

 

index.php:
1
2
3
4
5
6
<?php include("header.php"); ?>
    <div class="mainContent">
      <h1>Header in here</h1>
      <p>Paragraph in here</p>
    </div>
<?php include("footer.php"); ?>

 

Con­grat­u­la­tions!