Custom Elements For TinyMCE In Wordpress

Custom Elements For TinyMCE

//Custom Elements For TinyMCE
// 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' => 'Callout Box Right',
                'block' => 'div',
                'classes' => 'callout alignright',
                'wrapper' => true
        ),
        array(
                'title' => 'Callout Box Left',
                'block' => 'div',
                'classes' => 'callout alignleft',
                'wrapper' => true
        )
    );

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

    return $settings;

}