I decided to write a tutorial about how to create custom widgets from scratch.
Tips, tricks and explanations shown here will be useful not only for creating widgets,
but also teach some basic knowledge about how things works in W-script.
This is mostly for newbie users, but maybe even somewhat advanced users may find something useful.
Each paragraph includes one or two examples of code, important parts are bold.
When you need to insert custom code in existing file it will be shown like this:
Approximate line number where to insert code
one or two lines of existing code, so you know precisely where the code is supposed to be
//comment like this or <!– == like this == –> to define start of custom code
example of code
//end comment
few more lines of existing code
!! The code examples from this post might contain errors due to the WordPress text formatting.
Better download code examples from http://hellkern.com/mod.zip or http://www.w-script.com/download/code%20hacks/custom%20modules.zip
Widget
First file to create is the widget itself.
Copy file templates\default\html\section_advertisements.tpl
Rename it as: section_custom_1.tpl
(or anything you want, but the extension must remain “.tpl” and you must remember or write down name of this file, it will be needed later)
Open the file with your favorite code editor (Notepad++ works just fine)
Delete all the content and replace it with:
<h2 class=“headers” id=“cstm”>
<span class=“ui-icon ui-icon-heart c3”> </span>
{‘custom_1′|Lang}
<span class=“ui-icon ui-icon-triangle-1-w c4”> </span>
</h2>
<div id=“custm” class=“hidden”>
{if CUSTOM_1 != ”}
{$smarty.const.CUSTOM_1|base64_decode}
{else}
<div style=“padding:10px 36px 10px 36px”></div>
{/if}
</div>
Explanation.
!! Important, all the variables used here are case sensitive, “CUSTOM_1″ is NOT the same as “custom_1″ Don’t forget that
id=“cstm”> This is the ID of this widget. In this example it’s “cstm” . You may call it whatever you wan’t, but the name must be unque for ewery widget. Just use “cstm2″, “cstm3″ and so on for other widgets. Remember that name for later use.
“ui-icon ui-icon-heart c3″> Here “ui-icon-heart” is the small icon what appears on left side of the widget. If you want to change widget’s icon open \templates\default\images\icons\ui\ui-icons_cccccc_256x240.png and choose what icon you want for the widget, then open \templates\default\css\jquery\ui.css and try to locate icons you just chose, starting from line 92, it should not be too hard to understand what is what there.. Finally replace “ui-icon-heart” with the icon you chose from ui.css
{‘custom_1′|Lang} Here “custom_1″ represents string from the language file. This too needs to be unique for every widget, I’ll explain later how to add custom strings to language file.
<div id=“custm” This is ID for Widgets Content, must be unique.
{if CUSTOM_1 and const.CUSTOM_1|base64 Here “CUSTOM_1″ represents the code that will be visible in this widget. This If/else statement checks if the code has been added. Name must be unique.
Sections
This part adds the new widget to the sidebar.
Next, edit file: \system\application\config\sections.php
At the end add:
// custom sidebar hack
$sections [ ‘section_custom_1′ ] = array (
’title’ => ‘Custom widget 1′, ‘description’ => Lang ( ‘custom_w_1′ ), ‘show’ => TRUE, ‘order’ => 1
);
Explanation:
[ ‘section_custom_1′ ] This is the name of the widget’s file you created in 1st step, only without “.tpl” extension.
’Custom widget 1′ This is title of widget, write whatever you want, this title is only seen in widget settings panel..
Lang ( ‘custom_w_1′ ) Language string for widget’s description.
Cookies!
Edit file: \templates\default\js\custom.js
This part keeps widget collapsed or uncollapsed depending on cookie
Line ~ #48
if($.cookie(‘pw’)!=‘hidden’){$(‘#pw’).removeClass(“hidden”);$(‘#pc > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);}
//custom sidebar hack
if($.cookie(‘custm’)!=‘hidden’){$(‘#custm’).removeClass(“hidden”);$(‘#cstm > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);}
//end of custom sidebar hack
if($.cookie(‘cocw’)!=‘hidden’){$(‘#cocw’).removeClass(“hidden”);$(‘#coc > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);}
This part allows users to collapse/uncollapse widget and writes a cookie about it..
Line ~#126
}
});
//custom sidebar hack
$(‘#cstm’).click(function(){
if($(‘#custm’).hasClass(“hidden”)){
$(‘#custm’).removeClass(“hidden”);
$.cookie(‘custm’, null, cookie_options);
$(‘#cstm > span.c4’).removeClass(‘ui-icon-triangle-1-w’).addClass(‘ui-icon-triangle-1-s’);
}
else {
$(‘#custm’).addClass(“hidden”);
$.cookie(‘custm’, ‘hidden’, cookie_options);
$(‘#cstm > span.c4’).addClass(‘ui-icon-triangle-1-w’);
}
});
}
//end custom sidebar hack
function changebg(newbg){
showUpdate();
Explanation:
“custm” and “cstm” must be the same variables you used in the first step.
Data
I *think* that this part takes the code you will soon enter in admin’s panel and pushes it to the widget (not 100% sure, I’m a newbie mysely, but this works)
Edit file: \system\application\controllers\admin.php
Line ~ #376
$settings [ ‘SMTP_PASS’ ] = prepare_constant ( ” );
}
//custom sidebar hack
$settings [ ‘CUSTOM_1′ ] = prepare_constant ( base64_encode ( $this->input->post ( ‘CUSTOM_1’ ) ) );
//end of custom sidebar hack
$settings [ ‘LANG_TYPE’ ] = prepare_constant ( $this->input->post ( ‘LANG_TYPE’ ) );
Explanation:
’CUSTOM_1′ is the same variable you used in the first step.
User Friendly Interface.
This part creates a new tab in admin’s panel, and allows you to edit widgets code with ease.
admin_settings.tpl
Line ~ #14
<li><a href=“javascript:void(0)” onClick=“ShowTab(7)” id=“tab7”>Design</a></li>
<!– ===Add The line Bellow=== –>
<li><a href=“javascript:void(0)” onClick=“ShowTab(8)” id=“tab8”>x</a></li>
<!– ========================== –>
</ul>
Explanation
This adds tab named “x” Do not use longer name, there is not enough space in admins panel.
Line ~ 506
<li class=“clear”> </li>
</ul>
</div>
<!– ============ custom =============== –>
<div id=“div8” style=“display:none”>
<ul>
<li>
<label class=“description” for=“CUSTOM_1″>{‘custom_w_1′|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_1″ class=“element textarea small” id=“CUSTOM_1″>{‘CUSTOM_1′|@form_validation_get_value:$smarty.const.CUSTOM_1|base64_decode}</textarea>
{‘CUSTOM_1′|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_1′|@Lang}</small></p>
</div>
</li>
</ul>
</div>
<!– =========end of custom =========== –>
</fieldset>
Explanation:
This code adds a textbox in this tab and connects it with admin.php.
‘CUSTOM_1′ the same variable as in widget and admin.php
“custom_w_1″ Description language string
’g_custom_1’ Guidelines language string
Language Strings
Add new words and names.
Edit File: \language\english.php
Line ~ 9
$lang [ ‘charset’ ] = ‘UTF-8′;
// Reserved variable <–
// custom sidebar hack
$lang [ ‘custom_1’ ] = ‘Custom Side Bar 1 Title’;
$lang [ ‘custom_w_1′ ] = ‘Custom Side Bar 1 description’;
$lang [ ‘g_custom_1′ ] = ‘Enter here what you want to see in custom side Bar 1′;
// end of custom sidebar hack
$lang [ ‘cat_details’ ] = ‘Click this icon to access more options for this category’;
This one is pretty self explanatory
Create More Widgets.
Repeat steps 1–4 and 6 but use different names for the variables (“CUSTOM_1″, “cstm”, “custm” and others)
Only step 5 is a different. Instead of creating new tabs just add new textboxes in the same tab, like this:
<!– ================ custom 1============== –>
<div id=“div8” style=“display:none”>
<ul>
<li>
<label class=“description” for=“CUSTOM_1″>{‘custom_w_1’|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_1″ class=“element textarea small” id=“CUSTOM_1″>{‘CUSTOM_1′|@form_validation_get_value:$smarty.const.CUSTOM_1|base64_decode}</textarea>
{‘CUSTOM_1′|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_1′|@Lang}</small></p>
</div>
</li>
<!– ================ custom 2================ –>
<li>
<label class=“description” for=“CUSTOM_2″>{‘custom_w_2′|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_2″ class=“element textarea small” id=“CUSTOM_2″>{‘CUSTOM_2′|@form_validation_get_value:$smarty.const.CUSTOM_2|base64_decode}</textarea>
{‘CUSTOM_2’|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_2′|@Lang}</small></p>
</div>
</li>
<!– ================= custom 3=============== –>
<li>
<label class=“description” for=“CUSTOM_3″>{‘custom_w_3′|@Lang}</label>
<div align=“left”>
<textarea name=“CUSTOM_3″ class=“element textarea small” id=“CUSTOM_3”>{‘CUSTOM_3′|@form_validation_get_value:$smarty.const.CUSTOM_3|base64_decode}</textarea>
{‘CUSTOM_3’|@form_validation_print_error}
<p class=“guidelines”><small>{‘g_custom_3’|@Lang}</small></p>
</div>
</li>
</ul>
</div>
Usage instructions and file samples are in this post: http://www.w-script.com/how-to-make-custom-modules/
If you have any questions please comment!
Recent Comments