Step 1: File structure

MainFolder
-file:   index.php
-file:   index.html (base-template file)
-folder: incl/
-file:   incl/header.php
-file:   incl/footer.php
-file:   incl/config.php
-file:   incl/functions.php
-folder: css/
-file:   css/mainstyles.css
-folder: img/


Step 2: Create the base-template file (index.html)

This is where we build our website as a normal .html file with headers, body, footer, and the whole layout in one file.
This will in turn be our base template to later disect into 3 pieces (header.php for header code, index.php for body and site code, footer.php for endpage-code)

Our base-template file will be very basic and simple and can be seen below:

Step 3: Breaking this down for ya in detail how this is going to work.

Okay, so the idea is to divide this website we just created into different parts (header, content and footer)- and we do this by analyzing which parts will be recurring throughout every single subpage of the website.
For example we can be pretty sure that all the code belonging to the ”header” section including the main menu will be available on every single subpage- as will the footer code. This means that we can take all this code and place it in separate files – in our case we call these files header.php & footer.php and have them placed in a folder named: incl, which stands for ”includes”.

Why do we do this then? Well the idea is to later include these separated external files which together contains all the code for the entire page layout.
In this way we ”re-create” the website section by section by including these parts into the ”main-subpage-file” – such as index.php for the mainpage, and contact.php for the contact page for example, etc.

Step 4: Start disecting & dividing the individual sections of the page which will reoccurr throughout all subpages of the website.

Now as you can probably see we included the ”<article>” in the header.php file, while we included the ”</article>” in the footer.php file, but totally ignored the content of <article> in both files.
We did this because we plan ahead- every subpage will probably have the need for an general ”content-container” to place that particular pages contents in – so we make the <article> container itself become re-occurring, whilst the content of the container- is not.

So perhaps you’re asking yourselves now whats next? Well, we need to put the website back together again after having disected it- thats our next move- including the header.php & footer.php in the index.php for the main-subpage.

Now the website will have been recreated in index.php since it first includes header.php (and all the code this file holds), then the HTML-content for that specific subpage, and last but not least- the footer.php file and the code that file holds.

Step 5: Explain the overflow files such as config.php & functions.php (plan ahead purpose)

Okay, so you might be wondering now that we seem to be done already why I made 2 extra files in the incl/ folder? Well this is simply because ”looking & planning ahead” – in the future the config.php file will hold configuration code for the entire page, while the functions.php file will hold useful functions which later can be included into the header.php to be available for all of the respective subpages.

And another thing worth pointing out- the footer.php will be able to hold all the JavaScript file inclusions as well as Google Analytics code which you want to load in at the end of all subpages. Which also is a very nifty, useful and handy feature to have available.

Step 6: Spice up the webpage a bit more with dynamic SEO content for each individual page? as well as Titletext? 🙂

There are tons of fun stuff you can do with a Dynamic website template like this in PHP – for example if we want unique <title> texts for each individual subpage – we only replace our current HTML content in the header.php file
within <title> & </title> with something like: <?php echo $subPageTitleVariable; ?>
And then all left to do is to in index.php ABOVE WHERE WE INCLUDE HEADER.PHP -> place $subPageTitleVariable = "our specific subpage &lt;title&gt; text"; for example. and this would be available for the header.php file to make use of seeing as how we placed it ABOVE where header.php was included and PHP works vertically through the code from top->bottom. with top-content being available for bottom-content on a code page.

This method & technique can also be utilized- and comes in very handy for On-Page SEO where you need to specify specific keywords/descriptions for each individual subpage.

As a Last thing to mention I will recommended you to start the config.php file by placing <?php error_reporting(-1); ?> to report ALL Possible (PHP) errors on the page for debugging (recommended to be turned off when publish page – 0 as value instead of -1). And Also to include config.php ABOVE HEADER.PHP in INDEX.PHP file. so that the Error Reporting is active for ENTIRE PAGE.

Good Luck with all your Coding out there now 😉
This tutorial was brought to you by: http://www.webbdev-essentials.net

Hope you learn something new and get some new ideas for your next projects 😉 Was a pleasure helping out and hopefully inspiring to new creativity 🙂 Enjoy!