Hardeep Asrani

WordPress Developer, Kanpur

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:

<?php
$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];
}

ksort($icons);  

echo '<pre>';
print_r($icons);
echo '</pre>';

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

Array
(
    [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.

Guess what? IT WAS JUST THE BEGINNING!

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. 🙂

Star Wars!!! And Some Other Stuff

Star Wars: The Force Awakens (oh boi!) is just few days away from hitting the theaters!!! Unfortunately for me, it will hit theaters here in India on 25th December, so basically I will have to avoid all the spoilers for an entire week!!

My pal created a plugin, similar to Holly Dolly, called The Force. It displays random Star Wars quotes so download it if you’re a fan. It’sA pretty cool.

Now let’s talk about what I’m up to now. Right now I’m trying to improve my programming skills and working on theme development. In last month, I released Latte (free/Pro) and redesigned DocPress theme.

And let me put this honestly, Latte theme is theme worth every penny, but with bad promotion from me. The theme is great, with bad bad bad marketing. So right now I’m giving more time to building more things and hoping to start a theme store in 2016, and I’ll focus on marketing after that.

I do everything, from designing to writing documentation, so if you’re interested in being a part of this then feel free to contact me. It’s pretty hard to manage at this point. I work for ThemeIsle, create my own themes, study, manage my new apartment and also do a little bit of blogging.

TheBlogCode.com is really slow because I don’t get much time to blog, while TricksPanda.com is pretty much dead, so if you wanna buy TricksPanda then it’s up for sale! TheBlogCode.com is a project which I’m doing just to fulfill my passion for writing, regardless of views.

So yes, my schedule is pretty much packed! Anyway, if you have any suggestions for me then feel free to contact me, or if you just wanna talk about Star Wars. Let’s wrap this blog post too! May the force be with you all! 🙂

Everything Has Changed

If you look around you’ll find out that my website’s theme is completely different from what it was few hours ago. And if you dig deep, you’ll find out that this design isn’t complete. For example, there’s no comments section as I speak. So let me tell you what happened.

I was using Chun by Justin Tadlock, along side his portfolio plugin. When I logged in to my site earlier tonight I found a new update for the portfolio plugin. And that was a real mistake. As it got updated, I found out that it wasn’t compatible with Chun’s design and it ruined my entire portfolio. I tried different solution and nothing worked so I had to change the theme.

The new theme is called Latte, designed by me. I was designing it for my site it wasn’t ready to use. But I had no other options so I had to activate it. I’ll try to finish this theme as soon as possible.

Man, last few hours were terrible due to all this. Anyways, enjoy the new design. It looks great on iPad. 🙂