I was wondering if we can change the default color palette in WordPress. And after a bit of research i figured out how to do that.
I wanted to customize or change the default color palette because whenever i needed to put a custom color to the text, i had to waste about 20-25 seconds to manually select a custom color from the more color option.
It was really a time consuming process to select a custom color which i needed frequently in my blog posts. And this post exactly helps to solve that issue.
Given below is a screenshot of how i customized the look of my color palette in the tinyMCE editor of WordPress.
How To Customize Color Palette in TinyMCE Editor
Now this can be explained in three simple steps (if you are an advanced user then these 3 steps are sufficient for you, if not – check additional info).
- Find and extract wp-includes/js/tinymce/wp-tinymce.js.gz.
- Open the file wp-tinymce.js in notepad and find (CTRL+F) the string ‘000000‘. Now you will find a list of colors in hex code. Just replace these with your desired hex color code.
- Save the file and then archive it in GZIP format (important) and upload it back to the server.
The file wp-tinymce.js is encoded in GZIP format which is located at wp-includes/js/tinymce/wp-tinymce.js.gz. The gz at the end indicates that its a GZIP encoded version of wp-tinymce.js file.
You have to download the wp-includes/js/tinymce/wp-tinymce.js.gz file from the server, extract it and edit it in notepad to change default color palette by adding your own custom colors.
When you open the file in notepad, just go ahead and find 000000 inside the file. This is where you will find a list of all default colors which are in the color palette of tinyMCE editor of WordPress.
But these are hex codes, which means 000000 represents black color. Similarly, ff0000 represents red color. So for instance, if you want to replace black with red, then you have to replace 000000 in the file with ff0000.
Once you make the necessary changes, just save the file. And now comes the difficult part of this procedure.
Once you save, you have to archive the file in the GZIP format. Check this article to know – how to GZIP a file in Windows. When you are done, the next step is to upload the file back to the server and replace the existing one.
This will give you a custom color palette for WordPress tinyMCE Editor. I hope this helps and for more amazing posts, subscribe to blog feed.