Custom Color Palette in WordPress Color Picker

27 Oct 2014 5,493 views

WordPress uses color picker for some pages in admin (for example in Custom Background, Custom Header, and Theme Customizer) with this color palette at the bottom:
color-palette-original

You can change the default color palette with your own custom palette globally. Add the following code to your theme’s functions.php:

function custom_scripts() {
	wp_enqueue_script('custom_scripts', get_template_directory_uri() . '/js/custom.js');
}
add_action('admin_enqueue_scripts', 'custom_scripts');

Create a new file (custom.js) in yourtheme/js/ directory and add this code:

jQuery(function($) {
	if (typeof $.wp !== 'undefined' && typeof $.wp.wpColorPicker !== 'undefined') {
		$.wp.wpColorPicker.prototype.options = {
			// add your custom colors here
			palettes: [
				'#556270',
				'#4ecdc4',
				'#c7f464',
				'#ff6b6b',
				'#c44d58',
				'#ecca2e',
				'#bada55'
			]
		};
	}
});

Go to your Appearance » Customize, or Appearance » Background, you should now see the modified color palette:
color-palette-custom

3 Comments

  1. :3.. mudeng om tutorialnya.. gak bisa bahasa inggris :D

  2. bocahcilik says:

    oawalh tot koe ga mumet to,,,

  3. Simon says:

    I tried this in my child theme (based on SiteOrigin Vantage) and it changed nothing. Does this have to be implemented in the main theme?

Leave a Reply

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

CAPTCHA