7

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!

19

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.

  • Hi mrwweb. Thanks for your reply, although not quite what I was looking for. I don't intend to select a class from a predefined list of classes. Instead, I just need to allow the editor to type out a classname. Basically, I've used the Lime Modal plugin from CodeCanyon, and this requires that the trigger link uses a classname that is the same as the modal unique name. – maGz Nov 8 '14 at 22:57
  • This is very interesting, I like this method, but is there any way to add the new option in with the other drop down items (i.e. paragraph, heading 1, etc.). – JacobTheDev Dec 2 '14 at 20:10
  • 1
    I'm not sure, @rev. One thing I like is that this strategy generally allows you to separate semantic HTML elements from class-driven CSS styles (that are hopefully still semantic). I don't have time to do this right now, but just try var_dump()ing the $init_array above and see what's there. Remember that the TinyMCE 4.0 update in WordPress 3.9 made a lot of existing tutorials and documentation wrong. Check dates when researching. – mrwweb Dec 2 '14 at 22:34
  • Ah, I see the benefit in keeping it separate. I just kind of hesitate in adding a whole new drop down just to add one new class, haha. I'll look in to your suggestion, thanks. – JacobTheDev Dec 2 '14 at 22:41
  • I hear you. When I do this I remove the formatselect and switch completely to styleselect for all block elements and text styles. – mrwweb Dec 3 '14 at 0:27
1

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.

  • Developer of WP Edit here. Thanks for posting that the plugin helped you. Please let me know if you have any questions regarding usage. – josh Nov 10 '14 at 0:13
  • Hey thanks josh! Just started using it so I'll let you know. So far, so good! – maGz Nov 10 '14 at 0:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.