Skip to content

Instantly share code, notes, and snippets.

@jaredatch
Created July 24, 2013 03:13
Show Gist options
  • Save jaredatch/6067819 to your computer and use it in GitHub Desktop.
Save jaredatch/6067819 to your computer and use it in GitHub Desktop.
Add a selectable "Styles" menu to TinyMCE, so users can apply certain classes without needed to dig into the markup or use shortcodes.
<?php
/**
* Add "Styles" drop-down to TinyMCE
*
* @since 1.0.0
* @link http://wp.tutsplus.com/tutorials/theme-development/adding-custom-styles-in-wordpress-tinymce-editor/
* @param array $buttons
* @return array
*/
function ja_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'ja_mce_editor_buttons' );
/**
* Add styles/classes to the TinyMCE "Styles" drop-down
*
* @since 1.0.0
* @link http://wp.tutsplus.com/tutorials/theme-development/adding-custom-styles-in-wordpress-tinymce-editor/
* @param array $settings
* @return array
*/
function ja_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Paragraph Large',
'selector' => 'p',
'classes' => 'large',
),
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter( 'tiny_mce_before_init', 'ja_mce_before_init' );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment