How to add a color picker to your WordPress plugin or theme

Posted on by Elio Rivero

One of the most useful options for a user of a WordPress theme or plugin is to be able to change and stylize the appearance and the colors of the output produced. In this tutorial we will learn how to add a color picker in the settings page of a plugin using the Farbtastic jQuery plugin bundled with WordPress.

Farbtastic, WordPress’ color picker.

Although the only reference to Farbtastic is in the WordPress Codex page for wp_enqueue_script, Farbtastic is used internally in WordPress to modify the background color. If you want to know more, you’ll have to head to Farbtastic home, where you will find a demo and enough documentation to get started.

We won’t be dealing with how to create an options page because that’s out of the scope of this tutorial. If you need one, check this settings tutorial by Otto, one of the Core Contributors to WordPress.

Adding the metabox for the color picker

This is what we need in our metabox. The two most important things are the color input field, which will store the color value in hexadecimal format, and the div named ilctabscolorpicker. This is where Farbtastic will create the color picker and setup the color wheel.

<tr valign="top">
<th scope="row">
<h3>Colors</h3>
<small>Click on each field to display the color picker. Click again to close it.</small>
</th>
<td>
<label for="color"><input type="text" id="color" name="color" value="<?php echo $value['color']; ?>" /> Pick link color</label>
<div id="ilctabscolorpicker"></div>
</td>
</tr>

Feel free to replace the

 echo $value['color'];

with your own method to retrieve the current value stored in the variable. Don’t forget to include the Farbtastic script and stylesheet in your theme if it’s not already loaded.

add_action('init', 'ilc_farbtastic_script');
function ilc_farbtastic_script() {
wp_enqueue_style( 'farbtastic' );
wp_enqueue_script( 'farbtastic' );
}

Creating the color picker

Now we only need to add some jQuery to do the magic. You can either add this below the previous code for the metabox or use a WordPress hook to include it in the footer of the admin.

<script type="text/javascript">

jQuery(document).ready(function() {
jQuery('#ilctabscolorpicker').hide();
jQuery('#ilctabscolorpicker').farbtastic("#color");
jQuery("#color").click(function(){jQuery('#ilctabscolorpicker').slideToggle()});
});

</script>

These sentences will actually create the color picker in the div. The first line will hide the color picker initialized in the second line. The third and final line adds an event listener to the color input field. Whenever it is clicked, the color picker will slide down. After you have selected your color, click on the input field again to hide the color wheel.

Advanced Farbtastic

Farbtastic also has an object mode that allows you to use some more advanced methods like a callback, an HSL color space and more. It’s a great solution to add a color picker  that is already baked into WordPress, making it very lightweight and most important, fully compatible.http://www.wpargentina.com/gana-una-licencia-de-shortcodes-pro/

Published by Elio Rivero

Software engineer, designer and photographer.

25 thoughts on “How to add a color picker to your WordPress plugin or theme”

  2. Shawn, you could just add a numeric suffix to the id and name of the input field and to the div’s id.
    Then,in your jQuery code, instead of duplicating everything for the new ids, you could add a for() loop.

  4. Thanks for the tutorial, I was looking for a way to customize title colors from post to post and this might be useful with some tweakings here and there.

  6. Thanks for a great tutorial!

    I used slightly different jQuery code to show the farbatastic picker when the input is clicked, and then hide it whenever it is no longer in focus.

    Not sure if it’ll make it thought the comment, but mine looks like so:

      jQuery(document).ready(function() {     jQuery('#ilctabscolorpicker').hide();     jQuery('#ilctabscolorpicker').farbtastic("#color");     jQuery("#color").click(function(){jQuery('#ilctabscolorpicker').slideDown()});     jQuery("#color").blur(function(){jQuery('#ilctabscolorpicker').slideUp()});   });

  7. Thanks for this tutorial!

    For me (in WP > 3.1) the widget admin area breaks when using this script in the admin footer och admin head, so I have to add it directly below the color picker. Haven’t been able to find out why, unfortunately.

  8. I have the same problem as Leo I’m afraid. Would love to roll this into one of my WordPress plugins so it’ll need to work for thousands of other users too!

  9. Thank you!!! This is the simplest, most clearly explained implementation for farbtastic in WordPress I’ve found. I’m a bit of a JavaScript dinosaur (ok, i can fake my way around jQuery) … I was wondering if you could pass the ID name to the function in order to use the script on multiple fields on one page?

    1. This is the line that initializes the Farbtastic color picker and you definitely must pass the ID to it
      [js]jQuery(‘#ilctabscolorpicker’).farbtastic("#color");[/js]
      so yeah, you can use it and create multiple instances in one page.

  10. Hi Elio,

    I get that that is the line that defines which field and which color, but it still looks hard coded to me for one particular field and one particular color. It still looks like there has to be an individual function for each field where you want to have a color picker. I guess I need to look up more jQuery for getting it to recognize which field is active and displaying a color picker for that field.

  11. this is really great but, hexdecimal value of color is not inserted in input, only the input change background color itself…

  13. I need something like this for my members only section in my website.

    Members will choose from many coupon themes to post. Once they choose the

    coupon theme, then they need to choose a color scheme from either their

    own photo or a color wheel. Then this coupon needs to be posted and/or

    sent in a contact form.

  14. Excellent tip ! Works perfectly but as other mentionned the input field must not be empty if you want to see hexadecimal text inside.

    For that just add a condition if(){}else{} in the value attribute.

  15. I’ve got this working for multiple colors (as explained in the comments), but the color picker only works if some value has been saved in the field first. So the picker won’t insert a color unless I manually type something in, save, and then attempt to use the picker. I can email my code, if that would help explain better. I’m just stumped.

  16. Hi Ben,
    All you need to do is give the field an initial default value (even a space character would do it then the user won’t even notice the difference). As long as it has that it will work for you.

  17. i have a plugin im creating and need to select a color for each option.

    i wrote a loop to display all the options and each time it iterates through the loop i increment the ids/names/etc..ALso i must mestion i need to save each setting as an array…. please help…here is what i got so far..

    for(…){

    jQuery(document).ready(function() {
    jQuery(‘#ilctabscolorpicker’).hide();
    jQuery(‘#ilctabscolorpicker’).farbtastic(“#color”);
    jQuery(“#color”).click(function(){jQuery(‘#ilctabscolorpicker’).slideToggle()});
    });

    Choose color}
    <div id="ilctabscolorpicker”>

  23. I have the same problem: The hexdecimal value is not inserted in input. And I dont´t know making the input field not empty. Can somebody give me a code-snippet?

Leave a Reply