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 – Batch 2


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

System Development: Must Have 3rd Party Library


A list of useful libraries used for system development – such as uploading, sorting, beautiful alert messages.

So, you don’t have to stick to those old schools methods for all the above. 🙂


Ply, beautiful alert messages and even you can customize for login or registration modal.

DropzoneJS, similar to WordPress uploading Media.

DropzoneJS, similar to WordPress uploading Media.


Sortable, useful when it’s come to sort out your staff list for instance, or probably you have a list of products need to be sort.

Website Development – Front-end


I’ve been working recently on what’s the basic / features used in most websites in 2015. Here is the list:

  1. Parallax
  2. Carousel
  3. Animate
  4. Smooth Scrolling
  5. Flat UI Design
  6. Nice & Clean Icons
  7. UI Framework
  8. JavaScript Library with their extensions
  9. Slider

From all of features above can be achieve by using following plugins/extension/library:

  1. Carousel – Owl Carousel
  2. Parallax – Parallax.js
  3. Animate – Animate.css
  4. Smooth Scroll – see my post here
  5. Fontello – include Font Awesome, Fontellico, etc.
  6. Ui Framework – Bootstrap, Foundation
  7. Slider – Light Slider

In 2016, I think most of the above still remain use.

A bit of reading just now – probably my next project will use Angular Material.



Year 2016, InsyaAllah, next year to be a year of sharing knowledge of what I’ve learnt so far. Following are the trainings I would like to conduct:

1. Mobile Apps Development with jQuery Mobile
2. Mobile Apps Development with Intel XDK (incoming)
3. API Development with Slim Framework (incoming)
4. PHP Basic / Advanced
5. Web Development with CakePHP 3 (incoming)
6. Web Development with Laravel 5 (incoming)
7. Web Development with Yii Framework 2 (incoming)
8. WordPress for Developers – Beginner Level
9. WordPress Theme Development
10. WordPress Plugin Development

Those status incoming, it’s the one I’m preparing the syllabus & materials, summarizing the process, and so on. Hope more things can be share other than mentioned above such as the tools I’ve used along the process of the development – Sublime Text 3, SQLYog, Putty, Git and so on

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.