Nasrul Hazim Bin Mohamad

Training: WordPress for Beginners


Location: Medina Arabic, Seksyen 9, Bangi (Above Melaka Kitchen Restaurant)

Date: 10th January 2016

Available Seats: 28 seats




Registration closed!

InsyAllah before end of January 2016 will be another free training for ‘WordPress For Beginners’! 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

Lumen: API Development – Episode I


So, this post is about develop your own API using Lumen, a micro framework, a child of the Laravel (I assumed it that way). This topic will take few parts and this is the Episode 1 of Lumen: API Development.

Following tools required to be install on your machine:

  1. Virtual Box – For those using Avira Anti Virus, you might need to head over this article if you having problem with Virtual Box.
  2. Vagrant – Enable developers to easily share the same environment configurations
  3. Composer – Enable developers to manage packages for system dependencies
  4. Git – Famous version control (please do create a GitHub account)
  5. Sublime Text 3 – best text editor I’ve used so far. 🙂

Here are the basic steps taken for setting up the Lumen(all commands running in Git Bash):

  1. Create Lumen project at directory lumen-api
    composer create-project laravel/lumen lumen-api
  2. Install homestead
    cd lumen-api
    composer require laravel/homestead
  3. Make homestead
    php vendor/bin/homestead make


    php vendor/laravel/homestead/homestead make
  4. Create id_rsa at /C/Users/[yourname]/.ssh
    ssh-keygen -t rsa -C yourname@homestead

    Location of the id_rsa

    Location of the id_rsa

  5. Open Homestead.yaml and change map folder to working directory (step #1)
    map: "D:/WWW/lumen-api"

    homestead.yaml Configuration

    homestead.yaml Configuration

  6. Update C:/Windows/System32/drivers/etc/hosts file
  7. install vagrant laravel/homestead (size about 1GB..taking about 45 minutes on 4mbps connection.. T_T)
     vagrant box add laravel/homestead

    Vagrant Add Box Laravel/Homestead

    Vagrant Add Box Laravel/Homestead

  8. Open up Virtual Box & start up the vagrant
     vagrant up
  9. Try to SSH to homestead to check if it’s ok
     ssh vagrant@ -p 22

    Try to SSH to Homestead

    Try to SSH to Homestead

  10. Browse to to check if the homestead installed properly



WordPress: Customize Polylang Language Switcher


A default language switcher for Polylang it’s a bit out of date. Below are the customized Polylang Language Switcher.

Customized Polylang Language Switcher

Customized Polylang Language Switcher

Below are the codes used for the customization.


include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

// check if polylang exist & enabled
if ( is_plugin_active( 'polylang/polylang.php' ) ) {
  	//plugin is activated
	add_filter('pll_the_languages', 'my_dropdown', 10, 2);
	function my_dropdown($output, $args) {
	    $translations = pll_the_languages(array('raw'=>1));
	    $output = '';
	    $output .= '<div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
    <ul class="dropdown-menu">';

	    foreach ($translations as $key => $value) {
	    	$output .= '<li><a href="'.$value['url'].'"><img src="'.$value['flag'].'" alt="'.$value['slug'].'"> ' .$value['name'].'</a></li>';

	    $output .= '</ul></div>';
	    return $output;


  1. Check if a plugin is active or not
  2. Polylang Functions Reference

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.

Ionic: Installation on Windows



  1. Install latest JDK
  2. Install Apache Ant
  3. Install Android Standalone SDK – I’m choosing the latest one(as per today) – installer_r24.4.1.exe
  4. Install Android SDK Packages
    • Tools – choose Android SDK Tools, Android SDK Platform-Tools and Android SDK Build-Tools
    • Android x.x – Choose SDK Platform, ARM EARBI v7a System Image
    • Extras – Android Support Repository, Android Support Library, Google Repository, Google Play Services
  5. Install Cordova npm install -g cordova
  6. Install Ionic npm install -g ionic
  7. Create new ionic project ionic start todo blank
  8. Go into project folder & verify project file structure – cd todo && ls -la
  9. Add Platform ionic platform add [ios|android]
  10. Enable Phone’s Debugging Mode: Open Phone’s Settings > About Phone > Tap Build No few times until Developer options enabled. Go to Settings > Developer options > USB Debugging – turn it on.
  11. Build App for Platform – Please make sure to connect your phone with laptop via USB before proceed following commands
    • ionic build [ios|android]
    • ionic run [emulate ios|android]
  12. Generate icons and splash screens for all devices and device sizes with a single command.
    ionic resources

If having issue with time out(like screen shot below), please refer here




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

Slide in Elements



.slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);


$(window).scroll(function() {
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {

Reference: Bootstrap Theme “Company”

jQuery: Smooth Scrolling

  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#back-to-top']").on('click', function(event) {

  // Prevent default anchor click behavior

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;

Reference: Bootstrap Theme “Company”