1

How can I add add a dropdown/select with pre defined class names into the Wordpress wysiwyg (tinymce advanced) that I can put on different elements?

What I'd like:

  1. Add some text or any other element
  2. Click the text and click the dropdown to select a class to be added to that element
3

To achieve the dropdown styles we have to use the filter hook tiny_mce_before_init. This filter grants developers access to the TinyMCE settings array.

The following example adds custom style options to an existing Style dropdown.

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(                     
            array(
                    'title' => '1/5 Block',
                    'block' => 'div',
                    'classes' => 'col-md-5',
                    'wrapper' => true
            ),
            array(
                    'title' => 'Pull Left',
                    'block' => 'div',
                    'classes' => 'pull-left',
                    'wrapper' => true
            ),
            array(
                    'title' => 'Button R',
                    'selector' => 'a',
                    'classes' => 'btn btn-default pull-right'
            ),  
            array(
                    'title' => 'Text Center Green Button',
                    'selector' => 'a',
                    'classes' => 'btn btn-green center'
            ),              
            array(
                    'title' => 'Clearfix',
                    'block' => 'div',
                    'classes' => 'clearfix'
            ),
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

} 

You can read more about the tinymce buttons and their uses and hooks from here.

  • What does your code do, how does it work. Why would this solve the issue. Where should it be used. It is all just one big mystery. Please file an edit with theses requirements – Pieter Goosen Jun 24 '15 at 12:09
  • Thanks for the suggestion @PieterGoosen. Explanation added. – Karun Jun 24 '15 at 12:17

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.