Allground - Responsive Fullscreen Backgrounds for WordPress with images, YouTube videos, Google Maps and self hosted videos

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

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.


“How to add a color picker to your WordPress plugin or theme” received 25 comments! Add yours.

  1. Shawn May 11th, 2011

    Any idea how to create multiple instances on the same page?

  2. Elio May 11th, 2011

    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.

  3. wpmag.com - WordPress News, Themes, Tutorials, Plugins, Questions, ... May 12th, 2011

    How to add a color picker to your WordPress plugin or theme | WordPress | ilovecolors…

    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…

  4. Sara May 12th, 2011

    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.

  5. J. Hendrix May 13th, 2011

    Did not know this was possible. Thanks!

  6. Brent Shepherd May 16th, 2011

    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. Elio May 16th, 2011

    Brent, your code is perfect and works great, thanks for sharing!

  8. Leo May 30th, 2011

    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.

  9. Tom Saunter July 7th, 2011

    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!

  10. snowboardmommy October 8th, 2011

    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?

  11. Elio October 14th, 2011

    This is the line that initializes the Farbtastic color picker and you definitely must pass the ID to it

    jQuery('#ilctabscolorpicker').farbtastic("#color");

    so yeah, you can use it and create multiple instances in one page.

  12. snowboardmommy October 17th, 2011

    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.

  13. Smrth October 31st, 2011

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

  14. Smrth October 31st, 2011

    got it.. input field must not be empty….

  15. Britt November 3rd, 2011

    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.

  16. Karell December 15th, 2011

    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.

  17. Ben December 23rd, 2011

    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.

  18. Sunny Johal January 3rd, 2012

    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.

  19. Rob February 2nd, 2012

    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”>

  20. Rob February 2nd, 2012

    Choose color}
    <div id="ilctabscolorpicker”>

  21. wordpress « Mehrere Colorpicker in den Theme Einstellungen verwenden « Tuxlog February 15th, 2012

    [...] mehrere Colorpicker einzubauen für die Farben der Navigationsleiste etc. und bin auf den Artikel How to add a color picker to your wordpress plugin or theme gestoßen. Von da aus ist es ziemlich einfach mehrere Colorpicker einzubauen. Jedoch sollte man die [...]

  22. Rafael March 26th, 2012

    Great tutorial. Thank you so much!

  23. rudolf April 1st, 2012

    olé! another excellent snippet, thx a bunch

  24. WordPress Plugin Development Resources : WPMayor September 25th, 2012

    [...] http://www.ilovecolors.com.ar/how-to-add-a-color-picker-to-your-wordpress-plugin-or-theme/ [...]

  25. frank March 11th, 2013

    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 comment