Colours pallet to WordPress visual editor

 In Admin, All, Styling

How to add colours pallet to WordPress visual editor

This code snippet add a colour picker for  text or background colour found inside the visual editor  toolbar with a customisable colour grid.

The Code

Just add the following block of code to your theme’s functions.php file, and customise to suit your requirements:

Explaining the Code

Before the TinyMCE toolbar is initialised, it calls the tiny_mce_before_init hook.

We create a function called wptb_tinymce_options that will run when this hook is called, by registering it with the tinymce_before_init hook:


function ($init){
//Do stuff< } //We register our function to run when the tiny_mce_before_init hook fires: add_filter('tiny_mce_before_init', 'ns_mce4_options';

 

Our function receives an array of TinyMCE $init. Since we receive this array before the TinyMCE component initialises, we can modify it before everything is rendered to the screen.

One of the items in this array is $init['textcolor_map'], which contains a specially-formatted string of colours and colour names. By replacing this string with our own, we can override the built-in colour palette.


$custom_colours = '"000000", "Black",
"00AC9F", "Custom Teal",
"00448B", "Custom Blue"';
$init['textcolor_map'] = '['.$custom_colours.']';

Lastly, the hook expects us to return the updated $init array so that the TinyMCE Editor can complete initialisation:

return $init;

Recent Posts

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Start typing and press Enter to search

Let's work together

I'd love to work with you! Please fill out my project form to tell me more about your project/work. I reply to all enquiries within 48 hours.

Availability

  • November - Booked
  • December - Booked
  • January - Available

Rates

  • My day rate is £300.
  • I can provide a fixed price for your work.

EN - Header Enquiry Form

  • This form collects your name, email address and telephone number so that I can respond to the enquiry(ies) that you submit via this website. Please check my privacy policy for the full story on how I use, protect and manage your submitted data.