Creating a Custom Template

In almost every case you would want to setup your own template for your website. The way I-Metrics CMS processes template themes is what this topic explains. Associated files on the front end that need to change during template integration are explained below. Depending on the website type some files can be completely removed others can be modified and new ones can be added.

The I-Metrics CMS does not have a dedicated template system. Instead it uses common sections containing PHP and HTML content that can be easily manipulated without in depth knowledge of the framework. Our approach is to reduce code segmentation but keep the framework modular enough for both beginners and advanced developers to work with.  You may think a dedicated template system is more user friendly or easier to customize. The reality is you need far more advanced code for this task and the learning curve is so steep and outweighs the benefits. Moreover the vast majority of sites today, use one or two layouts as part of the template in place.

For example the administration end of this framework uses just 2 layouts. The first you can see on the home page of the back end, the second is for every other page. The front end uses just one layout. This should give you a better understanding to what questions you should ask, when someone talks to you about a template system.

Moving into the file details now there are two areas for the template drivers (or common sections) and template individual files. You need to be aware of the following scripts and their meaning. Template drivers drive the HTML content flow. Template individual files are files which have HTML dependencies.

Main Template Drivers

1. includes/objects/html_start_sub1.php

As shown in the picture above, It is the starting section of the HTML exposes the document type, meta tags, stylesheet and common jscripts.

2. includes/objects/html_start_sub2.php

Shown above the html_start_sub2.php contains the end of the HTML headers and beginning of the HTML body content. It can optionally include switches to present a different layout.

3. includes/objects/html_body_header.php
Contains the beginning of the main page content, in other words the main section where the page description is located. It is one of the most complicated parts for template integration.

4. includes/objects/html_end.php
The closing section of the HTML drives the header, menu, main footer and right column with the stock template. Tags opened in the html_body_header must be closed properly here. If a layout switch is deployed on the html_start_sub2.php then likely you need to setup additional case controls here.

Main Script Structure is shown above with the common sections highlighted. This is the most typical way to deploy a main script where various parts of the template theme can be invoked conditionally.

So considering a script like the index.php it contains the above template drivers and the home page content. You may ask why the header part of the template is located inside the html_end.php instead of the html_body_header.php or html_start_sub2.php. The answer is you may place it on whatever common section you like, depends on the website's requirements. With our stock template  we want to position and expose the page content above everything else in the HTML code for SEO purposes.

Other template drivers can also be created and integrated depending on the theme, to ease site mainainace and content modifications. If we have multiple scripts that include a set of control buttons at the top or bottom we could create another common section and put in whatever the common code is.

Another question you may ask is why not using a single common file instead of 2 or 3 for the opening HTML sections. We use 2 or 3 to simplify deployment of client side scripts in the right place and communication with specific code that can be handled for individual scripts in the common sections. For instance the $heading_row variable can signal the html_body_header.php whether it should emit the main <h1> tag heading.

Secondary Template Drivers.

These are template drivers invoked by the main template drivers.

1. includes/column_right.php
Includes the contents of the right column of the stock template. In essence this is an HTML container and pulls-in box files. If you need to conditionally display different boxes based on the loaded script this is the file to do it using some case controls.

2. includes/column_left.php
Includes the contents of the left column. There is no left column with the stock template but the file is included with the framework as a sample and can be used for custom template integration. It's task is identical to the column_right.php. What template driver will call it is up to the developer and site requirements.

3. includes/header.php
The header part of the template includes whatever is directly above the menu with the stock template. Main site logo, or main navigational access points related with the site's purpose can be placed here.

4. includes/footer.php
The footer part of the template includes whatever is directly below the main page content with the stock template. Secondary links, copyright information can be placed here.

5. Files in the includes/boxes folder
The box files are independent modules, typically invoked by the secondary template drivers. With the stock template, whatever shown on the right side of the stock template is driven by the box files in this folder.

6. Files in the includes/modules folder
Similar to the box files, the modules files are also independent, typically invoked by the main scripts.and presented inside the main page section.

Finally the includes/classes/boxes.php file contains a class that provides an HTML interface for different box types that can be used in the boxes files or in the module files.