Add Custom Classes From the Visual Editor in WordPress 4.0
Warning: this is an advanced tutorial that requires working with theme files to make work!
Today, we will go through the process of adding a “Format” menu to the visual editor in WordPress 4.0. This will allow you to add custom styles (classes) to text and images right in your editor, without hand coding!
It will look something like this:
Step 1: Create the style you want to add to the visual editor
The first step is to create your CSS classes and insert them into your stylesheet. Most themes will have a “Custom CSS” section where you can add these styles. If not, then add them to your style.css file.
In this example, I will show you how to add a “Blue Text” style to your visual editor. This may be useful if you use a certain color in your company branding and you want to easily add the same blue color to your text in the visual editor. The style we will add is:
.blue-text { color: #2d81b6; }
Step 2: Add this code to functions.php to add dropdown
Copy the following code into your theme’s functions.php file.
// Callback function to insert 'styleselect' into the $buttons array function my_mce_buttons_2( $buttons ) { array_unshift( $buttons, 'styleselect' ); return $buttons; } // Register our callback to the appropriate filter add_filter('mce_buttons_2', 'my_mce_buttons_2'); // Callback function to filter the MCE settings function my_mce_before_init_insert_formats( $init_array ) { // Define the style_formats array $style_formats = array( // Each array child is a format with it's own settings array( 'title' => 'Blue Text', 'block' => 'span', 'classes' => 'blue-text', 'wrapper' => true, ), ); // Insert the array, JSON ENCODED, into 'style_formats' $init_array['style_formats'] = json_encode( $style_formats ); return $init_array; } // Attach callback to 'tiny_mce_before_init' add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
Step 3: Add Styles to the Dropdown
Each “array” in the code above is a new style you are adding to the formats dropdown. In this example, we are adding the class: .blue-text
array( 'title' => 'Blue Text', 'block' => 'span', 'classes' => 'blue-text', 'wrapper' => true, ),
Title = what shows in the dropdown menu
Block = How the code is added to your page. In this case, “span” will translate to:
Classes = Put your style class here. Omit the period that would normally be in your stylesheet.
Wrapper = Setting this to “true” is necessary to complete the generation of the code on the page.
That completes this tutorial on adding custom styles to your visual editor. If you want to add more styles, simply add a new array to the code in your functions.php file.
A HUGE thank you for this short tutorial! This is exactly what I needed and couldn’t really find any working solution.
Looks like the new version of the visual editor (since WP 3.8 I think) broke almost all the plugins that were dealing with the custom styles in it :(
Awesome, glad it helped!
This is awesome. My only question is, is there a way to change the span to a div? I replaced the ‘block’ => ‘span’ with ‘block’ => ‘div’ but it didn’t work.
for SPAN
‘inline’ => ‘span’
for DIV
‘block’ => ‘div’
Hello admin, i must say you have high quality content here.
Your page should go viral. You need initial traffic only.
How to get it? Search for: Mertiso’s tips go viral