Add CSS Class to Link in TinyMCE editor

All we need is an easy explanation of the problem, so here it is.

In searching for a solution, I’ve come across the plugin to enable a dropdown of CSS styles already present within a stylesheet. What I want is to allow the editor to add CSS Classes from a textbox. So if you consider this image:

enter image description here

What I’m ideally looking for is a way to get another textbox in there below Title called Class. The freedom to type in a CSS class is needed for other functionality within the site. Any ideas on how I can achieve this?

Many thanks!

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

One option is to add a class to the Styleselect menu in MCE. Adapted from the “TinyMCE Custom Styles” Codex page you first need to add the style select to the editor:

// 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');

That will add the new drop down to the editor. Then you create your custom styles:

// 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' );

As of WordPress 3.9 which included an upgrade to TinyMCE 4.0, the style select is much more robust and includes that selector rule that means you can define styles that only can be applied to links. It’s pretty nice.

This solution means you can pre-define the classes you need and ensure there are never typos or other problems.

As the Codex notes, this is best combined with a good editor-style.css file that will apply your styles directly in the editor.

Method 2

I was able to solve this by adding the WP Edit plugin to my site. It has an Advanced Link button, that allows me (or an editor) to manually type in a classname.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply