Stuck with this for weeks. I cannot add a custom button with a custom style to the frontend tinymce editor.

If I register a new custom dropdown in the function.php it works great in the backend editor.

add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {

    array_unshift( $buttons, 'styleselect' );
    return $buttons;

 * Add styles/classes to the "Styles" drop-down
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );

function fb_mce_before_init( $settings ) {

    $style_formats = array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            'title' => 'My Test',
            'selector' => 'p',
            'classes' => 'mytest',
            'title' => 'AlertBox',
            'block' => 'div',
            'classes' => 'alert_box',
            'wrapper' => true
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color'         => 'red', // or hex value #ff0000
                'fontWeight'    => 'bold',
                'textTransform' => 'uppercase'

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

    return $settings;


But this won't show up on the frontend even if I added the styleselect to it. The FORMAT button shows up, but don't have the custom styles. Just the default ones. So something goes wrong..

'tinymce' => array('toolbar1' => 'bold,italic,underline,strikethrough,bullist,link,unlink,styleselect'),

How can I add/register a custom style button/dropdown for my frontend editor?

Your Answer

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

Browse other questions tagged or ask your own question.