How to create a BabyGekko Template
Baby Gekko templates are very easy to construct. In here, we assume that you have a basic understanding of PHP, HTML4/5 and CSS2/3.
The example template in this tutorial is a very basic to clearly explain the template design concepts.
1. Structure
Inside your template directory, you should have a minimum of index.php. You can embed the CSS if you’d like. Let’s suppose there’s a template called “demo”.
Here’s what the basic minimum requirements:
- A file called index.php that contains the basic layout of your template (see the figure above)
- Two CSS files – editor.css and style.css and they should both be linked from the heading. The editor.css contains specific styles that can be loaded by the WYSIWYG editor.
- A folder called images and a file inside that folder with the name yourtemplatename_preview.png (which in this case, is demo_preview.png)
- A file called your_template_name.php (which in this case, is demo.php) containting the following information: the template’s author, url, support, and purpose (e.g: Mobile/Web/etc)
2. Functions
displayPageTitle() – displays the title of the page
displayHeader() – displays any additional header that might be included by applications, modules, or filters.
displayPageMetaKeywords () and displayPageMetaDescription() – displays the meta keyword and description of the page or site
displayBlockByPosition(‘position’) – where position can be top, bottom, left, right, or anything that you’ve defined in the Blocks Position editor. For instance, your website navigation menus is placed on the left side, so if you’d like to specifically display it, you may call the function displayBlockByPosition(‘left’);
displayBreadCrumbs() – displays the navigation breadcrumb
displayPage() -this function display the page content
4. Packaging your template
Baby Gekko template is distributed as a ZIP file. To package your template, go up one directory level and zip the whole folder yourtemplatename. The directory must be included in the ZIP file. It it highly recommended to use lowercase for all the name.
5. Testing your template
To test the installation of your package, go to the Administration site, and click Site -> Templates and upload the ZIP file.
If everything works correctly, you should be able to see the preview.
