Adds buttons/wrappers to tinymce for WordPress

tinymce-custom-classes.php

<?php

// adds our custom style buttons

/** 
 * Filter TinyMCE Buttons
 *
 * Here we are filtering the TinyMCE buttons and adding a button
 * to it. In this case, we are looking to add a style select 
 * box (button) which is referenced as "styleselect". In this 
 * example we are looking to add the select box to the second
 * row of the visual editor, as defined by the number 2 in the
 * mce_buttons_2 hook.
 *
 * http://theme.it/an-alternative-to-the-shortcode-madness-part-1/
 */
function sfn_icu_mce_buttons_2( $buttons ) {
  array_unshift( $buttons, 'styleselect' );
  return $buttons;
}
add_filter( 'mce_buttons_2', 'sfn_icu_mce_buttons_2' );

/**
 * Add Style Options
 *
 * First we provide available formats for the style format drop down.
 * This should contain a comma separated list of formats that 
 * will be available in the format drop down list.
 *
 * Next, we provide our style options by adding them to an array.
 * Each option requires at least a "title" value. If only a "title"
 * is provided, that title will be used as a divider heading in the
 * styles drop down. This is useful for creating "groups" of options.
 *
 * After the title, we set what type of element it is and how it should
 * be displayed. We can then provide class and style attributes for that
 * element. The example below shows a variety of options.
 *
 * Lastly, we encode the array for use by TinyMCE editor
 * 
 *
 * {@link http://tinymce.moxiecode.com/examples/example_24.php }
 */
function sfn_icu_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' => 'Other Options' ),

    // 1/2
    array( 'title' => '&frac12; Col.', 		'block' => 'div', 'classes' => 'one-half column' ),
    array( 'title' => '&frac12; Col. Last', 'block' => 'div', 'classes' => 'one-half column last' ),

    // 1/3
    array( 'title' => '&frac13; Col.', 		'block' => 'div', 'classes' => 'one-third column' ),
    array( 'title' => '&frac13; Col. Last', 'block' => 'div', 'classes' => 'one-third column last' ),

    // 1/4
    array( 'title' => '&frac14; Col.', 		'block' => 'div', 'classes' => 'one-fourth column' ),
    array( 'title' => '&frac14; Col. Last', 'block' => 'div', 'classes' => 'one-fourth column last' ),
     
    // callout box 
    array( 'title' => 'Callout Box Title', 	'block' => 'h4', 'classes' => 'callout-box-title' ),
    array( 'title' => 'Callout Box', 		'block' => 'div', 'classes' => 'callout-box' ),

  );

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

  return $settings;
}
add_filter( 'tiny_mce_before_init', 'sfn_icu_tiny_mce_before_init' );

?>