Re: adding styles to wordpress tinymce

[TheDoc]

The functions.php route is easy!

// 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 - more info: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/

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 = json_encode( $style_formats );



return $settings;



}