MOUSELING.net - Using PHP includes for a consistent site layout

Using PHP includes for a consistent site layout

I consider HTML a gift from God, and I love PHP—it's a very powerful aid, and you don't have to do any crazy programming with it. I even find it better not to bother with all of that, if I want to keep "the spirit" of my websites close. The one reason I seeked to use PHP at all was to keep my layouts consistent without having to copy-paste everything, and in the case of changes, and you can do this too!

If you use the same layout on many of your pages and aren't limited by a static host (e.g. Neocities or Nekoweb), and can ensure PHP is on your Web server, then I highly recommend trying it out. One line of copy-pasted code could save your life...

Setting things up

First, ensure you have PHP. That's not a part of this tutorial, so if that's not you, get up and pray.

I would recommend making a folder in your site files called something like /php/, /inc/, /layout/, et cetera... then, inside that, you'll want two files: header.php and footer.php. These can be called whatever you want, though. Top & bottom, start & end, dog & cat... the important part is that they exist, you know where they live, and you can call upon them.

Finally, make sure that all of the pages that you want to use your layout on, you'll want to make them end with .php instead of .html. Update your links accordingly!

Putting your layout in the PHP files

Let's say you have a basic page with the following code:

<html>
<head>
  title>My Website</title>
  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

<header>
  <img src="/img/layout/banner.png">
  <h1>My Website Title</h1>
</header>

<nav>
  <h2>Links</h2>
    <a href="page.php">Page 1</a>
    <a href="page2.php">Page 2</a>
</nav>

<main>
  <h2>Cool Page</h2>
    <p>This is my page for cool things.</p>
</main>

<footer>
  This website belongs to me.
</footer>

</body>
</html>

Your first job is to split this up according to what you use repeatedly and what you change for each page. Let's say that each page only differs by its title and content. Your header.php would become:

<html>
<head>
  title>My Website</title>
  <link rel="stylesheet" href="/css/style.css">
</head>

<body>

<header>
  <img src="/img/layout/banner.png">
  <h1>My Website Title</h1>
</header>

<nav>
  <h2>Links</h2>
    <a href="page.php">Page 1</a>
    <a href="page2.php">Page 2</a>
</nav>

<main>

And your footer.php might become:

</main>

<footer>
  This website belongs to me.
</footer>

</body>
</html>

Using the layout files

With all of this taken out, it looks like there's nothing on the page itself. What happens to the page now?! With nothing surrounding it, the page looks light as a feather... but there's the fun part.

To include a file with PHP is to grab all of its contents, dump it into the current file, and then work with that information. Here, we will use this function taking the layout content we cut away and throwing it back into the file before showing it to the user.

The code we will be using is written like this:

<?php include $_SERVER['DOCUMENT_ROOT'] . '/layout/header.php' ; ?>

I've colour-coded the parts to make it a little easier to read, because it seems a bit daunting at first. You only need to change the red part when you include something. It's quite a strong functionality. To explain what each part does:

<?php ...; ?>: PHP is a language designed from the ground up to be used alongside HTML, and HTML uses <these brackets> to define its tags. But how can a computer tell PHP code from regular HTML? By using these question marks along with the letters php, the computer can tell that this is a PHP tag and act accordingly. Also, PHP code ends with semilicons. Because it's nicer that way.
include: This tells the server to include something.
$_SERVER['DOCUMENT_ROOT'] .: This ensures that the server looks for the file starting at the server's root. Without this, a file like /subfolder/file.php would end up looking for /subfolder/layout/header.php by mistake.
'/layout/header.php': This is the file you are including. You may change whatever is inside the quotes to whatever is applicable.

Armed with this knowledge, we can finally change our page's code. The entire source becomes this:

<?php include $_SERVER['DOCUMENT_ROOT'] . '/inc/header.php'; ?>

<h2>Cool Page</h2>
  <p>This is my page for cool things.</p>

<?php include $_SERVER['DOCUMENT_ROOT'] . '/inc/footer.php'; ?>

From now on, your only worry is whatever's inside the main part of each Web page. As long as your other pages are set up this way too, you can abuse this infinitely.

You're all set up with a PHP-powered layout now. Change one thing about your layout's HTML and everything else will follow suit just dandy!.