Change WordPress Color Picker Options

WordPress

I can’t tell you how many times I see sites that use WordPress default color picker options when a majority of the time none of those colors are part of the site’s style guide. Instead, they opt to manually style elements via CSS or even worse, inline.

Learn how to build better themes by changing the default color picker options used by all instances of Iris Color Picker to match your site’s theme.

In your theme’s functions.php file:

function yourtheme_color_palette() {
  ?>
  <script>
    jQuery(document).ready(function( $ ) {
      $.wp.wpColorPicker.prototype.options = {
        palettes: ['#ffffff', '#000000','#dd3333', '#dd9933','#eeee22', '#81d742', '#ff0000']
      };
    });
  </script>
  <?php
}
add_action('admin_footer', 'yourtheme_color_palette');
add_action('customize_controls_print_footer_scripts', 'yourtheme_color_palette');

For more information of how to customize the color picker, see https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/.

Not a developer? Try Maeve Lander’s Iris Color Picker Enhancer plugin to customize the default color palette.

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

Your email address will not be published. Required fields are marked *