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.

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

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

I’m Attending WordCamp Pune!

I’ll be attending next month’s WordCamp Pune, which will be held on 6th of the September. This is going to be my first WordCamp, and as you can judge by the exclamation mark in the title, I’m really excited for this event. So if you’re going to attend the event too and want to meet me, then feel free to leave me an email. I will also attend the after party, so I’ll be there the entire day with the WordPress community members.

Dear Justin Tadlock

Dear Justin Tadlock,

I use Chun theme, which was designed by you, on this very blog. I would like to tell you how angry I’m with this theme. I’ve been using this theme for over 8 months now on this blog, and let me tell you that it’s a piece of art.

I’m also a theme developer, and there has been more than few times when I spent hours and hours working on a new design for my personal site, and after completing it saying, “It’s good but Chun is still better.”

The only reason that I’m not using my own design for my site is only that I just can’t activate any other theme. They just suck in front of Chun, even Twenty Thirteen. I love using post formats, and Chun is just perfect for someone like me. I’ve bookmarked Chun’s repository for every time I need to check how a quality theme like Chun uses something. And your Hybrid extensions, such as pagination, breadcrumb-trail and post format tools, are more like a toolkit for me. So please – stop ruining my precious hour by creating amazing quality themes like Chun, because I just can’t stop praising it. It should be the #1 theme in WordPress.org repository.

Regards,
Hardeep Asrani

PS: I love you. Keep the amazing work up. Learned a lot from it. 🙂