Skip to content

Instantly share code, notes, and snippets.

@jonnymaceachern
Forked from justinwhall/gist:1997780
Created February 25, 2020 17:07
Show Gist options
  • Save jonnymaceachern/45df91b7b609d9b8d596afe6dfbb1927 to your computer and use it in GitHub Desktop.
Save jonnymaceachern/45df91b7b609d9b8d596afe6dfbb1927 to your computer and use it in GitHub Desktop.
PHP: WordPress | tinyMCE editor style dropdown menu
<?php
/**
* 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.
*/
function themeit_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter( 'mce_buttons_2', 'themeit_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 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' => 'MD Header (Green)', 'inline' => 'h2', 'classes' => 'md-header' ),
array( 'title' => 'Just Colors' ),
array( 'title' => 'MD Green', 'inline' => 'span', 'classes' => 'md-green' ),
array( 'title' => 'MD Blue', 'inline' => 'span', 'classes' => 'md-blue' ),
//array( 'title' => '&frac12; Col.', 'block' => 'div', 'classes' => 'one-half' ),
//array( 'title' => '&frac12; 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' );
/**
* Add Editor Style
*
* This provides the theme with the functionality to add a custom
* TinyMCE editor stylesheet. By default, the add_editor_style() will
* look for a stylesheet named editor-style.css in your theme. Here
* we have chosen to define our own stylesheet name, style-editor.css.
* This stylesheet can be named whatever you want, just be sure it is
* defined in the function below and included in your theme files.
*
*{@link http://codex.wordpress.org/Function_Reference/add_editor_style }
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment