How to Add a Custom Class to a WordPress editor link

May 1, 2015

This is simpler than you might think. Using the TinyMCE formats button you can add a custom class to any button.  This solution is pulled from a post on the WordPress Stack site here.

The code is simple and goes in your 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' => 'My Link Custom Class',
'selector' => 'a',
'classes' => 'my-custom-link-class'
)
);
// 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' );


We do our best work face to face.

Send an email to tj@ravennainteractive.com or call us at 206.427.0000 and we will setup a time and place to meet.

 

 

Lets chat