Hardeep Asrani

WordPress Developer, Kanpur

Syntax Highlighter Control For WordPress Customizer

This is the second control of O2 – WordPress Customizer library. In case you’re wondering about the first control, you can check this blog post. Spoiler alert: it was a Font Awesome icon picker, which also supports Genericons and Dashicons.

Second control is a syntax highlighter It allows you to add a syntax highlighter to your WordPress Customizer, which supports all famous languages, such as JavaScript, CSS & HTML. This control uses CodeMirror, so do check that out if you ever need a syntax highlighter.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme, and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/code/code-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include code-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_code', array(
    'capability' => 'edit_theme_options'

$wp_customize->add_control(new O2_Customizer_Code_Control($wp_customize, 'o2_code', array(
    'label' => __('CSS', 'textdomain'),
    'description' => __('Your custom CSS.', 'textdomain'),
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_code',
    'choices' => array(
        'language' => 'css',
        'theme' => 'icecoder',

That will do the work. You can put any language you want, if supported by CodeMirror, in the language option. And here are all the themes you can choose from.

Feel free to leave a comment if you have any questions or suggestions.

Transparency Report For The Month Of May 2016

One of the reasons behind publishing a transparency report every month is to share all my experiences with the readers. So, to begin with, I tried a shot at marketing by doing some experiments. And in the last report, I mentioned that I wasn’t good at it. So this report, will tell you how these new experiments have turned out to be.

Apart from that, I also wanted to share how I’m handling product support, and to introduce you to the latest addition to my theme collect.

Product Support

Selling a product is just half the battle, the other half is to turn the customers into satisfied users where product support plays a very important role.
I’ve been providing support for free to users via WordPress forum, and paid users via email and since the number of requests is not very high, the average response time is less than 12 hours, and in most cases, from 5 minutes to an hour. I’m also thinking of moving the support requests to a help desk software, like HelpScout, if the numbers grow. So far, the response from the users has been great which is evident in the great ratings and testimonials for the theme.

Coming to minute details, right now, I’ve included documentation inside the theme’s zip file so a lot of users don’t realize that there is a documentation altogether with the theme, which needs to be easy to find.

Introducing Photos

Photos Responsive

Photos is the newest addition to my theme collection, with over 7,000 downloads in its debut month. It’s available for free at WordPress.org, with no up-sell at this moment.

I’d love to turn this theme into a theme for photographers and stock-image sites.

Month of May

Last month, I raised Latte’s price to $29 from $25, as the theme is already under-priced. I was expecting the sales to drop because of the raise, but the final revenue ended up being good.

In the month of May, Latte Pro generated 24 sales with $684 in revenue, which looks less than last month’s 31 sales with $720 in revenue but isn’t. As I noted in last report, those numbers were April + last few days of March, so the theme actually did better than the last month. Apart from Latte, other footer extensions generated 6 sales for $30.

I also experimented in marketing by putting two banner ads on DesignWoop and BestWPTheme just to see if banner ads are of any profit. And the answer is NO, at least for me.

One of the hardest part, as I’ve learned, is hiring people. Last month I hired a designer from Upworks to start work on my next theme. I was really happy with his designing skills, and I hope it will turn out to be a great. And instead of expense, I’d call it an investment.

Helping Hands

Let me take some time to thank people who have been really helpful:

  • Deeksha Raj for helping with writing, proofreading, shopping & a billion other things. If you find any mistake in this report, she’s the one to blame.
  • Ionut Neagu for helping with a lot of things. Also for the idea of a transparency report.
  • Marius Ghitulescu for helping with marketing.
  • Suyogya Shukla for helping with designing and rejecting most of my bad ideas.
  • Laika for nothing. She’s too cute to ignore, just look at her.

That’s pretty much it. And fortunately, I’ve some great details to share for the next report. If it all goes right, I’ll be sharing some great tips for promoting on WordPress themes. See you next month!

Font Awesome Icon Picker For WordPress Customizer

WordPress’ Customizer is one of my favorite parts of WordPress. You will usually see me products taking full advantage of Customizer. Right now I’m working on a library for Customizer, which will consist of some custom WordPress controls written by me.

The very first is a Font Awesome picker customizer control. Font Awesome fonts are used by a lot of themes and they are really amazing. Sadly, I couldn’t find any icon picker for Font Awesome.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme, and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/icon-picker/icon-picker-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include icon-picker-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_fa_icon_picker', array(
    'default' => 'fa-facebook',
    'capability' => 'edit_theme_options'

$wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array(
    'label' => __('Icons', 'textdomain'),
    'description' => __('Choose an icon', 'textdomain'),
    'iconset' => 'fa',
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_fa_icon_picker'

It will a list of all the icons. If only want to list few icons then you can do it like this:

$wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array(
    'label' => __('Icons', 'textdomain'),
    'description' => __('Choose an icon', 'textdomain'),
    'iconset' => 'fa',
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_fa_icon_picker',
    'choices' => array(
        'fa-facebook' => __('Facebook', 'textdomain'),
        'fa-twitter' => __('Twitter', 'textdomain'),
        'fa-dribbble' => __('Dribbble', 'textdomain'),
        'fa-wordpress' => __('WordPress', 'textdomain'),
        'fa-github' => __('Github', 'textdomain'),

That will do. If you face any issues then comment below, or feel free to send a pull request.

It’s just the first control, so you can expect few more posts like this in near future.

Update: Icon picker now also supports Genericons and Dashicons, so you can now change the value of iconset to use these two as well.

Also, if you’re using it then please leave a comment telling me your thoughts and the new controls you’d like to see.

Love this control?

If you love this control of O2 library then consider donating from here to support this product.

Transparency Report For The Month Of April 2016

Intros are hard. Last month my first commercial theme made its intro to WordPress marketplace and I want to share my experience with all of my readers in the form of an informal report. It will contain what I learned, things I tried, my sales and a lot more.

Little bit about me

I’ve been an active member of WordPress community and making my living using WordPress for more than a couple of years. I’ve been writing free themes and plugins for sometime as well. Recently, I decided to develop a commercial WordPress theme. It took few months to design and develop, plus a lot of work. Then I submitted the theme to WordPress.org, where it took 4 months, and Latte was finally made live in late March.

Apart from Latte theme, I also have two more commercial products. I’ve a $5 footer credits extension for DocPress & Kichu themes. Let’s get to the numbers now.

Month of April

Honestly, I wasn’t expecting to sell a single copy of Latte for at least first couple of months, but I was surprised by how quickly I sold many copies with little to no promotion at all.

Before I lay down the numbers, here are some things you should know:

  • Latte went live in the late March, so I’m adding those numbers to this report as well. It also makes a lot of sense, you will see, in a moment.
  • Numbers will look little inconsistent.

In the beginning I was using Fiverr to sell the theme, which was taking 20% commission and took 14 days for withdrawal. And yes, all the sales I made in March using Fiverr, was deposited to my account in April. The first point makes more sense now, doesn’t it?

So let’s start with the numbers:

In the month of April, Latte Pro generated 31 sales with $720 in revenue. As of now, Latte’s free version has over 15,000 downloads, with 1000+ active users.

Latte Responsive

Latte Pro is available for just $29, which is really really low compared to similar pro themes. If you love stats then we can say it generated a sale every 500 downloads or 33 active users. Latte was picked up by WPTavern.com just after few days of its release and received a great review from them.

Latte offers a welcome alternative to clunky, confusing page builders or drag-and-drop editors. With everything in the customizer, the user doesn’t have to hunt around for how to edit its many sections. If you want a simple one-page theme to showcase your profile and services, you’d be hard pressed to find one more customizable than Latte.

Apart from WPTavern, it was later featured in a lot of blog posts, and some of them are listed here:

Apart from Latte, footer extension plugins for DocPress and Kichu generated 10 sales for $43.

“What about all the expenses?” – you must be wondering. In this month, I spent $28 on my products. Apart from the money, the time I spent on designing, developing & polishing the theme was stretched out between few months so it will be really hard to calculate, but it wasn’t short.

The only paid promotion the theme had this month was being featured on Built With Bootstrap, which generated over 400+ views.

What about the future?

It’s going to be great! New Star Wars movie is coming in December, I’m SO EXCITED!!! Wait, isn’t Star Wars a story from a long time ago in a galaxy far, far away?

Let’s talk about near-future. I need a website. An online store where I can put all my products. And it’s something that I’m working on but I’ve no idea how much time it will take. Hopefully, we will also have some images to report, instead of just numbers, by then.

If you have any suggestions then feel free to write it in the comment section below. This report was inspired by CodeInWP and PippinsPlugins. Thank you for reading this. See you next time!

An Array Of Font Awesome Icons In PHP

I’m a huge fan of Font Awesome and I use it in all of my projects. So recently I was building something where I needed an array of Font Awesome icons. I made some searches and found an array, but it was pretty outdated, so I tried to use some regex to generate an array of Font Awesome icons in PHP and it made it really easy.

So in case anyone wants an array of Font Awesome, you can run the following regex:

$pattern = '/\.(fa-(?:\w+(?:-)?)+):before\s+{\s*content:\s*"\\\\(.+)";\s+}/';
$subject =  file_get_contents('font-awesome/css/font-awesome.css');
preg_match_all($pattern, $subject, $matches, PREG_SET_ORDER);

And if you put the following code after it, you can print that array in a more organized way:

foreach($matches as $match) {
    $icons[$match[1]] = $match[2];


echo '<pre>';
echo '</pre>';

It will generate an array list which will look like this:

    [fa-500px] => f26e
    [fa-adjust] => f042
    [fa-adn] => f170
    [fa-align-center] => f037
    [fa-align-justify] => f039
    [fa-align-left] => f036
    [fa-align-right] => f038

Hope it will help you all! 🙂

Selling Latte On Fiverr, And Why It Was A Bad Idea

For years, I’ve worked as a freelancer but recently I’ve started working on starting my own business. In last year or two, I’ve created several themes for WordPress.org and clients, but never actually thought of selling WordPress themes, but that changed this year.

Latte is a free theme available at WordPress.org, which also has a paid Pro version available. Creating this theme wasn’t an easy task and it took a lot of time, given I’ve a busy schedule.  It took me few weeks to design the theme and completing the HTML version, but then I took a long break and didn’t finish the WordPress conversion in months. I finished it in late 2015, wrote some documentation and thought the hard task was done.


After the theme was done and ready to ship, I uploaded Latte at WordPress.org for the review and thought of making an online store for Latte Pro. With a permanent job and contributing back to WordPress, I had little to no time to work and setup an online store. It wasn’t just “install WooCommerce/EDD and it’s good to go.” No, if I’m doing this then I’m going to design and develop it from the scratch. In short, I needed to find a way to sell the theme until I could get enough time to finish the store.

Long story short, I thought of using Fiverr to sell Latte Pro. If you ever did the same thing then you know how HARD and TERRIBLE that is. Let me tell you why:

  • You have to deliver the product to your customers manually, which takes time and people don’t like to wait after paying.
  • It takes 14 days before you actually get paid.
  • Fiverr takes 20% of your income. 20%!!

I sold few copies of the theme in last couple of weeks and started to get more and more frustrated with Fiverr. Don’t get me wrong, Fiverr has been nothing but help for me. It’s an awesome website, but it’s not a place to sell your stuff.

After some Google search, I found a website which allows you to sell your stuff online easily and quickly. I didn’t want to make a store, I just wanted a payment gateway which delivered the product to the buyers instantly. Sellfy.com was just what I was looking for.

You just need to sign up and upload your products. It is that easy. I wanted to try the free version first before buying the professional pack, but due to some PayPal limitations in India with Sellfy, I had to pick the professional pack. And well, it is worth the price. Now, here are some reasons why I really love this service:

  • You just have to set things up and everything else is automated. Customers get the product as soon as they pay and you don’t have to do anything.
  • It pays you within minutes.
  • It charges only 2% per transaction + PayPal/Stripe fee, which is way less than 20%.
  • It also generates invoice for the customers and charges taxes in EU, which is what you have to do if you want to sell legally in Europe.

So yes, Sellfy is the reason why I had a good night’s sleep without worrying about people not getting what they paid for in time.

Just to clarify, I’m not affiliated with Sellfy.com in any way or manner. However, if you work at Sellfy and want to send me a big fat check of a million billion dollars then feel free to do so.

I’m beginning to figure out that doing everything alone is a hard task. I’m my entire company and it’s not as easy as I thought it would be.

Hope I will get better at managing a business and will have a team as it gets bigger. So – are you running an online store? If so then any advice will be really helpful.

“Neighbors bring food with death and flowers with sickness and little things in between. Boo was our neighbor. He gave us two soap dolls, a broken watch and chain, a pair of good-luck pennies, and our lives. But neighbors give in return. We never put back into the tree what we took out of it: we had given him nothing, and it made me sad.”

– Harper Lee (April 28, 1926 – February 19, 2016)

Using postMessage Transport Method For Header Image

So right now I’m making some major changes in all my themes and was stuck at header images. First I tried to use the following code to set the transport to postMessage but it didn’t work:

$wp_customize->get_setting( 'header_image' )->transport = 'postMessage';

It was still refreshing the page in the Customizer. I tried to search for a solution but it looks like no one ever posted a solution (not on the first page at least), so I tried to resolve it myself.

So I tried to look in the header image control’s file in the core, which is /wp-includes/customize/class-wp-customize-header-image-control.php

And then I tried few things to see what works out and here’s what worked out for me. In the customizer.php file of my theme, I used the following code:

function theme_customize_register($wp_customize) {
    $wp_customize->get_setting( 'header_image'  )->transport = 'postMessage';
    $wp_customize->get_setting( 'header_image_data'  )->transport = 'postMessage';
add_action('customize_register', 'theme_customize_register');

And in the JS file, I used this:

( function( $ ) {

    // Style > Background > Background Image
    wp.customize( 'header_image', function( value ) {
        value.bind( function( newval ) {
            $('.site-header').css( 'background-image', 'url(' +newval+')' );
        } );
    } );
} )( jQuery );

And it worked for me. I don’t know if it’s the best way to do this or not but it worked for me. Hope it helps you. 🙂