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:

formats

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
Screen Shot 2014-09-18 at 3.41.34 PM

Block = How the code is added to your page. In this case, “span” will translate to:

Screen Shot 2014-09-18 at 5.48.09 PM

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.

5 replies
  1. Mike
    Mike says:

    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 :(

    Reply
  2. Jason
    Jason says:

    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.

    Reply
  3. 76Carmela
    76Carmela says:

    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

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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