File Includes in PHP

PHP is a popular open source server-side scripting language. You can learn more via the PHP Manual or on W3Schools.

Using PHP file includes can significantly cut down the amount of code in your page templates. For instance, rather than incorporating header and footer HTML code in each page on your site, you could instead include a single file representing those pieces into your pages.

To use PHP, files must have a .php file extension and any PHP code must reside in PHP tags (example below).

PHP requires a server to interpret the code, so you can't simply open it in a browser like an HTML page. For this reason, we will use MAMP locally (PHP will work automatically when you upload it to your website, since your shared hosting server runs PHP).

Consider a scenario where you have a simple three-page site with home, about, and contact pages. You have already built your page template in HTML and CSS, and all three pages share will share the same header and footer. Rather than maintain redundant markup, you could organize it with PHP like so:

    index.php
    about.php
    contact.php
    /inc
      - header.php
      - footer.php

Here's the code for the pages:

inc/header.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title><?php echo $title;?> | My Website</title>
  </head>
  <body>
    <main>
      <nav>
        <ul>
          <li><a href="/index.php">Home</a></li>
          <li><a href="/about.php">About</a></li>
          <li><a href="/contact.php">Contact</a></li>
        </ul>
      </nav>
      <hr />
      <h1><?php echo $title;?></h1>

inc/footer.php

</main>
  </body>
</html>

Notice we're opening HTML tags in header.php that we're closing in footer.php. We're letting PHP put the page together for us before it hits the browser.

index.php

<?php
  $title = "Home";
  include 'inc/header.php';
?>
<p>Page content goes here</p>
<?php include 'inc/footer.php'; ?>

about.php

<?php
$title = "About";
include 'inc/header.php';
?>
<?php include 'inc/footer.php'; ?>

contact.php

<?php
$title = "Contact";
include 'inc/header.php';
?>
<?php include 'inc/footer.php'; ?>

Notice that since the page title is something that will change across pages we define it as a variable at the top of each page in PHP. When the header.php file loads, it injects the value into the title and h1 tags.

File includes in subdirectories

This will work with pages in folders, as well. For instance, imagine you added a "projects" folder. The folder structure would look like this:

    index.php
    about.php
    contact.php
    /projects
      - index.php
    /inc
      - header.php
      - footer.php

Your projects/index.php page might look like this:

<?php
$title = "Projects";
include '../inc/header.php';
?>
<?php include '../inc/footer.php'; ?>

Notice that the path to the include files just has to go up a directory.

Resolving the path issue in subdirectories

In the step above, linking to pages with a leading slash like this:

<a href="/projects/index.php">Projects</a>

tells the browser to go to the topmost directory of your site to find your page. This works fine if your page is at yourwebsite.com/projects/index.php, but fails if you've nested the folder somewhere like yourwebsite.com/exercises/projects/index.php. While we could resolve it by making an explicit link:

<a href="https://yourwebsite.com/projects/index.php">Projects</a>

That's inefficient as our link now has to go out to the web, only to be returned to its site.

A better way to resolve this issue is to define a path variable before your include files (similar to how we defined $title, above). For instance, in your projects page, you might define it like this:

<?php
$title = "Projects";
$basePath = "../";

include $basePath . 'inc/header.php';
?>
<?php include $basePath . 'inc/footer.php'; ?>

Here, we've created a variable called $basePath that stores the relative path to the top directory of this microsite. Then, we revise the header to inject this variable wherever we need it:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title><?php echo $title;?> | My Website</title>
  </head>
  <body>
    <main>
      <nav>
        <ul>
          <li><a href="<?php echo $basePath;?>index.php">Home</a></li>
          <li><a href="<?php echo $basePath;?>about.php">About</a></li>
          <li><a href="<?php echo $basePath;?>contact.php">Contact</a></li>
        </ul>
      </nav>
      <hr />
      <h1><?php echo $title;?></h1>

Now, each of these links will go to the relative top directory of the site as opposed to the top directory of the domain.