How to Use PHP Header and Footer Templates

Header.php ~ Footer.php ~ Index.php

There’s a really good reason to learn how to use PHP header and footer templates, and that’s because it allows you to change one file that will take effect across your entire site. Think: logos, copyright information, changing your legal name, whatever…but it alleviates the chore of having to make multiple edits.

PHP, being a server-side language, will need for you to have an Apache server set up on your computing-machine. If you don’t have that arrangement yet, don’t fear;  there are links over there on the left that will handle it for you. Choose which type of OS you’re using, and load up WAMP, LAMP, MAMP or XAMP. And Here’s a tutorial I found VERY useful to show you how to install WordPress locally. It’s sort of technical, so take your time and do it right the first time. You can also do all the PHP and WordPress edits on your live site, but I wouldn’t endorse that, if they’re going to be extensive at all.

If you’re intimidated by PHP and are thinking of staying in an HTML/CSS cocoon, don’t worry; you don’t need to be a PHP mastermind to use it. PHP simply selects what content to put in where after you’ve made it all with HTML/CSS. Sound good? It is!

The How-To Part

  • Create an index.php file, header.php file, and footer.php file.
  • Cut & paste all your header code, beginning way back at your opening html tag or doctype declaration. 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"); ?>

 

Congratulations!