Nasrul Hazim Bin Mohamad

Training: WordPress Theme Development


Training by Cleanique Coders Resources (002507773-X)

WordPress Theme Development is a course for an eye opener, how easy is to develop WordPress theme. Cleanique Coders will provide every essentials aspect for WordPress Theme Development.

In this course, we are going to LEARN how to develop WordPress theme using a WordPress skeleton and HTML theme.

And we are NOT going to customize WordPress ready-made theme

Our Trainer

Fauzan Rani

We have Fauzan Rani in the house, who has experience in WordPress theme development. He is well verse in following programming languages.

Wordpress, Magento
Joomla, Drupal, CodeIgniter, Laravel, AngularJS

He has involved in numbers of WordPress training:

SkillsMalaysia Invite
– Facilitator in training how to manage content for SkillsMalaysia website.
– Platform : WordPress
-Venue : CIAST, Shah Alam, Selangor

AgrobIS Mini Portal
-Trainer during AgrobIS website user training.
-Venue : MARDI, Serdang, Selangor

WordPress User Training
– 2 day training for Basic Web Development Using WordPress.As a sole trainer.Volunteer for Community.
-Time : July 21-22, 2014
-Venue : KKLW, Putrajaya, Selangor

WordPress For Non-Techies
– 1 day training for Basic Web Development Using WordPress.As a co-trainer.
– Community event organized by JomWeb and MaGIC
-Time : Nov 22, 2014
-Venue : MaGIC, Cyberjaya, Selangor

** He may show best of the best of this artworks during the class!

Course Details

Date: 26 & 27 March 2016

Venue: Hour Loft Cafe, Seksyen 7, Shah Alam –

Fee: RM 300

Syllabus Details

1) Starting the WordPress theme
– Training Overview
– Template Hierarchy/Structure
– Setup a WordPress Folder
– Activating a WordPress Theme

2) CSS and JS Integration
– Adding a CSS,JS to header and footer
– Working with CSS and JS in WordPress themes

3) Header and Footers

4) Homepage
– Sliders
– Feature post

5) Page Templates
– single post
– list page
– wordpress loop
– custom page template
– shortcodes

6) Navigation
– Adding new Menu
– Reposition and update menu
– Remove menu

7) Custom Post Type
– add new CPT
– list page
– WP_Query function
– custom field
– single page
– permalink

8) Blog
– list/index page
– adding comments

9) Gallery
– using plugin
– add, update, delete album
– add, update, delete, import photos

10) Contact Form
– Add Form using plugin
– Add Maps
– Address

11) Search
– Search Form
– Search Result Page

12) Finishing a WP theme
– add widget areas
– adding shortcodes
– Option Page
– Adding Analytics to Your Website

13) Migrate WordPress Website to Live Server
– Configure the database
– Folder permission
– Security options



Bootstrap Studio: 2.0.0 Review

Bootstrap Studio 2.0.0

Bootstrap Studio 2.0.0


Bootstrap Studio 2.0.0 has been released. New features have been added – as per screen shot below.

So, I’ve tested some of the new features – multiple CSS, pages and JavaScript. I’m trying to use Animate.css & WOW.js.

Here my review:

  1. PAGES – The pages are working great! with Duplicate features, that’s awesome! Except one thing – if one of your menu(for example) change, you need to update all the pages – workaround make sure you use custom components so that you can pull / push any changes to the component.
  2. STYLES – as what it mentioned – yes you can have multiple CSS! But I’m looking for to be able to import external CSS perfectly(currently I just copy-paste the animate.css, but it’s not working – have to export & update my animate.css)
  3. JavaScript – Again, importing JavaScript will be good(currently I’m copy-paste the WOW.js into new JavaScript) and the scripts is in alphabetical order! I hope I can manage my JavaScript position.

Below are some screenshots of the new Bootstrap Studio 2.0.0 and here the demo (with a little tweak to ensure animate.css & WOW.js are working) 🙂

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Design Features

Bootstrap Studio 2.0.0: Pages

Bootstrap Studio 2.0.0: Pages

Training: Bootstrap Studio


Location: TBC

Date: 16th January 2016

Available Seats: 30 seats




Registration closed!

InsyaAllah next month will be another Bootstrap Studio class! Stay tuned!

WordPress: Using Bootstrap In WordPress Admin


First of all – you need LESS compiler – for Windows, I use winless – please download & install it.

Next, grab the Bootstrap ( I use version 3.3.4, newer version broken when compiling the LESS ).

Extract the Bootstrap to a folder and then create a LESS file called bootstrap.less and paste in the following code:

.bs-wrapper {
   @import (less) url('bootstrap.css');

Now open up winless, and add folder where your Bootstrap CSS directory, and then on file bootstrap.less output file, you may name it as wp-admin-bootstrap.css.

Winless - Choosing the output

Winless – Choosing the output

Next, you just need to use wp_enqueue_style() to include the generated CSS – wp-admin-bootstrap.css

WordPress: Theme Development


I’ve been learning WordPress Development recently – both plugins & themes. Until today got a chance to summarize the WordPress Theme Development.

You have two options when developing WordPress Theme – either from scratch or extend(using child theme) the existing theme. Below is the illustration that I have on choosing the theme development method.

WordPress Theme Development Options

WordPress Theme Development Options

I’ve added some other requirement during the development process including how you want to design your layout, icons, colors. These are essentials things that you need to know / have.

Hope these two options could speed up your development process and of course these options for developers and not for non-developers (which I suggest to buy a 3rd Party Plugin for drag-and-drop theme development).

And of course the text editor – my favourite is Sublime Text 3.

Bootstrap Studio: Demos


Bootstrap Studio, is a powerful web design tool for creating responsive websites using the Bootstrap framework.

Here are some screen shots that I have when working with it. An awesome desktop application, recommended for frond-end developer, reducing time spent for front-end development.



Columns Sizing

Columns Sizing

Options for Columns

Options for Columns

CSS Panel

Similar to Chrome Developer Tools CSS Panel

For Dekstop

For Dekstop

The Files

The Files

The Files

The Files

For Desktop

For Desktop

For Mobile

For Mobile

Source Code

Clean Source Code Generated

Here are some samples that I’m able to create with Bootstrap Studios. Hope you guys enjoy it.

Source code available here

  1. Carousel (component available in BS 1.0.9)
  2. Simple Login

Here are the summary from my experience using Bootstrap Studio:

      Reducing time spent for front-end development
      Doing two job at one time – design & write codes
      Lightweight and easy-going UI

Anyways, before you consider to buy Bootstrap Studio, please make sure that you’re understand how HTML5, CSS3, JavaScript works, and of course Twitter Bootstrap itself, else, you might get confusing or too dependent with the tool.

Happy Bootstrapping!

Training: Web Mobile Application Development (Basic / Intermediate) – INTIM – August 2015


Training: Web Mobile Application Development (Basic / Intermediate)

Location: INTAN Kampus Wilayah Timur (INTIM), Kemaman, Terengganu

Date: 17th – 20th August 2015


Training Materials:

  1. Web Mobile Application Starter Kit –
  2. Basic Android Configuration –
  3. API Template –

Important Articles:

  1. HTTP Methods for Restful Services –
  2. Android Configuration –
  3. Chrome Device Mode –


Bootstrap DatePicker I18N – Malay


Setting up for Malay Language. Copy & paste the following, save it as and include in your HTML pages as needed.

$.fn.datepicker.dates['my'] = {
    days: ["Ahad", "Isnin", "Selasa", "Rabu", "Khamis", "Jumaat", "Sabtu"],
    daysShort: ["Ahd", "Isn", "Sel", "Rab", "Kha", "Jum", "Sab"],
    daysMin: ["Ah", "Is", "Sl", "Rb", "Kh", "Jm", "Sa"],
    months: ["Januari", "Februari", "Mac", "April", "Mei", "Jun", "Julai", "Ogos", "September", "Oktober", "November", "Disember"],
    monthsShort: ["Jan", "Feb", "Mac", "Apr", "Mei", "Jun", "Jul", "Ogo", "Sep", "Okt", "Nov", "Dis"],
    today: "Hari Ini",
    clear: "Bersihkan"

Sample usage:

    language: 'my',
    format: "MM yyyy",
    startDate: "Januari 2000",
    minViewMode: 1
Bootstrap DatePicker - Malay

Bootstrap DatePicker – Malay

Reference: Bootstrap DatePicker I18N

CakePHP 2.x: Pagination Element


Being working on Bootstrap Pagination with CakePHP. Here the final one. Use it as you needed.


  1. CakePHP 2.x Pagination
  2. Bootstrap Pagination
  3. CakeDC Users
  	<ul class="pagination">	
		echo $this->Paginator->prev('< ' . __d('users', 'previous'), array('tag' => 'li'), null, array('disabledTag' => 'span', 'class' => 'disabled'));
		echo $this->Paginator->numbers(array(
			'separator' => '',
			'tag' => 'li',
			'currentTag' => 'span',
			'currentClass' => 'active'
		echo $this->Paginator->next(__d('users', 'next') . ' >', array('tag' => 'li'), null, array('disabledTag' => 'span', 'class' => 'disabled'));