How to automatically include your header, navigation, and footer on every page

Creating a self-descriptive website (without using frameworks, CMS, and other fancy things that make life easier for web developers) we face the problem of making edits to the site when there are a lot of pages.

To avoid having to change the same parts of the site in each of the page files, we can use handy PHP instructions that enable us to include files with the necessary code in all pages with just one line of code. Then, by changing the contents of the attached file, we change the code on all the pages of the site. Convenient, no matter how you look at it.

Now let’s look at ways of connecting files in more detail:

Using include and require PHP


A fundamental difference between these two instructions you can not detect if you want, but there are nuances:

If there is an error when calling require, the parser will get a fatal error response and the page will stop execution, while include will only write warning and the file will run on (it just won’t connect the file).

For a better understanding of the subject let’s look at a simple example.

Now we will divide the index.html document into several files, each of which will contain its own part of the page. This will help divide the code even more, improve the structure of the template and, in fact, make the page dynamic. For this purpose we will use the PHP language, or rather just one directive: the include() function, which includes one file into another.

Diagram illustrating how the header, navigation, and footer files are included into the main index.php file.
  1. Change the resolution of the index file created in the article about block coding from .html to .php so that the document is called index.php. The file type .PHP indicates to the server that the document was written or uses inserts in the programming language of the same name.
  2. In the folder with the page, create a directory called blocks.
  3. All auxiliary information (top, bottom, navigation and sidebar) put in separate files, which will be placed in the blocks folder.

So create four files in the blocks directory: header.php, navigation.php, sidebar.php and footer.php. Fill the files with code.

header.php:

	<div id="header">
	<h2>header (шапка сайта)</h2>
</div>

navigation.php

	<div id="navigation">
	<h2>Блок навигации</h2>
	</div>

sidebar.php

	<div id="sidebar">
	<h2>Левая панель</h2>
	</div>

footer.php

	<div id="clear">
		 
	</div>

	<div id="footer">
	<h2>footer (низ сайта)</h2>
	</div>

4. Check the structure of the template folder. The index.php, style.css, and blocks directory should be in the root.

Структура папки шаблона

The structure of the blocks folder should be as follows.

Структура папки blocks

5. In the index.php file, delete the existing code and write new code:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
	<?php include ("blocks/header.php");?>
	<?php include ("blocks/navigation.php");?>
	<?php include ("blocks/sidebar.php");?>
	<div id="content">
	<h2>Основной контент страницы</h2>
	</div>
		 
	<?php include ("blocks/footer.php");?>

</div>
</body>
</html>

In the browser the index.php file looks exactly the same as before, but the template structure has changed completely. About what happened, we’ll talk later, but now answer the question about the mysterious commands like <?php include (“file_name”);?>.

<?php include (“file_name”);?>

Like HTML code, PHP code also has its own designation of beginning and end. So start the PHP insertion with the command . Between these commands you write the main code. In this case, there is only one command: include.

The include() function inserts code from another file, allowing different parts of the page to be stored in separate documents and making sure that they are separate from each other.

The result is a dynamic index.php page whose parts are loaded from different files. This allows you to create other pages, just as loading their auxiliary elements from files folder blocks.

This approach is good that if you want to change the site of 20-30 pages, say, the name of the item menu, in a template with a newly created structure you need to make changes only in one file – blocks/navigation.php, and the menu will change immediately on all pages in which it is included. If the site would be static, to change the name of a single menu item, you would have to make changes in each of the 20-30 pages. The difference is obvious.

Share