Upgrading to the New WordPress Color Picker

    Jonathan Goldford
    Jonathan Goldford
    Share

    If you’re like me and you’ve been using the old Farbtastic color picker for a WordPress plugin, I’m sure you were eager to use the new and improved color picker with the release of WordPress 3.5. Upgrading your plugin to use the new color picker is fairly straightforward. What’s difficult is knowing how to easily fall back to the Farbtastic color picker for older versions of WordPress. In the following screencast and article we’ll talk through how to do exactly that and provide a full plugin example on Github to help get you started.

    The Screencast

    The Steps to Implement the WP Color Picker

    Before getting to the nitty gritty PHP and JavaScript, let’s take a look at the steps to implement the new color picker.
    1. Determine the version of WordPress installed on the server.
    2. Enqueue both the styles and script for the new color picker if the install of WordPress is version 3.5 or higher.
    3. If the WordPress version is less than 3.5, enqueue the styles and scripts for the deprecated Farbtastic color picker.
    4. In your custom JavaScript file, check to see if the new color picker function exists and, if so, initialize the color picker on your text input field.
    5. If the new color picker doesn’t exist, then initialize the Farbtastic color picker.
    Pretty easy right? Now let’s take a look at the PHP we use within our plugin.

    Use PHP to Enqueue the Right Styles and Scripts

    If you’re just starting to create plugins for WordPress, you’ll need a solid understanding of how to create settings pages and how to appropriately call your styles and scripts within those pages. Going through how to create a settings page for your plugin isn’t in the scope of this article, but if you need more info on how to handle settings for your plugin, check out Creating Custom Options Pages in WordPress by Jeffrey Way. For our purposes, you’ll need to know that the final input field and necessary div on our admin page look like this:
    <input id="color" name="color_options[color]" type="text" value="" />
    <div id="colorpicker"></div>
    view raw gistfile1.html Once you hook your function or method appropriately through add_action()
    , you’ll use PHP to call your styles and scripts:
    < ?php
    function add_styles_scripts(){
        //Access the global $wp_version variable to see which version of WordPress is installed.
        global $wp_version;
     
        //If the WordPress version is greater than or equal to 3.5, then load the new WordPress color picker.
    
        if ( 3.5 <= $wp_version ){ //Both the necessary css and javascript have been registered already by WordPress, so all we have to do is load them with their handle. wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'wp-color-picker' ); } //If the WordPress version is less than 3.5 load the older farbtasic color picker. else { //As with wp-color-picker the necessary css and javascript have been registered already by WordPress, so all we have to do is load them with their handle. wp_enqueue_style( 'farbtastic' ); wp_enqueue_script( 'farbtastic' ); } //Load our custom javascript file wp_enqueue_script( 'wp-color-picker-settings', plugin_dir_url( __FILE__ ) . 'js/settings.js' ); } ?>
    view raw gistfile1.php At the top of the method we use the global $wp_version variable which provides us with the version number for this install of WordPress. We simply check whether we’re using 3.5 or higher and if so, load the new color picker using the preregistered styles and script. Otherwise, we load the older Farbtastic styles and script. At this point we’ve loaded the correct files, but we need to call the script on our text input field. We do that through our own JavaScript file.

    Use JavaScript to Initialize a Color Picker

    You can see at the bottom of the add_styles_scripts() method above that we load one JavaScript file. In the short term, the easier way would be to have two Javascript files, one for the new color picker and one for Farbtastic. With this plugin that would be fine, but it would become very inefficient to manage if we had to update two files every time we needed to make a change to our JavaScript. So, how do we set up only one JavaScript file to initialize the right color picker?
    //Set up the color pickers to work with our text input field
    
    jQuery( document ).ready(function(){
    
        "use strict";
     
        //This if statement checks if the color picker widget exists within jQuery UI
    
        //If it does exist then we initialize the WordPress color picker on our text input field
    
        if( typeof jQuery.wp === 'object' && typeof jQuery.wp.wpColorPicker === 'function' ){
    
            jQuery( '#color' ).wpColorPicker();
    
        }
    
        else {
    
            //We use farbtastic if the WordPress color picker widget doesn't exist
    
            jQuery( '#colorpicker' ).farbtastic( '#color' );
    
        }
    
    });
    view raw gistfile1.js The if statement checks whether the new color picker exists as a widget within jQuery UI by first determining whether jQuery.wp is an object, and if so, ensuring that wpColorPicker is a function of that object. If both of these conditions are true we call the new color picker. If not, we load Farbtastic. And that’s it. We used the new WP color picker while still providing older versions of WordPress with a usable fallback. If you’re looking for the entire plugin example you can find it on Github.

    Frequently Asked Questions about Upgrading to the New WordPress Color Picker

    What are the benefits of upgrading to the new WordPress color picker?

    The new WordPress color picker offers a more user-friendly interface with a wider range of colors to choose from. It also provides a more consistent look and feel across your website, as it matches the WordPress admin color scheme. Additionally, it supports transparency, which allows you to create more visually appealing designs. The new color picker also has a more intuitive design, making it easier for beginners to use.

    How do I install the new WordPress color picker?

    To install the new WordPress color picker, you need to update your WordPress version to the latest one. The new color picker is included in the latest WordPress updates. After updating, you can find the color picker in the WordPress customizer under the ‘Colors’ section.

    Can I use the new WordPress color picker with my existing WordPress theme?

    Yes, the new WordPress color picker is compatible with all WordPress themes. However, the way it is implemented may vary depending on the theme. Some themes may require additional steps to fully integrate the new color picker.

    How do I use the transparency feature in the new WordPress color picker?

    The transparency feature in the new WordPress color picker allows you to adjust the opacity of a color. To use this feature, select a color from the color picker, then use the slider below the color palette to adjust the transparency level. The color preview will update in real-time as you adjust the transparency.

    Can I add custom colors to the new WordPress color picker?

    Yes, you can add custom colors to the new WordPress color picker. To do this, click on the ‘Custom’ button in the color picker, then enter the HEX, RGB, or HSL values of your custom color. Your custom color will then be added to the color palette.

    How do I revert back to the old WordPress color picker if I don’t like the new one?

    If you prefer the old WordPress color picker, you can revert back to it by installing a plugin that restores the old color picker. However, keep in mind that the old color picker may not be compatible with the latest WordPress updates.

    Is the new WordPress color picker mobile-friendly?

    Yes, the new WordPress color picker is designed to be mobile-friendly. It has a responsive design that adapts to different screen sizes, making it easy to use on both desktop and mobile devices.

    Can I use the new WordPress color picker in my custom WordPress plugin?

    Yes, you can use the new WordPress color picker in your custom WordPress plugin. You can do this by enqueuing the ‘wp-color-picker’ script and style in your plugin’s code.

    How do I troubleshoot issues with the new WordPress color picker?

    If you’re experiencing issues with the new WordPress color picker, try clearing your browser cache and disabling any conflicting plugins. If the issue persists, contact WordPress support for further assistance.

    Can I use the new WordPress color picker with Gutenberg blocks?

    Yes, the new WordPress color picker is fully compatible with Gutenberg blocks. You can use it to customize the colors of your blocks in the Gutenberg editor.