WebsiteBaker Help (by Dev4me.com) - Building a WebsiteBaker template

Building a basic template - Part 2

Porting our example template to WebsiteBaker

Hi there, and welcome to the second part of my tutorial.

In the first part of the tutorial we built a HTML template, in this part we are going to convert it to a folder with files that WebsiteBaker will understand (further on I will call this ‘porting’ just like in the title of this tutorial).

Step 1: Adding the necessary files.

Lets open our project folder (basic-template) created during the first part of the tutorial.
You can also download the project folder at the end of the first part of the tutorial.

Open your favorite text editor and save the empty file and give it the name info.php.
Keep the texteditor open and save the file again (Save As is helpful) give it the name index.php.

Essentially these are the only two files WebsiteBaker needs.

Step 2: Info.php.

Open the info.php file and add the following content to it:

<?php
$template_directory = '';
$template_name = '';
$template_version = '';
$template_platform = '';
$template_author = '';
$template_license = '';
$template_description = '';
?>

Now lets start by changing the information in the info.php, I will explain which information is needed where. We need to put the needed information between the empty ''.

$template_directory
This will be the folder name of the template (root > templates > foldername)
$template_name
This is the name of our template so we can find it in the settings in the backend.
$template_version
The version number of our template, not WebsiteBaker version (!). This version number is used at installation of the template. WebsiteBaker checks if the template (by checking the $template_directory) already exists. If there is a folder in the root > templates with the same $template_directory as the one you are trying to install WebsiteBaker checks the $template_version, if this number is highter then the template already installed WebsiteBaker assumes the template you are trying to install is a newer version and upgrades the template.
$template_platform
This is used at install of the template to check if the WebsiteBaker version is minimal the set value in this string.
$template_author
The name of the template author can be put here.
$template_license
The license of your template. Although any license type you put here works, by default every extension of WebsiteBaker has the GPL License because the core of WebsiteBaker is licensed under GPL and everything that uses core functions needs to have the same license (but that’s a discussion for the forums), for my themes I always use GPL (btw GPL doesn’t necessary mean free).
$template_description
The description of your template.

Using the information above we can fill our info.php, the complete content of our index.php is:

<?php
$template_directory = 'basic-template';
$template_name = 'Basic template';
$template_version = '1';
$template_platform = '2.8.3';
$template_author = 'Robin Bruinsma (nibz)';
$template_license = 'GNU GPL';
$template_description = 'A basic template for WebsiteBaker CMS with a horizontal dropdown menu';
?>

Copy and paste the content above in your info.php and save the file.

Step 3: Index.php.

Open the index.php file, if you followed the tutorial it’s empty.

Essentially the index.php and index.html have the same content but with some adjustments or additions for WebsiteBaker to understand the file.

So knowing this lets open index.html and copy the contents and paste this in the index.php.

For readability I will separate my explanation about the template in 3 parts.

Part 1: Head (everything within <head> and </head>)

Part 2: Menu (within <ul id="nav"> and the last </ul>)

Part 3: Content (in our example within <div class="content"> and the first following </div>).

3.1 Head

The contents between the <head> and </head> tags is a container for meta data (data about data). More info (about the <head> (you don’t need the knowledge to complete this tutorial so you can also check later on): http://www.w3schools.com/html/html_head.asp

The contents between <head> and </head> of the template we created in the first part of the tutorial looks like:

<meta charset="utf-8">
<title>Page title - Website title</title>
<link rel="stylesheet" href="style.css">

I also split this in to chunks of explanation this is for readability and easy for future reference if you only need information about a specific part of the tutorial how to port a template.

3.1.1 Meta Charset:

Lets start with the meta charset, we could leave the info we already have. But to make it more dynamic we should change it. Because we can fetch information set in the settings page in the administration panel of WebsiteBaker.

Replace the <meta charset="utf-8"> line by:

<meta http-equiv="Content-Type" content="text/html; charset=<?php
if(defined('DEFAULT_CHARSET')) { echo DEFAULT_CHARSET; } else
{ echo 'utf-8'; }?>" />

What we’re doing essentially is looking if there is a value set in the administration settings of WebsiteBaker if there is this setting will be used. If there is no value set then we are using the default utf-8 the most commonly used charset.

3.1.2 Title:

WebsiteBaker is a Content Management System (CMS) a CMS generally is used to easily change contents of a website. But when we use the default title set in our HTML template, every page will get the same page title. This is something we don’t want because we also like to be found easily by Search Engines. So lets make the page title dynamic (WebsiteBaker will fetch the page title you set while creating the page in the administration panel).

Our page title will need to look like:

<title><?php page_title(' - ',
 '[PAGE_TITLE][SPACER][WEBSITE_TITLE]['); ?></title>

This will output the page title in your browser like PAGE TITLE – WEBSITE TITLE.

I always use this order of sorting the page title output for SEO reasons. Because your WEBSITE TITLE is always the same (eg. This can be your company name). The PAGE TITLE will be different on (almost) every page, so this is the information we want to put first.

You can read more information about setting the page title on the WebsiteBaker website but for now the information above is sufficient.

3.1.3 External files (CSS, JS etc.).

In the header the template we are creating we only load the CSS as external file, but WebsiteBaker will need to know where the file is stored. When we install the template all our template files will be put in the “$template_directory” see Step 2: Info.php in this tutorial.

In our template we now are loading the css by using the line:

<link rel="stylesheet" href="style.css">

This will point to the style.css in the same folder as the page you’re visiting.
Since the page you’ll be visiting in the frontend of WebsiteBaker allways is in the pages folder (root > pages) and our style will be in another folder we need to point WebsiteBaker to the right path.

The CSS of our template will be in the template directory, so we will need to point WebsiteBaker to this file using: <?php echo TEMPLATE_DIR;?>.

The call to our stylesheet now looks like:

<link rel="stylesheet" href="<?php echo TEMPLATE_DIR;?>/style.css">

You can see this will point WebsiteBaker to the template folder, in this tutorial root>templates>basic-template and it will load the file style.css.

You could also use <?php echo TEMPLATE_DIR;?> to load other files stored in the template folder, but for this template we will not need to.

3.1.4 Meta tags for description and keywords (SEO).

Under the lines created using the above steps we add the following lines:

<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />

I could talk hours about why to use this, but I will not, just put them in!

3.1.5 Frontend module files

Since the most module also need to output some CSS and sometimes also some JS we need to let WebsiteBaker know we want to add these files to the template.
We add the folllowing code after the metatags we added in the previous chapter:

<?php if(function_exists('register_frontend_modfiles')) {   
  register_frontend_modfiles('css');   
  register_frontend_modfiles('js'); 
} ?>

With this code in our template frontend module CSS and JS will be loaded.

3.2 Menu

I will do an in depth tutorial about menu’s in the future when I will find some time to do so. For now it’s ok to replace the contents between <div class="main-menu"> and the first following </div> with:

<?php show_menu2(0,SM2_ROOT,SM2_ALL,SM2_ALL,'[li][a][menu_title]</a>','</li>','[ul]','</ul>',false,'<ul id="nav">');?>

This will display all menu levels starting at the root, this is what we want because we use a dropdown navigation that will need to show all menu items.

In my future tutorial I will go more about the value’s you can set using show_menu2 for now the setting above will work. If you like more information about show_menu2 check the readme file included with the module:

Show: README.en.txt

3.3 Content

As already said earlier on in this tutorial WebsiteBaker is a Content Management System (CMS). In a CMS you can put in the contant that will be displayed on your website (the frontend). WebsiteBaker needs to know where the content is stored so replace the content between <div class="content"> and the first following </div> with

<?php page_content();?>

3.4 Footer (and copyright)

In our template we also have a footer. In the most templates in the footer is where your copyright.

Our footer now looks like:

<div class="footer">
Copyright © Robin Bruinsma 2014
</div>

To not have to change the footer every year lets make it dynamic, replace it by:

<div class="footer">
Copyright © <?php page_footer(); ?>-<?php echo date("Y");?>
</div>

This will output the value set in the administration panel settings for page_footer and put out the current year.

That’s all for the index.php, our completed file now looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Page title - Website title</title>
    <link rel="stylesheet" href="<?php echo TEMPLATE_DIR;?>/style.css">
    <meta name="description" content="<?php page_description(); ?>" />
    <meta name="keywords" content="<?php page_keywords(); ?>" />
    <?php if(function_exists('register_frontend_modfiles')) {
      register_frontend_modfiles('css');
      register_frontend_modfiles('js');
      } ?>
</head>
<body>
<div class="wrapper">
  <div class="header"><h1>Company Name</h1></div>
  <div class="main-menu">
     <?php show_menu2(0,SM2_ROOT,SM2_ALL,SM2_ALL,'[li][a][menu_title]</a>','</li>','[ul]','</ul>',false,'<ul id="nav">');?>
  </div>
  <div class="content">
    <?php echo page_content();?>
  </div>
  <div class="footer">
  Copyright © <?php page_footer(); ?>-<?php echo date("Y");?>
  </div>
</div>
</body>
</html>

That’s all for the files website baker needs.

Step 4: Zip and install

On your computer open the folder basic-template and select all the files within and create a .zip file of this. On my mac I can select the files and with right click I open up a menu and click on ARCHIVE.

You can give your archive any name, I usually give it the same name as the template so in this case I use basic-template.zip as the name.

Now we can go to the WebsiteBaker administration panel and Add-ons > Templates > Install template. You can install the template by choosing the zip file here and clicking Install.

Congratulations, you can now use the template for your website!

Download the example template

This article is tagged with:
Layout Templates Tutorials

Building a basic template - Part 1

By Robin Bruinsma - Nibz

In this tutorial I will show you how to create a very basic HTML template.

I will also cover some basic SEO (Search Engine Optimalisation) techniques, since we all like to be able to be found by Search Engine’s like Google.

Read the full article

Comments on this article

Due to large amounts of spam comments, the comments are disabled!

Share this page