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.
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.
<?php if(SHOW_SEARCH) { ?>
<div class="search_box">
<form name="search" action="<?php echo WB_URL; ?>/search/index.php" method="get">
<input type="hidden" name="referrer" value="<?php echo defined('REFERRER_ID')
? REFERRER_ID : PAGE_ID; ?>" />
<input type="text" name="string" class="search_string" />
<input type="submit" name="submit" value="<?php echo $TEXT['SEARCH']; ?>" />
</form>
</div>
<?php } ?>
Note:
The search form is only displayed, if the function is enabled via the WB backend:
Settings -> Show Advanced Options -> Search Settings -> Visibility -> Public
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 (e.g. screen.css, template.css, style.css). 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;}
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.
Short with a droplet
<?php if (defined('FRONTEND_LOGIN') && FRONTEND_LOGIN){ ?>
<div class="outer-box gradient-sweet-home">
[[LoginBox]]
</div>
<?php } ?>
Or long
<?php
// add loginbox for backend access
if(FRONTEND_LOGIN AND !$wb->is_authenticated() AND VISIBILITY != 'private' ) {
$redirect_url = ((isset($_SESSION['HTTP_REFERER'])
&& $_SESSION['HTTP_REFERER'] != '') ? $_SESSION['HTTP_REFERER'] : WB_URL );
$redirect_url = (isset($thisApp->redirect_url)
? $thisApp->redirect_url : $redirect_url );
?>
<div id="loginmaske">
<form name="login" action="<?php echo LOGIN_URL; ?>" method="post">
<input type="hidden" name="redirect" value="<?php echo $redirect_url;?>" />
<p><?php echo $TEXT['LOGIN']; ?></p>
<?php echo $TEXT['USERNAME']; ?>:
<input type="text" name="username" />
<?php echo $TEXT['PASSWORD']; ?>:
<input type="password" name="password" />
<input type="submit" name="submit" value="<?php echo $TEXT['LOGIN']; ?>" />
<a href="<?php echo FORGOT_URL; ?>">
<?php echo $TEXT['FORGOT_DETAILS']; ?></a>
<?php if(is_numeric(FRONTEND_SIGNUP)) { ?>
<a href="<?php echo SIGNUP_URL; ?>"><?php echo $TEXT['SIGNUP']; ?></a>
<?php } ?>
</form>
</div>
<?php
} elseif (FRONTEND_LOGIN AND $wb->is_authenticated()) {
?>
<div id="loginmaske">
<form name="logout" action="<?php echo LOGOUT_URL; ?>" method="post">
<p><?php echo $TEXT['LOGGED_IN']; ?></p>
<?php echo $TEXT['WELCOME_BACK']; ?>,
<?php echo $wb->get_display_name(); ?>
<br />
<input type="submit" name="submit" value="<?php echo $MENU['LOGOUT']; ?>" />
<br />
<a href="<?php echo PREFERENCES_URL; ?>">
<?php echo $MENU['PREFERENCES']; ?></a>
<a href="<?php echo ADMIN_URL; ?>/index.php">
<?php echo $TEXT['ADMINISTRATION']; ?></a>
</form>
</div>
<?php
}
?>
The styling of the login form is best done via an external style sheet (e.g. screen.css, template.css, style.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
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
register_frontend_modfiles('css'); // this is here important
register_frontend_modfiles('jquery');
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.
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.
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.