How to create a PHP web template – Part 1

In this post I’m going to explain how I usually set-up a simple PHP website, from scratch.

This is part one of two.

Brief summary of the main steps involved.

1. First we will create the HEADER – this will be the area occupying the top of the page, and will include the logo and top level navigation. It’ll also contain the HTML meta data (page title, description and keywords) which will dynamically change depending on the page.

2. Next up will be the FOOTER – you guessed it, this will occupy the bottom of each page. It’ll include the website name, copyright notice and some general links (like privacy policy for example).

3. We will create some content pages and hook into the HEADER and FOOTER.

Preparation required.

My very first step before I start any coding, is to create a graphical mock up design and logo. I usually use a graphics package like Fireworks, Photoshop or Inkscape (free and extremely good). Below is a quick mock up design I created earlier for a fictional website called ‘MyWebsiteTemplateExample’.

my website template example

After I have my idea ready, it’s time to create a template HTML file. Here is what I do…

1. Crop the logo (and any other images) from the mock-up design and save them to a folder called ‘images’.

2. Take note of the colors used in the design (most graphics tools can give you the HTML color code).

3. Create the HTML of the mock-up (I’m not going to teach you HTML, that’s too much for this post. Use a WYSIWYG if you have to).

4. Create a CSS file to hold all the styles used on the basic page. Save it in a folder called ‘styles’.

Now, that will keep you busy for a couple of hours, at least.

In part two, I will show you how to create the HEADER, FOOTER and CONTENT pages from your basic template. Once you’ve created one page, the rest will take no time.

Fear not, part two will be available very soon.