Since version 3.5 WordPress has a new color picker, the HiDPI-ready, CSS gradient-based color picker called Iris.

Recently when I was developing custom sites for some clients I needed to use their corporate identity colors and I got tired of copy-pasting the different hex codes in the color picker all the time. So I started to look for a way to add custom colors to the color picker. At the end I succeeded. Read on to see how you can do it as well.

As a forenote I need to state that this is somewhat of a hack.

A core javascript file needs to be slightly modified. And as a result, the modifications will be gone after a WP core update, unfortunately. But the good thing is, that you only need to copy the modified javascript file back and it works again until the next update.

I was also looking for ways to do this as a plugin of some sort, but so far I didn’t manage to achieve the desired result: having my custom colors in all the color pickers all over the admin.

When you develop a plugin you can invoke a custom script with your colors, but that will only give you your custom colors in your plugin, not everywhere on the site.

If you know how to do this, let me know and I will spread the word. 🙂

For now the hack stays.

Here is what you need to add custom colors to the color picker

Look for this file:

wp-admin/js/iris.min.js

First, create a backup, so if anything goes wrong, you can put back the original.

Open it in your favorite code editor and search for the term “_palettes”. There you will find this section:

_palettes:[“#000″,”#fff”,”#d33″,”#d93″,”#ee2″,”#81d742″,”#1e73be”,”#8224e3″]

And then simply exchange the hex codes to your preferred colors.

Upload it to your server and overwrite the iris.min.js

Clear your browser cache and reload the page.

Voila! Your custom colors appear in the color picker. You can test it under Appearance > Customize for example.

 

css.php

If you liked this post ...

... then share it with your friends!