The previous two sections described the required steps to prepare an existing static 3-column CSS layout consisting of a index.html and a screen.css file. The static contents of the index.html file were replaced by the WB specifiy template functions. To create a working WebsiteBaker template out of the modified index.html and screen.css, the following steps are required.
A valid WebsiteBaker template requires the two files index.php and info.php. The file index.php contains the basic structure (HTML elements) and the WB template functions to display the contents stored in the database.
Rename the modified index.html which contains the WB template functions into index.php. The extension .php is required to execute embeded PHP code. It is recommended to store the index.php file with a text editor in the ANSI format to prevent problems with a bug in PHP called utf-8 BOM bug.
The file info.php contains template information required by WebsiteBaker such as template name, template directory, author, licencse and a short description. As our template features multiple menues and blocks, some additional information needs to be added. The info.php file can be created with a simple text editor. The first 8 rows are required for all templates.
Please note the starting (<?php) and closing PHP tags (?>).
Our first WB template consists of three files:
To create a working installation package for WebsiteBaker, the files needs to be joined into a Zip-archive (*.zip). For Windows one can use the Open Source tool Tool 7-zip.
Unix/Linux users can use the comand line tool zip:
zip mytemplate_en.zip index.php screen.css info.php
The zip archive must not contain the folder in which the three files are stored.
Once the installation package (zip archive) was created as shown in Figure 1 above, it can be installed via the WB backend: Add-ons -> Templates -> Install Template.
You can download the installation package (zip archive) of the finished WB template tutorial.
In the default settings of WebsiteBaker, the usage of multiple menus and blocks are disabled. As our template contains two different navigation menus and two different content blocks, one need to enable this settings via the WB backend.
Enable multiple menus:
Settings -> Show Advanced Options -> Multiple Menus -> Enabled
Enable multiple blocks:
Settings -> Show Advanced Options -> Section Blocks -> Enabled
Use the new template as default template:
To use the new template as default for all existing and new pages one needs to change the following settings via the WB backend:
Settings -> Default Settings -> Template -> 3-column CSS
The result (with German content) can be seen in the figure below.