FlareCart – start an ecommerce modules for Pyro CMS


Building a module s for Pyro CMS is not so difficult. Here I bring you my own modules. Not be  a good modules yet, but it will soon. This modules is born from my idea to make an ecommerce modules for Pyro CMS. As we know this CMS are engined with codeigniter, that the most easy to learn PHP framework.  I think its gonna be a good challenge for me who already used wp ecommerce for several years. I want to try build an ecommerce modules with my own code. This Flarecart modules are already implemented on my site http://laptopbarkas.com. Not my site actually, but my client site. This modules is very simple. based on my own plan, this modules will developed in several steps. Now its start on the first step. On its first step,  it comes with some basic feature or maybe less. This is the basic feature from FlareCart

  • Category Management, this feature adopt the pages module ability. I’ts bring you the category tree that can be managed by drag and drop the category item. Just look like the pages but with some different color
  • Product Management, On this section I want to try to make product management system using drag and drop UI. And I made it. but its still content a little bug.
  • Add product with additional metadata as options, May be some store is not enough to describe its product on the product description. So I add a metadata options that it will appear on the product detail page.
  • Review controll, this control the review from visitors who wants write some review for related products.
  • Picture upload with cropping function, This upload function are equipped with cropping image function, so the store can choose the foc
This Modules are came out with my own themes called “Barkas”. This themes will comes as default themes for this modules. This themes are include some widget such as slide show and page picker.
Just come and see.

Migrate to PyroCMS

Leave a comment

After spending so many time looking for a CMS based on Codeigniter framework, finally I found some new platform called PyroCMS taht you can visit the page ar http://pyrocms.com/. This platform has slogan “The modular, opensource cms powered by codeigniter”. From those we can now that this CMS are powered with the most easy to learn and develop PHP framework, Codeigniter. I found this cms at a years ago.   And now this cms are grow fast with two choice of package, community and pro. With the pro you can get the multisite manager on your PyroCMS engine.

This cms is very easy to learn and easy to develop. Its more easy if you have the basic skill or knowledge on codeigniter. This cms bring the HMVC pattern that codeigniter have not give yet.  So, if you want to build some modules or plugins for this Pyro, its just have the same way when you build your apps using codeigniter.

Now PyroCMS reach 1.3 version. And for each increasing of version is always bring new great feature. I m very interesting on uploading files backend, i thing its very nice . The static page list is also nice to try .This cms project also hosted on GITHUB, so user can give a feedback or reporting a bug. The developers are very nice on doing bugfix job.  There is no reason to not to try this PyroCMS, especially for you who ever using codeigniter for building a web project.

From the rising of 1.0 version, I have build two website using this CMS. The first is http://barindohotelmanajemen.com/ . this site is contain a catalog of hotel under barindo hotel management. And the second is http://laptopbarkas.com/ , this site is looks like simple ecommerce. Both of them are using my custom modules, and it build in not more than a week. So give a try for this CMS

Android apps Mockup

Leave a comment

This is the second post about mobile apps mockup. Just like before, this mockup are made for a competition. But this time , the competition held by acer in order to promote its new product. But i’m loose again. I dont know, maybe I have a bad luck. I hope my bad luck is end now.

By the way, please enjoy my collection. May be its could inspiring you are. About this mockup, truly this is my dreams. I want to build some application for Jogja guide Map. But I stuck, because I don’t know how to code it or made it. If you read my post and have the same idea like me. You can contact me, I will give you long explain about my idea and I can made you some mockup for your apps.

I Phone apps mockup

Leave a comment

This mockup are made for one of 99’s event. But unfortunately I’m Loose. I think id better upload my mockup on my blog. Just for collection. My be its could inspiring you all who want to start building mobile page or mobile apps ui.

Making Mega Drop-down menu, for WP-Ecommerce


For you who use the WP -Ecommerce as your shopping cart engine, maybe sometimes you wants to display your bunch of  product categories in front of your page. If you have very long tree of categories , you must be worried about its layout. The next problem is, not every themes are support or compatible with WP-Ecommerce. And for this reason, you need to hack your own themes, put some code and you will find your web page show your list of product categories. In this case I will show you how to put the product categories on your front page. This product categories will shown as Mega drop down menu. You can find what its means on google. Not commonly like another drop down menu. With this menu layout ( Mega drop down ), the visitor will see whole child category of product when  the parent are hover. This menu has 3 depths of level on maximum, and this is the screenshoot Now Lets see, how to make it like that :

  1. First this menu I build using Jquery Engine, so you must enque the jQuery core into your themes.
  2. Secondly, add a  

    tag  into your theme, and its should be looking good if the menu appear on there.</li>
    <li>Insert this PHP script into the "div". <code>

    . This Script are use to call the list category of product on WP-Ecommerce.

  3. Next Insert this Javascript ( Jquery based ) codes.
    $(document).ready(function() {
    $(".PeCategories > .cat-item").find("ul:first").each(function(){
    var parentwidth = $(this).parent().width();
    var mypos =$(this).parent().position().left;
    var mysize = $(this).find(" > li").size();
    var mywidth = $(this).find("li").width();
    if (mypos >= 500){
    });$(".PeCategories ul.SubCategories").css({display: "none"}); // Opera Fix
    $(".PeCategories > .cat-item").hover(function(){
    jQuery(this).find('ul').css({visibility: "visible",display: "none"}).fadeIn(268);

  4. Then Finally you can use this style sheet to get the final preview like the example.
    .mega-menu {-moz-border-radius: 20px; -webkit-border-radius: 20px;text-align: left; border: solid 1px #9D7D99 ; padding: 0; margin-bottom: 10px; background: url(../images/bgmenu.gif) repeat-x; height: 35px; width:inherit;}
    .categorydisplay ul {list-style-type: none; padding:4px 0 0 0 ; margin:0; position: relative;list-style-position:outside;z-index: 100;}
    .categorydisplay li {position: relative; float: left;display: block; margin: 0 30px; padding: 0 30px; font-size: 14px; font-weight: bold;}
    .categorydisplay ul li a.active {color: #E4DCE3; background-color: #3D3443; text-decoration: none; -moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;}
    .categorydisplay ul li a {color: #F3EDF3; padding: 8px 5px;display: block;}
    .categorydisplay ul li a:hover {color: #E4DCE3; background-color: #3D3443; text-decoration: none; -moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;}
    .categorydisplay ul ul {position: absolute; background-color: #64556F;top: 31px; padding-bottom: 15px;-moz-border-radius-bottomleft: 10px;-moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-right-radius: 10px;}
    .categorydisplay ul ul li {display: block; float: left; width: 125px; margin: 0; padding: 0; font-weight: normal;/* background-color: #3D3443;*/}
    .categorydisplay ul ul li a {font-weight: bold; color: #BF9BBA;}
    .categorydisplay ul ul li a:hover {-moz-border-radius: 0px;-webkit-border-radius: 0px;text-decoration: underline; color: #BF9BBA; background-color: transparent;}
    .categorydisplay ul ul ul {position: relative; width: 125px; top: 0; padding: 0; list-style-type: disc;}
    .categorydisplay ul ul ul li {display: block;clear: both; width: 125px;background-color: #64556F;line-height: 12px; padding: 0; margin: 0;}
    .categorydisplay ul ul ul li a {padding: 5px 0 5px 8px; font-weight: normal; color: white;}
    .categorydisplay ul ul ul li a:hover {-moz-border-radius: 0px;-webkit-border-radius: 0px; background-color: #C6B6CB; color: black;text-decoration:none; }

Thats all the tutorials for today you may copy this article and use it. But don’t forget to mention the source. You can see the result of this work on http://www.nicefine.net/living

WordPress Role Management Plugins

Leave a comment

Still worked on Rumah tropika web project. This time I have a problem with user permission and roles. From the basic plan, this site will managed not only from one person. But only few persons who can or have priviledge to manage the themes, plugins , user. This means I must implement  the user permission set that wordpress already provided. But Im not fully satisfied with that things. Because only administrator could working with plugins.

In this case, I have installed NG Gallery plugins and I want other user without administrator role can manage the galleries. And its not worked id standard Worpress Roles set. I have searching arround on WordPress plugins repository. I found several plugins that can give what I need. But its not really like what I want, one of them are too complex , and the other not working with nextgen Gallery.

Finally after 2 hours searching on Google, I found the answer. This is a WordPress plugins developed by Justin Tadlock. This plugin have the same function as i want. It can modify User roles on wordpress

You can download this plugins on this link


and this is for the screenshoot

Create Your Own Themes Admin for WordPress 2.9


This documentation maybe useless , because now wordpress release the new wordPress 3.0 with the new themes API. But never mind maybe this documentation will really useful for the WP 2.9 user , or who want to start learning about building wordpress themes.

This documentation is very minimum of explanation, if you want more explanation you can visit the wordpress codex page. You can find whole you need to build your own themes, widget, or plugins. And also this documentation will only most talking about ” how to make  themes backend admin page ” like the title said.

Now lets start ,

If you are building the very first of your own WP themes, you must create some main files that needed by the wordpress. These file are index.php, page.php, style.css, functions.php . But relating from the title of this post yau have to create “functions.php” if you want to have themes admin page.

This is several script inside the functions.php and the explanation.

if ( function_exists('register_sidebars') ) {
register_sidebars(1, array(
'name' => 'Tropika Greet Box',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => '',

You can add the html tag (div), to style up the widget, on the value of  ‘before widget’ key,’after widget’ key,’before title’ key,’after title’ key. This script will register the placement or location for the widget placed.

The next is the main code to adding some menu on admin page

add_action(‘admin_menu’, ‘tropika_create_menu’);

This code means to add an action that adding admin menu witch the parameter write on tropika_create_menu function.

So now let create tropika_create_menu function.

function tropika_create_menu() {
//create new top-level menu
add_theme_page('Rumah Tropika Theme Setting', 'Tropika Settings', 'edit_themes', __FILE__, 'tropika_settings_page');
//call register settings function
add_action( 'admin_init', 'tropika_register' );

add_theme_page means to instruct the wordpress to create a theme page for this menu. And whole the parameter are write on the function parameter.
the second function (add_action) is to initiate the field of form that used by the themes to adjust the apperance. and its write on tropika register function.
Now Lets create the tropika register function

function tropika_register() {
//register our settings
register_setting( 'tropika-settings-group', 'tropika-exclude-top-menu' );
register_setting( 'tropika-settings-group', 'tropika-feature-category' );
register_setting( 'tropika-settings-group', 'tropika-slideshow-speed' );

the register_setting is to register the field which have the field group are tropika-setting-group, and the field are describe separately on each line.
Now for the last we create the interface for the page.  We named the function with tropika_setting_page as mentioned on add_theme_page function.

function tropika_settings_page() {
//bunch of html code -- you should use html form--
<?php settings_fields('tropika-settings-group'); ?> //this is to declare the field group
[input type="text" name="tropika-exclude-top-menu" value="<?php echo get_option('tropika-exclude-top-menu'); ?>" /]  //its used if you create input text field
<?php wp_dropdown_categories('show_option_none=None&hide_empty=0&name=tropika-feature-category&exclude=1&orderby=name&selected='.get_option('tropika-feature-category')); ?> //you can use this if you want to create dropdown menu.
[input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" /] //this is for the save button

You can visit my work at http://nicefine.net/living

Older Entries