Have you ever found yourself repeating code on each new HTML page you create? Say, a navigation bar on top of each page. The code is the exact same on every page, so a lot of copy/pasting is going on. What's worse is, that if you need to change some of the code, or you need a new button/link in the navigation bar, you would have to go through each and every page and make that change. Imagine you are creating a website with ten pages, then make a change in the navigation bar in one page, now you have to make that change nine more times. BAD!
If your site is on a PHP enabled server, you are in luck! With PHP you can create a sort of template for anything that is repeated on multiple pages. And it's simple too. Even so, when you edit the PHP template, all pages that holds this content is updated automatically.
We all know the following piece of markup, right? A simple HTML page, that can be used as a base for developing a super, fancy, smart and nice web page. Of course it requires some more content and A LOT of styling. As you can see in the code, the nav container holds a simple navigation system with links to three pages (the page with the code included) so let's create that. Create a file named index.php (we use the extension .php because we will be adding PHP code to it shortly) and paste this code inside:
HTML code - index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Repeatable content</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="page-1.html">Page 1</a>
</li>
<li>
<a href="page-2.html">Page 2</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Page title</h1>
<p>
Some page content that should probably fill more than this line.
</p>
</main>
<footer>
<small>Made by me.</small>
</footer>
</body>
</html>
Now we have to decide what part of our code is repeated on every page, that is the top part, which I have highlighted. This is the code we should put in a template file. Let's create that template file. We'll call it header.php. Highlight the top part of the code (from index.php) cut it out (CTRL + x) and paste the code inside header.php (CTRL + v).
HTML code - index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Repeatable content</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="page-1.html">Page 1</a>
</li>
<li>
<a href="page-2.html">Page 2</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Page title</h1>
<p>
Some page content that should probably fill more than this line.
</p>
</main>
<footer>
<small>Made by me.</small>
</footer>
</body>
</html>
When you have pasted the code into header.php, we must also remember to change the extension in the link paths from .html to .php.
There is one little problem! The title <title>Repeatable content</title> will be the same on every page. This is luckily easy to fix, but I'll get back to that later.
HTML code - header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Repeatable content</title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="page-1.php">Page 1</a>
</li>
<li>
<a href="page-2.php">Page 2</a>
</li>
</ul>
</nav>
</header>
Then simply insert the include code (with PHP tags) in place of the cut out code:
PHP code - index.php
<?php
//Where ever you put this line in the document is the exact
//place where the content from header.php will be "loaded" into
include ('header.php');
?>
<main>
<h1>Page title</h1>
<p>
Some page content that should probably fill more than this line.
</p>
</main>
<footer>
<small>Made by me.</small>
</footer>
</body>
</html>
Do the same with the footer. Create a file footer.php and paste the bottom part (from <footer>) into footer.php.
Replace with include ('footer.php') surrounded by PHP tags;
PHP code - index.php
<?php
//Where ever you put this line in the document is the exact
//place where the content from header.php will be "loaded" into
include ('header.php');
?>
<main>
<h1>Page title</h1>
<p>
Some page content that should probably fill more than this line.
</p>
</main>
<?php
//Where ever you put this line in the document is the exact
//place where the content from footer.php will be "loaded" into
include ('footer.php');
?>
And the code that should be in footer.php:
HTML code - footer.php
<footer>
<small>Made by me.</small>
</footer>
</body>
</html>
That is actually it. You can now create two more copies of index.php and name them page-1.php and page-2.php and everything should work as expected. Try it out...
If we ever wan't to change, let's say the footer, all we have to do is go to footer.php and change things inside there and since every page is including the content from footer.php they will automatically be updated with the new content. Smart, huh?
Oh, I almost forgot! We needed to address the issue with the title being the same on every page. Let's fix this.
We need the title to be different for every page, we need it to vary. I used the word "vary" on purpose, because we will be using something called a variable and a variables content can vary. Sounds exactly like what we need.
I really need to know more about what a variable is...
A variable is like a container that holds whatever you put into it. Technically it puts it into the computers memory, for use later when we need it. But you don't need to worry about the technical stuff. Just know that what we put in the variable, we can use at other places at later times.
So we make a variable by giving it a name and prefix it with a $ sign, like $title.
We then set it equal to something. In this case = 'Repeatable content - Home'
The variable must be declared before we include header.php:
PHP code
<?php
//The variable $title now holds the value 'Repeatable content - Home'
$title = 'Repeatable content - Home';
//Where ever you put this line in the document is the exact
//place where the content from header.php will be "loaded" into
include ('header.php');
?>
Now we can use this variable to output the title through header.php... We open and close with php tags and use an inbuilt function called echo, that simply outputs what we put in after it. In our case we echo out the variable $title, which holds the value 'Repeatable content - Home'.
I definitely need to understand this better...
So in index.php we set the variable $title to
'Repeatable content - Home'.
We then include the file header.php where we echo out the variable
(with the code <?php echo $title; ?>).
Whenever the user loads index.php into the browser,
the title will be 'Repeatable content - Home'.
If we have another file, say another-file.php, we set the variable
to another title ($title = 'Another title').
When that page loads, the title for that page will be 'Another title'.
PHP code - header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><?php echo $title; ?></title>
</head>
<body>
<header>
<nav>
<ul>
<li>
<a href="index.php">Home</a>
</li>
<li>
<a href="page-1.php">Page 1</a>
</li>
<li>
<a href="page-2.php">Page 2</a>
</li>
</ul>
</nav>
</header>
We must do the same in page-1.php, but change the title:
PHP code - page-1.php
<?php
//The variable $title now holds the value 'Repeatable content - Page 1'
$title = 'Repeatable content - Page 1';
//Where ever you put this line in the document is the exact
//place where the content from header.php will be "loaded" into
include ('header.php');
?>
Can you guess what we have to do in page-2.php? I'm sure you do, but to be fair to all, here is the code:
PHP code - page-1.php
<?php
//The variable $title now holds the value 'Repeatable content - Page 2'
$title = 'Repeatable content - Page 2';
//Where ever you put this line in the document is the exact
//place where the content from header.php will be "loaded" into
include ('header.php');
?>
I know you can come up with better titles and even better content, but I hope you found this tutorial useful and now know how to not have the need for the use of too much copy and paste'ing...