QTT: Custom Templates in Kaizen CMS

First a brief intro into Kaizen. Kaizen CMS is still a relatively new (or at least new to the public) content management system that was started by John Hoover back in 2007. The cms that exists today is far from the initial and started to take shape in August of ’09 and released as open source to the public in January 2010. I’ve worked with John for over a year now (at DigiMedia and now at Crane|West) and joined him in development of this project in October ’09. It still has areas we are improving on but is the basis we start all of our sites with. The source is hosted on Github and the project is opensource so feel free to fork and explore the code. The project is in active development with lots of improvements in the works.

Now onto the quick tip for today. I’m going to show you how easy it is to create a custom template in Kaizen CMS. Its honestly as easy as one line of code and the cms already has an example of this in ./views/content/contact.tpl file. A custom template is a great way to provide a different look to different pages without affecting the overall site appearance. You might have a page that you don’t want the sidebar to show up on or a page with a completely different header and footer. Kaizen allows you to do this easily without almost no effort on your part. We use smarty for the templates as well. Lets look at the code for the main content template (./views/content.tpl).

1
2
3
4
5
6
7
8
9
10

{include file="inc_header.tpl" page_title=$aContent.name|clean_html menu=$aContent.tag}
 
	<section id="content" class="content">
		<h2>{$aContent.title|clean_html}</h2>
		{$aContent.content|stripslashes}
	</section>
 
	{include file="inc_sidebar.tpl"}
 
{include file="inc_footer.tpl"}

Line 1 does three things. First it includes your header file, in this case it’s inc_header.tpl, then it sets the page title using the content name (page title set in the admin) and last it sets the menu tag (this lets you tell what page your on and can then set a class on your menu to show that. Line 4-5 is displaying the content for the page, so nothing special. Line 8 & 10 are just including the sidebar and footer.

Before we create a custom template, Kaizen has an easy way of handling template files. When a page is loaded, example: yourdomain.com/lorem-ipsum/, the cms will first look for a template file with that tag (lorem-ipsum.tpl) in the ./views/content/ directory. If it finds a template file that matches it will load it and if it does not find one, it will continue and load ./views/content.tpl (the default content template as shown above). Lets look at a custom ./views/content/lorem-ipsum.tpl template:

1
2
3
4
5
6
7
8
9
10
11
12
13

{getContent tag="lorem-ipsum" var="aContent"}
{include file="inc_header.tpl" page_title=$aContent.name|clean_html menu=$aContent.tag}
 
	<section id="ipsum" class="ipsum">
		<h2>{$aContent.title|clean_html}</h2>
		{$aContent.content|stripslashes}
 
		<p>This is a custom template file</p>
	</section>
 
	{include file="inc_sidebar_2.tpl"}
 
{include file="inc_footer.tpl"}

Notice the file looks roughly the same as content.tpl besides we added a new line and changed some classes, ids and which sidebar we include (this is just to show you that you have the ability to do whatever in this custom file. Line 1 uses a custom getContent() function in Kaizen. It requires two params. First is tag; this is the url for the file, in this case its lorem-ipsum. Note: You can find the tag for a page in the Admin->Content Pages->Manage Pages. The second param is the variable to assign the content array to, in this case the contact will be accessible through $aContent. After getContent() you can now access that content info anywhere in this template file as you see above. All getContent() does is query the database looking for a content page with the tag you specified and sets that content to a smarty variable that you specified. Simple right? Just remember all custom template files need to be in ./views/content/ directory.

With getContent() you can create a completely custom template just for a page. In fact you can include a different header, sidebar, and footer if you wanted or remove the header/footer includes and code your own into that template if needed. Another use for getContent() is to include other content into a page as you can have as many getContent() calls as you want on a single page. If your interested you can check out the code for the getContent() function.

That wraps up this weeks quick tip. Kaizen CMS is a great system that we are proud of. Currently you will find we lack documentation and other information regarding the cms, however this is changing. We are working on not only improving the docs on it so you can get it running yourself but we are working on some improvements including an installer to make it simple and easy for you to setup. I plan to post more regarding the cms in the future.