Create a strong website structure

This tutorial will give you insight on how to create a strong dynamic website structure using PHP.

Step 1 – Create the layout

First things first, before you can do anything with PHP, you need to create a strong website layout. For this tutorial you will be using a simple CSS layout that consists of the following elements:

1. Wrapper
2. Header
3. Navigation
4. Sidebar
5. Content
6. Footer

Download template here

The diagram below illustrates the website layout for this tutorial.

Layout of elements

Step 2 – Create 5 new php files

Now that the website structure has been created, it is time to start making it dynamic. To do this you will firstly need to separate the main layout elements. In this case it will be the; Header, Navigation, Sidebar, and Footer.
Create five new PHP files and name them accordingly; header.php, navigation.php, sidebar.php, footer.php and also index.php.
Remove all the information within these five files so they are completely blank. Save these files to the rootfolder of the website.

Step 3 – Separating the layout

This step is a little bit tricky, but with enough practice it becomes very simple!
You are now going to take the code from the template design file and place them in the files that you have just created. For precaution you may want to create a copy of the template file (index.html if you downloaded the files), in case you muck it up.

Step 4 – navigation.php

Begin with the navigation.php file.
Go to your template file (index.html) and highlight from the beginning of the navigation Div to the end of the navigation Div tag.
Copy and paste this into the navigation.php file and save it.

Step 5 – sidebar.php

Highlight from the beginning of the sidebar Div tag to the end Div tag.
Copy and paste theis selection into the sidebar.php file and save it.

Step 6 – footer.php

Highlight from the end content Div tag to the tag.
Copy and paste this selection into the footer.php file and save it.

Step 7 – header.php

Highlight from the very beginning of the file which is from the Doctype to the beginning of the content Div tag.
Copy and paste the selection into the header.php file.
Now add 2 simple php include statements after the end header Div tag to include the navigation.php and the sidebar.php files.

So the header.php file should now contain the following code

Step 8 – index.php

Now for the final step, you add two php include statements to the index.php file. You will be including the files header.php and footer.php.

In between the header and footer includes you enter the information that you want to appear in the content element of the web page. So for every new page you create within your website, include both the header and footer php files and insert the content between them

Here is theComplete Code for this tutorial. Please leave comments. Thanks!