Patio

A beautiful photo-centric theme

Photobloggers rejoice
Or anyone who’s fond of featured image
For a theme which presents your image beautifully

The Origin

Patio is planned to be my fifth theme in the repository. It is designed and developed in March – April 2015. I planned to submit at least six themes in 2015. This is my third theme in 2015.

The Goals

Patio is made with these goals in mind:

  1. As my other themes, it should “just works” and looks great on various screen size (responsive).
  2. I want a different take on photo-centric / photoblog theme. Most themes went with square / pinterest-like approach. Patio should offer a different, fresh, and better approach.
  3. Patio makes skimming content easy and fun. It should be a visual amusement.
  4. It should work well with WP-IG, plugin for syncing your Instagram photos with your WordPress sites. I want to use Patio on my own blog and I use WP-IG.

Plugin Compatibilities

Patio works nicely with these plugins:

  1. Jetpack’s Infinite Scroll & Site Logo. If you have footer widgets, Infinite Scroll is automatically set to click-to-load mode. If you don’t have footer widgets, Infinite Scroll is automatically set to auto-load mode. It adapts with your site settings.
  2. Civil Footnotes
  3. Subtitles
  4. WP-IG

See it Yourself

Patio homepage. If you use lots of featured image, you will love Patio
Patio homepage. If you use lots of featured image, you will love Patio
Big bold beautiful landscape featured image will look great on Patio.
Big bold beautiful landscape featured image will look great on Patio.
Posting square photos? It'll look great too
Posting square photos? It’ll look great too
Patio makes sure your image accessible. Portrait image will not be displayed as full-width image because its height will overlap window's height. Patio will display it properly instead
Patio makes sure your image accessible. Portrait image will not be displayed as full-width image because its height will overlap window’s height. Patio will display it properly instead
Fancy previous / next post navigation. This one is borrowed / forked from TwentyFifteen. GPL rocks
Fancy previous / next post navigation. This one is borrowed / forked from TwentyFifteen. GPL rocks
Patio supports footer widgets. It will automatically divide its column width based on number of footer widgets you use. So if you only want two column widgets, you'll have it displayed properly
Patio supports footer widgets. It will automatically divide its column width based on number of footer widgets you use. So if you only want two column widgets, you’ll have it displayed properly
Big bold no-clutter search drawer
Big bold no-clutter search drawer
Beautiful functional error not found page
Beautiful functional error not found page
Patio is made to intuitively work with Jetpack's infinite scroll. If you have footer widgets, it will set itself into click-to-load-mode. If you have no footer widgets, it will set itself into autoload mode
Patio is made to intuitively work with Jetpack’s infinite scroll. If you have footer widgets, it will set itself into click-to-load-mode. If you have no footer widgets, it will set itself into autoload mode
Do you use Civil Footnotes? Your footnotes are ensured to look great on Patio
Do you use Civil Footnotes? Your footnotes are ensured to look great on Patio
Phillip Arthur Moore's Subtitles look great on Patio too.
Phillip Arthur Moore’s Subtitles look great on Patio too.
Mobile support is a must. It's 2015 now.
Mobile support is a must. It’s 2015 now.
Top navigation smartly adapts with small screen limitation
Top navigation smartly adapts with small screen limitation
Search drawer adapts nicely with small screen limitation too
Search drawer adapts nicely with small screen limitation too
Patio serves your article nicely on mobile page
Patio serves your article nicely on mobile page

Changelog

April 5th, 2015

Submitted to WordPress repository

Download

Download in GitHub | Demo

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

 

Bitsmaker

Bitsmaker is a site for listing Indonesian-made digital products. Bitsmaker is founded by my long-time client1, Richard Fang & Karen Kamal. I was hired to translate their .psd design into working WordPress theme.

Some fun stuffs on Bitsmaker theme:

  1. Responsive design (well, it is 2015 now)
  2. Smooth CSS3 animation for various transition & interaction
  3. Custom twitter field for comment form
  4. AJAX comment submission
  5. Custom content submission.

See It Yourself

Bitsmaker homepage
Bitsmaker homepage
Bitsmaker product detail. Single post is displayed as overlay
Bitsmaker product detail. Single post is displayed as overlay
Fullscreen search overlay
Fullscreen search overlay
Custom submission page. Try attaching an image. It is really fun.
Custom submission page. Try attaching an image. It is really fun.
About page. The team listing is powered by WooThemes Our Team plugin.
About page. The team listing is powered by WooThemes Our Team plugin.
Bitsmaker homepage on mobile device
Bitsmaker homepage on mobile device
Menu is displayed using toggle approach due to screen space limitation
Menu is displayed using toggle approach due to screen space limitation
Fullscreen search overlay is optimized as well.
Fullscreen search overlay is optimized as well.
Submission page on mobile device
Submission page on mobile device
About page on mobile screen
About page on mobile screen

See it at http://bitsmaker.com/

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

  1. Whom I really like working for due to his awesome design 

Hashboard

Hashboard is a hashtag-based Instagram photo board app. It is designed & developed by Weekend Inc. I was hired to turn its design into front-end component (HTML, CSS, & JS). Hashboard is developed using mobile first approach to ensure its accessibility across screen sizes in this mobile age.

Personally, I really like working with Weekend Inc. due to their well-polished design. It is always nice to translate amazing design into front-end components.

See it yourself

Hashboard homepage on mobile
Hashboard homepage on mobile
Hashboard photoboard list on mobile
Hashboard photo board list on mobile
Hashboard photoboard view on mobile
Hashboard photo board view on mobile
Hashboard photo board + photoboard list on mobile
Hashboard photo board + photoboard list on mobile
Hashboard homepage
Hashboard homepage on larger screen
Hashboard list on larger screen
Hashboard list on larger screen
Hashboard photo board on larger screen
Hashboard photo board on larger screen
Hashboard photo board + list on larger screen
Hashboard photo board + list on larger screen

 

See it at http://gethashboard.com

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

Parchment

Activate then write. As easy as that.

Insanely simple theme
Activate, it looks good already
With enough options to make it yours

The Origin

Parchment is planned to be my fourth theme in repository. It is designed and developed in February 2015. I planned to submit at least six themes in 2015. This is my second theme in 2015.

The Goals

Parchment is made with these goals in mind:

  1. Looks great right from the start. No quirky setup needed.
  2. Not bloating user with tons of options. It just works.
  3. Enable user to customize things that matters: background (image or plain color), text & link color, selected typographic preference
  4. Looks good in any size of screen

Plugin Compatibilities

Parchment works nicely with these plugins:

  1. Jetpack’s Infinite Scroll & Site Logo
  2. Civil Footnotes
  3. Subtitles

See it Yourself

Parchment homepage
Parchment homepage
Parchment's single post template
Parchment’s single post template
Parchment focuses in content. Everything else is placed in drawer
Parchment focuses in content. Everything else is placed in drawer
Customize Parchment's text, link, and background color
Customize Parchment’s text, link, and background color
If you know some good pattern image, you can use it on Parchment as well
If you know some good pattern image, you can use it on Parchment as well
Not digging serif font? Use the cleaner sans-serif typography
Not digging serif font? Use the cleaner sans-serif typography
Or even better, geek out using monospace typography
Or even better, geek out using monospace typography
Parchment has RTL support too
Parchment has RTL support too
Parchment looks good on mobile too. C'mon, it's 2015
Parchment looks good on mobile too. C’mon, it’s 2015

Changelog

February 22th, 2015 v1.0.0

Currently in theme review process for WordPress theme repository.

March 10th, 2015 v1.0.1

Fixing some issue happened due to Manuscript into Parchment transition.

March 15th, 2015 v1.0.2

Just realize that there’s a browser compatibility issue on safari & firefox for the body shadow. Submitting a patch + update before the theme is approved on the repository

March 27th, 2015 v1.0.3

Updating some content styling details

April 17th, 2015 v1.0.4

Improvements added:

  • Using .md instead of .txt for readme. It’ll be converted using grunt upon build creation
  • Adding styling details for calendar widget
  • Adding styling for jetpack custom widget
  • Fixing alignment issues
  • Adding no comment styling
  • Styling Jetpack’s infinite scroll button correctly when it is set to disabled
  • Adding grunt tasks for building release
  • Updating translation file

April 26th, 2015

The theme is approved & released at WordPress theme repository.

Download

Download | Github | Demo

Total Downloads

7,865

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

Materialist

WordPress Theme + Material Design

Materialist is WordPress theme which is (obviously) inspired by Material Design

The Origin

The development of Materialist was started in January 2015. Materialist is made to display chronological list of posts efficiently using Material Design.

Personally, I envision Materialist as ideal theme for a blog which contains list of things / ideas such as idea.fikrirasy.id (disclaimer: the blog is mine).

The Goals

Materialist is made with these goals in mind:

  1. Looks great in all screen
  2. Implement Material Design effectively
  3. Ideal for blog which its “list of posts” need to be scanned quickly
  4. In months to come (after several iteration), I personally wish that Materialist reaches a level where Automattic theme would love to use it on WordPress.com

Features

Besides its clean looking inspired by Material Design, Materialist comes with these features:

  1. Responsive design using mobile first approach. Materialist looks great in all device
  2. Select one “color accent” through Customizer then Materialist will generate color scheme for your site
  3. Looks great right from the start. No quirky setup needed.
  4. Widget support on drawer.

Plugin Compatibilities

Materialist works nicely with these plugins:

  1. Jetpack’s Infinite Scroll
  2. Civil Footnotes

See it Yourself

Here’s how Materialist looks like:

Materialist looks great on mobile device
Materialist looks great on mobile device
Materialist homepage. Simple and effective for displaying list of posts
Materialist homepage. Simple and effective for displaying list of posts
The rest of the stuff is located inside the drawer. Keeping things clean.
The rest of the stuff is located inside the drawer. It keeps things clean.
Materialist' single page template
Materialist’ single page template
Customizer ready - select a color and Materialist will generate its color scheme for you
Customizer ready – select a color and Materialist will generate its color scheme for you

Changelog

January 30th, 2015

Currently in theme review process for WordPress theme repository.

February 23th, 2015 – Version 1.0.1

Materialist is now available on WordPress theme. Woohoo!

Download

DownloadGithub | Demo

Total Downloads

11,968

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

Gravity Forms Popup

Gravity Forms Popup is an add-on (plugin for extending another plugin’s functionality) for Gravity Forms.

What it Does

Gravity Forms Popup enables you to select a Gravity Forms’ form and display it as blocking popup for your first time customer on page load, after several seconds1, or after your visitor reaches the bottom of your site.

How To Use

  1. Make sure that you already installed and activated Gravity Forms on your WordPress site. Gravity Forms Popup is compatible with at least  Gravity Forms version 1.8.20
  2. Upload, install, and activate Gravity Forms Popup
  3. You can configure the add-on at Dashboard > Forms > Settings > Popup

Credit

This plugin is originally made for my employer who awesomely agree to release this plugin as open source WordPress Plugins, Hijapedia. The background story of this plugin can be read here.

See it Yourself

Settings page
Settings page
Filled settings
Filled settings
Gravity Forms Popup with Clickable Initial Image
Gravity Forms Popup with Clickable Initial Image
Gravity Forms Popup's Form
Gravity Forms Popup’s Form

Download

Download Gravity Forms Popup

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

  1. This is customizable 

Cinnamon

Default-looking WordPress theme with a soul

Cinnamon is default-looking WordPress theme with a soul

The Origin

The development of Cinnamon was started in November 2014. Cinnamon strives to be “default looking” classic two columns layout theme with a soul. Keeping familiarity of blog with enough blend of character.

The Goals

Cinnamon is made with these goals in mind:

  1. Looks great in all screen
  2. Based on _s
  3. Feels familiar, looks blog-ey, but have enough twist on its own
  4. Ideal for blogger who blogs about his/her interests, and capable of displaying the blogger’s craft.
  5. in months to come (after several iteration), I personally wish that Cinnamon reaches a level where Automattic theme team would love to use it on WordPress.com

The Theme

Here’s how Cinnamon looks like:

01 - Cinnamon is developed using mobile first approach. It has responsive layout and adapts to the screen size nicely
01 – Cinnamon is developed using mobile first approach. It has responsive layout and adapts to the screen size nicely
02 - Mobile first isn't luxury. It is necessity
02 – Mobile first isn’t luxury. It is necessity
03 - Cinnamon homepage. Simple yet bold
03 – Cinnamon homepage. Simple yet bold
04 - The content is displayed beautifully. It supports Jetpack's infinite scroll module for seamless experience
04 – The content is displayed beautifully. It supports Jetpack’s infinite scroll module for seamless experience
05 - Post layout. Grand, simple, and beautiful
05 – Post layout. Grand, simple, and beautiful
06 - Cinnamon is designed with readability in mind
06 – Cinnamon is designed with readability in mind
07 - Classic multilevel top navigation that feels familiar
07 – Classic multilevel top navigation that feels familiar
08 - Cinnamon offers one column template for page
08 – Cinnamon offers one column template for page
09 - If you have Jetpack installed, you can change the color accent of your site (Jetpack has php-sass processor library). Even without Jetpack, you can change your header image anytime
09 – If you have Jetpack installed, you can change the color accent of your site (Jetpack has php-sass processor library). Even without Jetpack, you can change your header image anytime

Plugin Compatibilities

Opus is made to be compatible with these plugins:

  1. Jetpack
    Cinnamon uses Sass library which is bundled with Jetpack’s for generating custom color scheme. Select one color, and the rest is automatically handled.
  2. Jetpack’s Infinite Scroll
    Jetpack’s module for infinite scrolling functionality
  3. Jetpack’s Portfolio’s Post Type
    Jetpack’s module for displaying portfolio content
  4. Civil Footnotes
    Adding footnote in markdown like interface

Changelogs

December 27th, 2014

Currently in theme review process for WordPress Theme Repository.

January 2nd, 2015 – v1.0.2

Fixing various aspect that should be fixed based on Theme Reviewer’s suggestion

March 19th, 2015 – v1.0.3

Cinnamon is now available on WordPress theme repository.

April 20th, 2015 – v1.1.0

Quite an upgrade. Some things that are added on this version:

  • Use protocol relative URL to load Google Fonts
  • Adding Jetpack site logo support
  • Adding Subtitles support
  • Use Simple Color Adjuster for generating color scheme. Dropping
  • dependency to Jetpack’s CSS pre-processior library
  • RTL Support
  • Fixing flashing top navigation on desktop
  • Custom font now can be filtered by translation, just in case the font isn’t
  • supporting the translated language
  • More styling details

Download

Download | Github | Demo

Total Downloads

17,033

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

Opus

Focus on content. The rest is secondary.

Opus is WordPress theme which focuses on content.
The rest is secondary.

The Origin

The development of Opus was started in 2013: I was looking for a (free) theme and all available options I could find are either too complicated or have particular edge case that I couldn’t compromise. So I decided to make one on my own: a theme that focuses on content, incredible clean, and worthy to be released on WordPress Theme repository.

Hence Opus was born. Opus is my first theme on WordPress repository.

The Goals

Opus is made with these goals in mind:

  1. Opus should look great on mobile screen.
    Traffic from mobile start to surpass desktop traffic. There’s no question on this. Mobile UX deserves priority as much as desktop UX.
  2. Opus should efortlessly work out of the box
    Many themes requires you to configure stuff to make it looks like its demo. Once you install and activate Opus, it’s already looks the way it looks on the demo page.
  3. Opus should allow its user to express themselves
    Everyone is unique. Opus allows you to express your preference by choosing color accents and header image.
  4. Opus should work effortlessly
    It really annoys me when the content I published looks misplaced due to technical issue. Opus is developed to detect your content’s quirkiness and adjust it on the fly.
  5. Opus is all about GREAT reading experience.
    I’ve blogged since 2008. I’ve written a lot. I want those posts to be read effortlessly.

The Theme

Here’s how Opus looks like:

00 - Opus is developed using mobile first approach. It looks great on small screen and big screen
00 – Opus is developed using mobile first approach. It looks great on small screen and big screen
01 - Opus one column content-focused layout
01 – Opus one column content-focused layout
02 - Opus expanded menu
02 – Opus expanded menu
03 - Opus focuses on content. It even hides the top-navigation as you scroll down the page and display it when you scroll up the page
03 – Opus focuses on content. It even hides the top-navigation as you scroll down the page and display it when you scroll up the page
04 - Opus supports civil footnotes plugin out of the box
04 – Opus supports civil footnotes plugin out of the box
05 - Opus is about letting your content shines. Opus doesn't get in your way
05 – Opus is about letting your content shines. Opus doesn’t get in your way
06 - If you're not into green, you can always change Opus' color
06 – If you’re not into green, you can always change Opus’ color

Plugin Compatibilities

Opus is made to be compatible with these plugins:

  1. CF Post Format
    Post Format tab UI on editor
  2. Jetpack’s Infinite Scroll
    Jetpack’s module for infinite scrolling functionality
  3. WP-IG
    Instagram integration plugin: post your Instagram photo to WordPress
  4. Civil Footnotes
    Adding footnote in markdown like interface

Changelogs

December 14th, 2013 – Available at WordPress Theme Repository

Opus has been approved by WordPress Theme Reviewer and it is available on the WordPress Theme repository.

***

July 13th, 2014 – v1.1.0

Seven months after its inception to WordPress repository, there are some stuffs that I think need to be added, tweaked, and fixed. Hence the version 1.1:

  • Hiding top navigation when the page user scrolls down the page. Display the top navigation when the user scrolls up the page. Saving screen space for more important focus: the content. Inspired by this article
  • Adding support for Infinite Scroll feature provided by Jetpack
  • Adding support for WP-IG, the Instagram – WordPress integration plugin
  • Displaying embed code, oEmbed-supported link, or url to video stored on post meta ‘_format_video_embed’ as video on single page. Note: I recommend Crowd Favorite’s wp-post-format plugin for better UX for post format
  • Subtle improvement on design: smaller content width to make featured image on post format image more digestable, changing typography from open sans to roboto (IMO it is more sharper especially when it is used on large font-size), adding parallax effect to page image cover, adding subtle shadow to give sense of depth to the layout, inspired by Android Material Design
  • Hiding tag box if there’s no tag to be displayed
  • Fixing top nav behavior on small screen

***

August 5th, 2014 – v1.2.0

Version 1.2 is here! This version is basically a visual enhancement and more support for third party plugins:

  • Fixing search form bug on 404 template
  • Adding better looking sticky post UI
  • Prevent entry category crashes with entry time
  • Fixing strict standard issue on PHP 5.4
  • Turn of parallax effect on touch device because jQuery’s .scroll() doesn’t play nice with touch
  • WP-IG support: adding Instagram icon if the post is Imported Instagram media
  • Enhanced UI: adding date, month, and year divider
  • Enhanced UI: adjust javascript based effect if the window is resized
  • Resizing featured image to optimize page load
  • Enhanced UI: changing default page cover photo
  • Enhanced UI: fading out page cover as a complement of parallax effect
  • Civil Footnotes: Adding custom styling for civil footnotes-generated footnote.
  • Changing screenshot image to the better version
  • Jetpack support: tweaking styling for comment email subscription checkbox
  • Adding custom styling for dashboard header editing

December 31th, 2014 – v1.3.0

Improvements added:

  • Replacing custom time code with WordPress’ human_time_diff
  • Adding pot file and loading textdomain for translation
  • More stuffs for translation
  • Better civil footnotes support. It’ll still work on infinite scroll scenario now
  • Fixing editor styling
  • Using protocol relative URL for fonts
  • Adding Phillip Arthur Moore’s Subtitles plugin support

April 23th, 2015 – v1.4.0

Improvements added:

  • Adding grunt task for creating .zip build
  • Adding WordPress 4.1 title-tag support (and its fallback)
  • Adding Jetpack site-logo module support
  • Adding custom background support
  • Adding RTL support
  • Adding styling details for Jetpack custom widgets
  • Fixing top nav’s width issue
  • Custom fonts are now pluggable by translation (useful if Roboto & Montserrat has no support on targetted language)
  • Changing color scheme mechanism using Simple Color Adjuster class

Download

Download | GitHub | Demo

Total Downloads

18,004

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

WordPress Meetup Bandung (December 2014) – How I Met WordPress


This is is my talk on the first WordPress Meetup Bandung at December 18th, 2014. The theme of the meetup was “WordPress Experience” so I shared my experience with WordPress: how I “met” WordPress, toying with it, got a job from it, and all the way until submitting themes & plugins to WordPress repository.  

Documentation

I don’t have any documentation but luckily some cool attendees tweeted the picture of the event. Thank you guys!

 

 

 

 

 

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

WooCommerce Sale Overview

WooCommerce Sale Overview is WordPress plugin / WooCommerce add-on which enables you to see all sale product on your WooCommerce-powered store.

Possible Use Cases

  1. See all currently in sale products
  2. See all scheduled sale products

It’s kinda weird that we can’t do both things by default, so I made one for the those use cases.

See it Yourself

View all currently sale products
View all currently sale products
View all scheduled products
View all scheduled products
Just in case the updated sale product isn't appear on the currently on sale or scheduled for sale tab, try opening this tab to clear the cache. Most of the time you're not gonna need this tho
Just in case the updated sale product isn’t appear on the currently on sale or scheduled for sale tab, try opening this tab to clear the cache. Most of the time you’re not gonna need this tho

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.