How to Create New Sidebar Elements for Template Zones Module ofTemplateCodes

OK as promised in my TemplateCodes system review here's my little guide to create new blocks (or side bar elements) for your 68Classifieds site that has the Template Zones module enabled. This will allow you to add new content or move elements from the Accordion & give them a different placement & order.

Note: I'm not a programming guru, I used some code hints & went through trials & failures to make this work & it may not be the best way to do it. Please backup your files & even database before you proceed & be careful when altering the codes.

Let's make a "Quick Search" element as an example

1st create a new template inside folder, let's name it search.tpl

Open this file in Notepad++ or similar text editor & add the code below to it then save it:

{if $quick_search}
<!-- Search Block -->
<div class="col_shape" style="margin:0 0 10px 0;">
<div class="top">{$smarty.const.MOD_LANG_SEARCH_TEXT}</div>

{include file=$tc_quick_search}

<div class="btm"></div>
<!-- / Search Block -->

What do those codes mean?

If you noticed, the code starts with {if $quick_search} & ends with {/if} , that tells the script to print the block (or element) only if the quick_search module is enabled, if it's disabled the block will be completely invisible in your sidebar.

Anything between <!-- & --> is hidden in web browsers, those are non required comments shown in the source code of a page.

The 1st div (class="col_shape") wraps the whole element & the 2nd (class="top") wraps the title of it, inside it you can see the Smarty code that will be translated to the title: {$smarty.const.MOD_LANG_SEARCH_TEXT} , the translation is located in the english.php file inside , by default it's "Quick Search". If you don't intend to translate your classified site you could just remove that code & type the title directly inside the div, example:

<div class="top">My Cool Search!</div>

Now the {include file=$tc_quick_search} is the actual code for the Quick Search feature. Needless to say it's vital here :)

Remains one div (class="btm") , it's for the bottom of the block / element.

Where the heck did I find those codes?

Well, since there's a Quick Search element inside the Accordion, you can find the smarty codes for Search inside accordion.tpl (same location where you put the search.tpl), for the title it's in a line like this:

<a href="#" class="toggle mid"><span>-</span>{$smarty.const.MOD_LANG_SEARCH_TEXT}</a>

Create an image for the element

Default elements have pictures inside the folder, just open one of them in Photoshop, erase the text, type "Search" instead & save the image as search.png , then upload it to the same directory.

Letting the system know about the new block!

Although we created our custom element, the system won't detect it. Let's mess with some PHP files now ;)

In Notepad, open init.php from & look for lines like this:

$valueArray[] = array('l_key' => 'accord', 'name' => 'Accordion', 'col' => 'L', 'rank' => 1, 'template' => 'accordion.tpl', 'image' => 'accordion.png');

Notice the "col" thingy above? it's for the sidebars (or columns), L, after it, is short for Left, & R means Right.

"rank" is about the order of the block / element. You will notice that there's a line for each element, the left elements 1st ('col' => 'L') then the right elements ('col' => 'R') & each line has a rank, 1, 2, 3, etc.

Those "ranks" & "cols" are default, you will later be able to move the elements from the admin panel of 68Classifieds, so let's add a line for our new element the simplest way:

Find the last of those lines, it's most likely this one:

$valueArray[] = array('l_key' => 'ad4', 'name' => 'Ad Space 4', 'col' => 'R', 'rank' => 9, 'template' => 'adspace4.tpl', 'image' => 'adspace4.png');

Copy it, create new line under it & past it there, now we change the values:

'l_key' => 'ad4' to 'l_key' => 'srch' (We will reuse the "l_key" value later, it's important)
'name' => 'Ad Space 4' to 'name' => 'Cool Search' (Or anything you like)
'rank' => 9 to 'rank' => 10 (since the previous line was ranked 9 now it's 10)
'template' => 'adspace4.tpl' to 'template' => 'search.tpl'
'image' => 'adspace4.png' to 'image' => 'search.png'

Still one step to do, open the config.php in & look for this line:

$data['module']['valid_zones'] = array(

Under it there are the "l_key" values of the default elements separated by comas in one or 2 lines, in the end of the lines add a coma, a space then 'srch' , could look like this:

$data['module']['valid_zones'] = array(
'mem_nav', 'accord', 'ad1', 'ad2', 'ad4',
'pop_cat', 'cat', 'pay_pro', 'top_list', 'ad3', 'srch'

Mission accomplished, now go to your admin control panel, deactivate the Template Zones module, then click the delete link which will uninstall it & then reactivate the module & go play with your new cool search block ;)


  1. [...] Of Things We’re Learning « This Just In Arabic - A New Translated WP Theme How to Create New Sidebar Elements for Template Zones Module of TemplateCodes [...]


Post a Comment

Popular posts from this blog

Quick Review: Choose the Best Classified Script For Your Needs

Translation with POEdit - Internationalize / Localize WP Themes Guide -Part 3

Making it Translatable - Internationalize / Localize WP Themes Guide -Part 2