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.