WooCommerce Lookbook

WooCommerce Lookbook is WordPress plugin / WooCommerce add-on which enables you to create a lookbook: gallery of images which are tagged by your WooCommerce products.

Think of Facebook’s photo which can be tagged by your friends contact. This works like that except that what is being tagged is your WooCommerce product.

See it Yourself

Add new lookbook, similar to add new post screen
Add new lookbook, similar to add new post screen
Add existing or upload new images
Add existing or upload new images
Click selected image to tag particular area with WooCommerce product
Click selected image to tag particular area with WooCommerce product
View the tagged images, then press publish
View the tagged images, then press publish
Here's how it appears on the store - think of tagged FB photos
Here’s how it appears on the store – think of tagged FB photos

Credit

This plugin is originally made for my employer, Hijapedia, which awesomely agree to release this plugin as open source.

Download

Download on Github

Interested in hiring me for your project? Contact me here.

Daniel Riveong’s Personal Site

Daniel Riveong, general manager of digital marketing consulting agency in Malaysia, has blogged for years on several niche blogs he own. he has reached the point where he wants to unify all his blog and make it better. Basically, what he aims to do are:

  1. Redesigning his site and make it responsive.
  2. Changing the structure of his multisite blogs into one WordPress blog
  3. Importing the content of his sub-blogs into his main blog as archive (perfectly merged as custom post type)
  4. Removing the www from the site’s URL

He has had his designer designing the new look for his blog. I helped him transform those design into WordPress theme, among other technical  needs.

See it yourself

Homepage
Homepage
Footer
Footer
Most of things can be customized via Customizer
Most of things can be customized via Customizer
Custom post type page, archive of sub-blogs' content
Custom post type page, archive of sub-blogs’ content
Archive section
Archive section
Content styling
Content styling
Single page
Single page
Looks good on mobile screen
Looks good on mobile screen

See it at http://danielriveong.com/

Interested in hiring me for your project? Contact me here.

WP Live.js

Live.js is javascript tool made by Martin Kool which enables browser to automatically refresh itself whenever CSS, JS, or HTML part of the web page is updated.

WP Live.js is WordPress plugin which enables you to insert live.js easily. What distinguish WP Live.js from other plugin for inserting live.js is WP Live.js adds toggle on/off link on admin bar to toggle the script insertion easily. This save lots of time whenever you’re switching from editing CSS to working with browser’s console and logging HTTP request.

See it Yourself

Deactivate live.js easily from admin bar
Deactivate live.js easily from admin bar
Activate live.js easily from admin bar
Activate live.js easily from admin bar

Download

Download on Github

Interested in hiring me for your project? Contact me here.

WP-IG

WP-IG is WordPress plugin for syncing your Instagram photos & videos to your WordPress site.

Possible Use Cases

  1. Browse your Instagram feed from your WordPress dashboard
  2. Selectively post your Instagram photo & video to your WordPress site
  3. Automatically post every future Instagram photos & videos to your WordPress site. You can choose post type and category you’d like to assign to the imported photos & videos
  4. Selectively post and embed your following’s photos & videos
  5. Import all your previous Instagram photos & videos
  6. Delete all your imported Instagram photos & videos
  7. Display filtered feed on post using shortcode

How To Use

Install, activate, and follow the inline setting guideline – it’s pretty self explanatory:

WP-IG Settings Screen - 1
WP-IG Settings Screen – 1
WP-IG Settings Screen - 2
WP-IG Settings Screen – 2

For more guidance:

  1. You need to register your own Instagram client app here.
  2. After registering your own Instagram client app, copy and paste client ID and client secret of your Instagram client app to WP-IG settings screen.
  3. Assign post type and category – imported Instagram photo will be published using this post type and category
  4. Optionally, you can select to sync all your future Instagram photo
  5. By default, Instagram photo imported will be added as featured image. There’re lots of themes which display featured image as decoration instead of content. To handle this, you can optionally prepend the imported Instagram photo (or video!) to the content area.

Note: You can deauthorize your WordPress site to your Instagram client app at any time.

Credit

The idea of this plugin was inspired by my work I’ve done at Hijapedia. We did lots of Instagram integration and I think me and lots of people would love to do that as well. So I took what I learned from the Instagram Integration project and build WP-IG.

See it Yourself

Browse your Instagram feed from your WordPress dashboard
Browse your Instagram feed from your WordPress dashboard
Import all your previous Instagram photos
Import all your previous Instagram photos
Delete all your imported Instagram photos
Delete all your imported Instagram photos
WP-IG adds instagram class to post_class() so a theme like Opus can optimize how it looks for Instagram imported content
WP-IG adds instagram class to post_class() so a theme like Opus can optimize how it looks for Instagram imported content

Download

Download WP-IG | Fork at Github

Interested in hiring me for your project? Contact me here.

WooCommerce Bulk Sale

WooCommerce Bulk Sale is WordPress plugin / WooCommerce add-on which helps you to bulk edit sale price of your products.

Possible Use Cases

By default, you can set sale price for your WooCommerce product by:

  1. Go to Dashboard > Products > Select Product > Edit sale price
    This means you edit the sale price one by one.
  2. Go to Dashboard > Products > Select products by checking the checkboxes > select Bulk Actions > Press Apply > Edit product sale price
    This means you edit maximum 20 products which is displayed on the screen at one time

Neither way aren’t effective for editing products’ sale price in these possible use cases:

  1. Setting fixed sale price for 50+ products in one click
  2. Setting sale price of 50+ products by decreasing 10% of the regular price

WooCommerce Bulk Sale is developed for these kind of use cases

See it Yourself

Select products; You can even select all displayed product in one click
Select products; You can even select all displayed product in one click
Load more products if necessary
Load more products if necessary
Set fixed sale price or set sale price by decreasing regular price by percentage
Set fixed sale price or set sale price by decreasing regular price by percentage
Confirmation page displays recently updated sale products
Confirmation page displays recently updated sale products

Credit

This plugin is originally made for my employer, Hijapedia, which awesomely agree to release this plugin as open source.

Download

Download WooCommerce Bulk Sale

Interested in hiring me for your project? Contact me here.

Wujudkan Blog

Wujudkan is crowdsourcing platform specifically built for Indonesian market.   This project is a sub-contract work assigned by Weekend Inc1 to craft their .psd based design into responsive WordPress theme for Wujudkan’s blog.

See it Yourself

01.1 - Wujudkan Homepage
Wujudkan’s blog Homepage
02.1 - Wujudkan - Single Page
Wujudkan’s blog – Single Page
How it looks using mobile device
How it looks using mobile device

See it at http://blog.wujudkan.com.

Interested in hiring me for your project? Contact me here.

  1. A well-known digital agency in Indonesia 

Hijapedia

Role
WordPress theme & plugin developer

Time of employment:
Mid 2014 – Present

***

Hijapedia is array of sites consist of News, Store1 , and Forum2 for muslimah developed on top of WordPress Multisite. I was hired as freelance in late 2013 to lead its redesign as project manager3 and theme developer. Here’s how the redesign looks like:

Hijapedia News v2
Hijapedia News v2
Hijapedia Store v2
Hijapedia Store v2
Hijapedia Forum v2
Hijapedia Forum v2

The project went great and after I decided not to extend my contract with DMD BINUS for another year and move back to my Bandung, I was hired as remote WordPress theme and plugin developer for Hijapedia. Months after my employment, I analyze the site’s traffic and realize that mobile traffic has surpassed desktop traffic. Hence I pitched my employer to optimize the site by doing another redesign, this time using mobile first approach4 to make the UX of the site better for majority of visitors whom visit our site using mobile device.

My employer agreed. This time I was wearing the designer + developer hats. We’re using existing color scheme, existing IA structure, but optimizing the UI and UX using mobile first approach. After months of redesign process, this they how it look like:

Hijapedia News

Hijapedia News - Homepage
Hijapedia News – Homepage
Hijapedia News - Homepage (Recent Posts section). Notice how different it is presented on desktop and mobile screen
Hijapedia News – Homepage (Recent Posts section). It is adjusted to the possible use case: swiping is okay on mobile device while skimming is preferable on desktop
Hijapedia News - Homepage (Community Post Section)
Hijapedia News – Homepage (Community Post Section)
Hijapedia News - Article
Hijapedia News – Article
Hijapedia News - Login, powered with login with Facebook option
Hijapedia News – Login, powered with login with Facebook option
Hijapedia News - Front-end Editor
Hijapedia News – Front-end Editor
Hijapedia News - Profile
Hijapedia News – Profile

See it at http://hijapedia.com

Hijapedia Store

Hijapedia Store - Homepage
Hijapedia Store – Homepage
Hijapedia Store - Shop
Hijapedia Store – Shop
Hijapedia Store - Obvious Notification, making shopping easy and less confusing
Hijapedia Store – Obvious Notification, making shopping easy and less confusing
Hijapedia Store - One page fast checkout
Hijapedia Store – One page fast checkout

See it at http://store.hijapedia.com

Hijapedia Forum

Hijapedia Forum - Homepage
Hijapedia Forum – Homepage
Hijapedia Forum - Forums
Hijapedia Forum – Forums
Hijapedia Forum - Thread
Hijapedia Forum – Thread

See it at http://forum.hijapedia.com

***

Besides remote working benefit and opportunity to make customized WordPress experience, another great thing about working at Hijapedia is open-mindedness of the employer. I pitched him to open source many of our custom plugins5, and he agrees. Many plugins6 available at my github account are courtesy of Hijapedia.

Interested in hiring me for your project? Contact me here.

  1. Powered by WooCommerce 

  2. Powered by BBPress 

  3. I subcontracted the design process to Hellonemo, design firm which is based in Malang, Indonesia 

  4. The previous redesign was done as desktop-first with responsive layer 

  5. Based on Tom Preston-Werner’s “Open Source (Almost) Everything” reasons  

  6. Especially those WooCommerce and Gravity Forms add-ons 

WordCamp Indonesia (October 2013) – WordPress Customization for Higher Educational Institution’s Websites

This is my presentation with my former colleague Deni Hartanto on behalf of Digital-Media Development Division of BINUS University at WordCamp Indonesia 2013 about WordPress customization for educational institution.

Disclaimer: material presented on this presentation is owned by Digital-Media Development Division of BINUS University.

Documentation

Medidu.com was handsomely video-recording me and my colleague’s entire session (I don’t even know that somebody recorded it). Thanks!

 

 

 

DMD BINUS published a photo album about the session which you can see here.

Interested in hiring me for your project? Contact me here.