This section describes the enhanced template elements of WebsiteBaker. Beside multiple menu and content blocks, additional WB elements like a search or login form can be integrated into the template. Furthermore external code snippets from the Addons Repository allow to extend the functions usable in the index.php file of your template.

Add a search form

WebsiteBaker allows your visitors to search for certain patterns via a search form displayed at the frontend. If you want to offer your visitors a simple search form, add the following code into the index.php file of your template. The styling can be done via CSS definitions best placed in the screen.css file of your template.

 

Note:
The search form is only displayed, if the function is enabled via the WB backend:
Settings -> Show Advanced Options -> Search Settings -> Visibility -> Public

Search Term Hightlighting (.css)

With 2.6.7 we introduce the search highlighting. All needed code is included in the core files of WB. The only thing you have to do to get the search results highlighted is to add one class to the css file of your template. Feel free to define this class to your wishes. In the default templates we simple add a background color. You can also use other fonts , font weights or whatever you want. Please add the following class to the css file of your template:

.highlight { background-color: #D0D0D0;} 

  Add a frontend login

The code below adds a frontend login to your template. A frontend login allows your visitors the direct login via the frontend without knowing the admin URL: http://domain.de/admin.

 

 

The styling of the login form is best done via an external style sheet (e.g. screen.css). To limit the CSS styles to the elements contained in the div container <div id="login_mask"> the following CSS rule can be used. The example sets the font-color of paragraphs inside the div login_mask to red.

#login_box p { 
  color: red;
} 
Note:
The login form is only displayed, if the function is enabled via the WB backend:
Settings -> Login -> Enabled 

Register Frontend Module Files (.css & .js)

One of the main issues of the WB modules is, that the style informations are stored in the database and displayed in the body tag of the page. This gives a not (X)HTML valid output. The new functions can now be used to have all css and js of every modul in the head section of the template. The integration is very simple. You only have to do the following steps:

1. Add the following code in the head section of the index.php of your template

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

This will allow modules that have a frontend.css or frontend.js to be loaded with your template. 

But this is only the frontend part. Same could be done with the style for the admin backend. Take all styles out of the module files and store them in a backend.css or if javascript is needed in a backend.js file. This offers the ability for the users not only to easily style the frontend of the modules, they also can now style the backend. With the same functions it should be possible to make the whole WB admin interface skinable, wich will be a feature of one of the next WB versions.

Add external code snippets

Since WebsiteBaker v2.6, code snippets can be used to extend the functions usable in your template. The integration of functions included in external codes snippets is shown exemplarily on the example of the codes snippet: Last Update Info available from the Addons Repository.

  1. Download the code snippet Last Update Info from the Addons Repository
  2. Install the code snippet via the WB backend: Add-ons -> Modules -> Install Module

Once the code snippet is installed, you can add the new function get_modified_when() to the index.php file of your template.

<?php
if(function_exists('get_modified_when')) {
  get_modified_when();
} ?>

The function displays the date of the last update of the current displayed page in the frontend. The PHP function function_exists checks if the code snippet function is available. This is a measure to prevent PHP error messages if the code snippet is not installed.

X This website uses cookies. When you browse on this site, you agree to the use of cookies.