Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. PHP

Create a PHP5 Framework: Part 3


Now that we've got a basic framework (see part 1 and part 2 of this series), we can start thinking about integrating designs with our PHP framework. For now, we'll concentrate on the front-end design, including how we can make it easy to 'skin' our new framework.

How everything fits together

So far, we have our core files, in a logical structure and a core set of objects which are accessed by our registry. One of these objects is our template handler, which lets us easily build and generate HTML output. The output is built from a series of files including images, css and templates which make up 'the skin'.

Step 1: what's needed for our framework's front end design

Generic front-end designs for the template can be difficult to think through properly. It's useful if the design's basic HTML template contains everything that any website you're likely to create using the framework. The bare minimum I consider is:

  • A primary content area, which we'll call


  • A column or two for content which isn't as important as that in


  • Some tabular data.
  • Unordered and ordered lists (definition lists too, if you're likely to use them).
  • Images. I find it useful to include a separate styling for photographs, which I identify with the class 'photo' in HTML; for example <img class="photo" src="images/photo.jpg" alt="Photograph" />.
  • A form for data capture.

The <head>

We'll start with creating a basic XHTML structure for our pages. We'll start with the section first:

You can change the doctype to match, or even have provision to be able to define it within the settings for each website you create with your framework, and it would also be useful to be able to change the

. It'd be useful to have the stylesheet also defined as a setting, which we'll cover in future tutorials.

Additionally, the meta description and meta key attributes can be hard-coded in to each website's skin that you create, but it's wise to give each page a different description and set of keywords to prevent pages appearing in Google's supplementary index.

The {pagetitle} placeholder will be used to insert the title of the current page in to the template.

The <body>

We can now move on to the body of our template XHTML file for a generic front-end design for our framework. We'll keep the layout simple for now, assuming that most websites we'll be creating with the framework will use the traditional header, content, column and footer scheme.

Step 2: basic content

As promised, we'll fill in some basic content so we can style that we have at least most of the tags that are likely to occur in a page ready-styled:

The content is now ready for some simple styling.

Step 3: basic styling

We'll start by resetting the margin and padding of elements in our XHTML document with CSS:

We'll take some time to assign style to the body element and ensure that links within the document are appropriately highlighted:

Next, we'll go about centering our design in the #wrapper div, and assigning a faint border to each of the divs so that we'll be able to see them as we style.

Whilst the above CSS won't centre this design in Internet Explorer 6, the CSS has been kept basic to enable maximum flexibility. With a little more CSS, we nearly have a complete skeleton design for our framework's front-end - all that remains is a little simple positioning:

All that's left to style for us now are images:

What we're left with at this stage is a simple website layout which we can use as the basis of the front-end of our PHP framework:

Of course, for extra flexibility, it may become useful to allow 2 columns of content by default, which can be done with the addition of a little more XHTML and CSS. 

Step 4: templates from XHTML

The next step is transferring the XHTML, CSS and images in to a skin suitable for our PHP framework. To do this, we need to split the XHTML in to three templates: header, main and footer. Because of the way the template system is structured, a page can be generated from any number of templates, however at least a header, footer and main template are recommended this means, generally speaking, we should only really need to copy-and-alter the main template file if we were to create a new page which had a slightly different structure.

Header template for the PHP framework (skins/default/templates/header.tpl.php)

The header template for the PHP framework should contain the section of our XHTML, as well as the

section of the :

Main template for the PHP framework (skins/default/templates/main.tpl.php)

The main template should include the divs which will contain both the primary content, and any content in columns. Rather than copy the dummy text we used to style elements such as paragraphs, ordered lists and tables, we can now insert placeholders for this content, which will be updated depending on where the content is.

The placeholder content is:

  • {pagetitle} the title of the page.
  • {maincontent} the main content of the page.
  • {btitle} and {bcontent} heading and content for blocks of content. This is enclosed within a rcolumn loop so several blocks can be placed in the column.

Footer template for the PHP framework (skins/default/templates/footer.tpl.php)

Lastly, the remaining XHTML goes in the footer file, which closes the XHTML document and the body section. We typically use this to include a copyright notice and a 'web design by' link on our websites.

Apologies for the break from PHP in our series, but it is important to construct the relevant templates in skin format for our framework and the applications that utilise it. Part 4 in this PHP5 framework development series will cover basic security considerations and a basic authentication handler, before we move onto creating our Content Management model, and looking into how models fit together in Part 5. Also coming up in the series: Sending emails, extending our framework and logging a stream of user events in an innovative way.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.