Creating custom styles drop down in TinyMCE

Adding this snippet to the functions.php of your wordpress theme will let you create a custom styles drop down menu. Modify the array to create custom html elements and classes that can be inserted into the TinyMCE visual editor. This is a great little snippet that will let your clients add special elements to the TinyMCE editor without knowing a single thing about HTML or even shortcodes.

 

 

function themeit_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_mce_buttons_2' );
function themeit_tiny_mce_before_init( $settings ) {
$settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr,';
$style_formats = array(
array( 'title' => 'Button',         'inline' => 'span',  'classes' => 'button' ),
array( 'title' => 'Green Button',   'inline' => 'span',  'classes' => 'button button-green' ),
array( 'title' => 'Rounded Button', 'inline' => 'span',  'classes' => 'button button-rounded' ),
array( 'title' => 'Other Options' ),
array( 'title' => '½ Col.',      'block'    => 'div',  'classes' => 'one-half' ),
array( 'title' => '½ Col. Last', 'block'    => 'div',  'classes' => 'one-half last' ),
array( 'title' => 'Callout Box',        'block'    => 'div',  'classes' => 'callout-box' ),
array( 'title' => 'Highlight',          'inline'   => 'span', 'classes' => 'highlight' )
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'themeit_tiny_mce_before_init' );

Be Sociable, Share!

Leave a comment