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.

Step 1: Rename index.html

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.

Step 2: Create a info.php file

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 (?>).

Step 3: Create an installation package

Our first WB template consists of three files:

  • index.php: contains the basic HTML layout and the WB template functions
  • screen.css: contains the styles for positioning and layout
  • info.php: contains infos about template name, author, license and additional menues or blocks

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 index.php screen.css info.php

The zip archive must not contain the folder in which the three files are stored.

Right archive format
Figure 1: Right archive format without the root folder!

Wrong archive format
Figure 2: Wrong archive format which contains the folder in which the files are stored!

Step 4: Install the template

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.

Step 5: Adapt WB Settings

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.

Preview WebsiteBaker template 
Figure 3: The new template in action (German contents)