Blog

13 Apr
2014

WordPress logo

Add custom styles to tinymce editor in WordPress


Have you ever wanted to have control over the dropdown menu styles in WordPress's built-in CMS page editor (tinymce) or had a client ask why the font is a different colour than what appears on their website. Well look no further with this handy little bit of code for adding to the themes functions file.

// custom editor styles -- create editor-style.css in your theme directory
add_editor_style();

// add style selector drop down 
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// add styles
add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
        array(
            'title' => 'Button',
            'selector' => 'a',
            'classes' => 'button'
        ),
        array(
            'title' => 'Callout Box',
            'block' => 'div',
            'classes' => 'callout',
            'wrapper' => true
        ),
        array(
            'title' => 'Bold Red Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#f00',
                'fontWeight' => 'bold'
            )
        )
    );

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

    return $settings;
}
Posted in: < CMS >
me@grafxflow avatar

me@grafxflow


I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Visitors also viewed these posts


Add comment

Add comment