The WB template functions are used to extract settings and content stored in the WB database. This way the content displayed via the template automatically provides the information which belong to the actual displayed page. The dummy text and links of the static template introduced in the section before will now be replaced with the WB template functions. The order of the template function follows the order of the index.html file from top to bottom.

Dynamic page title

Following the W3C rules, each HTML file have to contain a title. The title is shown in the browser window and is one important factor for search engine optimisation.

<title>3-col CSS Template based on a template provided by Maxdesign</title>

Replace the line above located in the index.html file with the code shown below. 

<title><?php page_title(); ?></title>

The function page_title is defined in /frameworks/frontend.functions.php and displays a page title in the form: WEBSITE_TITLE - PAGE_TITLE. To replace the hypenate character with another character, you can modify the function call as follows:

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

The first string defines the character used as spacer [SPACER]. The second string controls the output of the page title. The placeholder in the second string [WEBSITE_TITLE], [SPACER] und [PAGE_TITLE] will be replaced with its´s values before the the page title is displayed in your template.

Meta tag charset

The following meta tag defines the default charset used by the browser. This entry is essential as it provides information about the encoding of the characters contained in the index.html file. If the charset used does not fit to the WB settings, the characters may be displayed wrong.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Replace the line above located in the index.html file with the PHP code shown below.

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

Meta tags for description and keywords

The following meta tags are extracted from the search engines. Google outputs the description text in it´s search results. Keywords play an important role for the search engine optimisations and should be choosen carefully. Replace the following two lines

<meta name="description" content="short description of the pages content" />
<meta name="keywords" content="keywords for searche engines" />

with the PHP code below.

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

Linking external style sheets

External style sheets are used to manage styles and positions seperate from the HTML files. To make use of external style sheets within a HTML file, one must link the stylesheet into the <head> section of the HTML file. Replace

<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

with the code below.

<link rel="stylesheet" type="text/css" href="
<?php echo TEMPLATE_DIR; ?>/screen.css" media="screen" /> 

Website Header

To replace the fixed banner heading: "Website Title" with the HTML Code specified in the text field Website Header via the WB backend (Settings -> Show advanced options -> General Settings -> Website Header), one needs to replace the lines below

<!-- header -->
    <div id="banner">
        <h1>Website Title</h1>
    </div>

by the following PHP code. 

    <!-- header -->
    <div id="banner">
        <h1><?php echo WEBSITE_HEADER; ?></h1>
    </div>

If you want to display the page title of the actual displayed page instead, simply replace WEBSITE_HEADER by PAGE_TITLE.

Main and top navigation menu

The navigation menus are automatically created by WebsiteBaker from the pages added via the backend. The menu levels are following the hirarchy of the Pages panel. WebsiteBaker features multiple menus which can be managed via the WB backend. The navigation menu at the top is counted number 2 (WB internal), the main navigation menu on the left side number 1. Replace the following lines in the index.html file

    <div id="navigation1">
        <ul>
            <li><a href="#">Disclaimer</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
    </div>

and change them as follows.

    <div id="navigation1">
        <?php show_menu(2); ?>
    </div>

The same is true for the main navigation menu on the left side. Replace the following lines 

    <div id="navigation2">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Section A</a></li>
            <li><a href="#">Section B</a></li>
         </ul>
    </div>

with the following PHP code

    <div id="navigation2">
        <?php show_menu(1); ?>
    </div>

Main and news content

The contents of the main and the news block is stored in the WB database. The template features two different blocks, one for displaying news, one for the main content. The block for the news is labeled 2, the main content is labeled 1. Replace the following lines

<div id="news">
        <h3>Latest news:</h3>
        <p>Place holder for the latest news...</p>
    </div>

with the following WB template function.

    <div id="news">
        <h3>Latest news:</h3>
        <?php page_content(2); ?>
    </div>

The same is true for the main content. Replace

    <!-- column for main content -->
    <div id="content">
        <h2>Home</h2>
        <p>Place holder for the main content...</p>
    </div>

with

    <!-- column for main content -->
    <div id="content">
        <?php page_content(1); ?>
    </div>

Website Footer

The footer text can be defined via the WB backend: Settings -> Show Advanced Options -> Footer. To extract the footer from the WB database, one needs to replace the following lines in index.html

    <div id="footer">
        <p>(c) 2007 C. Sommer, for the websitebaker.org help project</p>
    </div>

with the following code. 

    <div id="footer">
        <?php page_footer(); ?>
    </div>

The changes applied to the index.html file replaces the static text outputs with the contents of the WB database. The introduced WB template functions consider changes in the WB settings and changes in the contents of the different pages. This way one layout can be created which can be used for all pages.

Adding images

The constant TEMPLATE_DIR is also your friend if you want to embed an image from your template folder into the index.php file of your template. The code below adds the image mypic.gif stored in the subfolder /img of your template directory.

<img src="<?php echo TEMPLATE_DIR;?>/img/mypic.gif" alt="mypic" />

Note:
Some further changes are required to create a WB template from the modified index.html file which are explained in the next section.