Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adds buttons/wrappers to tinymce for WordPress
<?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' );
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment