Nasrul Hazim Bin Mohamad

Training: WordPress Theme Development

Mar
17

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.

HTML/CSS/Bootstrap
jQuery/AJAX
PHP/MySQL
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 – http://bit.ly/hour-loft-cafe

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

 

REGISTER NOW AT http://goo.gl/forms/CUljXIeEPy

Bootstrap Studio: 2.0.0 Review

Jan
26
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

Jan
03

Location: TBC

Date: 16th January 2016

Available Seats: 30 seats

Brochure

Training-Bootstrap-Studio-NHM-1.1-20160102

 

Registration closed!

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

WordPress: Using Bootstrap In WordPress Admin

Dec
31

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

Dec
17

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

Oct
26

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.

Carousel

Carousel

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

Aug
16

Training: Web Mobile Application Development (Basic / Intermediate)

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

Date: 17th – 20th August 2015

Slide: http://bit.ly/training-web-mobile-application-development

Training Materials:

  1. Web Mobile Application Starter Kit – https://bit.ly/training-mobile-app-starter-kit
  2. Basic Android Configuration – https://bit.ly/training-mobile-app-android-config
  3. API Template – https://bit.ly/training-api-template

Important Articles:

  1. HTTP Methods for Restful Services – http://bit.ly/htpp-nethods-for-restful-services
  2. Android Configuration – http://bit.ly/android-config-xml
  3. Chrome Device Mode – http://bit.ly/chrome-device-mode

 

Bootstrap DatePicker I18N – Malay

Jun
24

Setting up for Malay Language. Copy & paste the following, save it as bootstrap-datepicker.my.js 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:

$('.input-daterange').datepicker({
    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

May
25

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

References:

  1. CakePHP 2.x Pagination
  2. Bootstrap Pagination
  3. CakeDC Users
<nav>
  	<ul class="pagination">	
  	<?php
		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'));
	?>
	</ul>
</nav>