Skip to content

Instantly share code, notes, and snippets.

@martylouis
Created April 23, 2014 22:29
Show Gist options
  • Save martylouis/11234749 to your computer and use it in GitHub Desktop.
Save martylouis/11234749 to your computer and use it in GitHub Desktop.
A custom WordPress TinyMCE v4 configuration with styles (now called "Formats") drop down menu and submenus.
<?php
/**
* TinyMCE v4 Config
*
* A custom WordPress TinyMCE v4 configuration with styles (now called "Format") drop down menu with submenus.
*
* style_formats: http://www.tinymce.com/wiki.php/Configuration:style_formats
*
*/
function my_theme_add_editor_styles() {
add_editor_style('/assets/css/tinyMCE.css');
}
add_action( 'init', 'my_theme_add_editor_styles' );
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// Remove from first row
function remove_tinymce_buttons1($buttons) {
// strikethrough, hr, underline, aligncenter, alignright, forecolor, charmap, outdent, indent
$remove = array();
return array_diff($buttons,$remove);
}
add_filter('mce_buttons','remove_tinymce_buttons1');
// Remove from second row
function remove_tinymce_buttons2($buttons) {
// underline, alignjustify, forecolor, charmap, outdent, indent
$remove = array();
return array_diff($buttons,$remove);
}
add_filter('mce_buttons_2','remove_tinymce_buttons2');
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats = array(
array(
'title' => 'Headers',
'items' => array(
array( 'title' => 'Heading', 'block' => 'h2',),
array( 'title' => 'Subheading', 'block' => 'h3'),
array( 'title' => 'Section Default', 'selector' => 'h1, h2, h3, h4', 'classes' => 'section-header-default'),
array( 'title' => 'Section Orange', 'selector' => 'h1, h2, h3, h4', 'classes' => 'section-header-orange'),
array( 'title' => 'Section Blue', 'selector' => 'h1, h2, h3, h4', 'classes' => 'section-header-blue'),
array( 'title' => 'Section Green', 'selector' => 'h1, h2, h3, h4', 'classes' => 'section-header-green'),
array( 'title' => 'Section Purple', 'selector' => 'h1, h2, h3, h4', 'classes' => 'section-header-purple'),
),
),
array(
'title' => 'Blocks',
'items' => array(
array( 'title' => 'p', 'block' => 'p'),
array( 'title' => 'div', 'block' => 'div'),
array( 'title' => 'pre', 'block' => 'pre'),
),
),
array(
'title' => 'Inline',
'items' => array(
array( 'title' => 'large', 'inline' => 'span', 'classes' => 'text-large'),
array( 'title' => 'small', 'inline' => 'span', 'classes' => 'text-small'),
array( 'title' => 'uppercase', 'inline' => 'span', 'styles' => array('text-transform' => 'uppercase')),
array( 'title' => 'lowercase', 'inline' => 'span', 'styles' => array('text-transform' => 'lowercase')),
array( 'title' => 'highlight', 'inline' => 'span', 'styles' => array('background-color' => 'yellow')),
),
),
array(
'title' => 'Text Color',
'items' => array(
array( 'title' => 'Blue', 'inline' => 'span', 'classes' => 'color-blue'),
array( 'title' => 'Blue Dark', 'inline' => 'span', 'classes' => 'color-bluedark'),
array( 'title' => 'Red', 'inline' => 'span', 'classes' => 'color-red'),
array( 'title' => 'Green', 'inline' => 'span', 'classes' => 'color-green'),
array( 'title' => 'Purple', 'inline' => 'span', 'classes' => 'color-purple'),
array( 'title' => 'Brown', 'inline' => 'span', 'classes' => 'color-brown'),
),
),
array(
'title' => 'Buttons',
'items' => array(
array( 'title' => 'Button', 'inline' => 'a', 'classes' => 'btn btn-primary'),
array( 'title' => 'Large', 'selector' => 'a, button', 'classes' => 'btn-lg'),
array( 'title' => 'Small', 'selector' => 'a, button', 'classes' => 'btn-sm'),
array( 'title' => 'Extra Small', 'selector' => 'a, button', 'classes' => 'btn-xs'),
array( 'title' => 'Block', 'selector' => 'a, button', 'classes' => 'btn-block'),
),
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['block_formats'] = "Heading=h2;Subheading=h3;Paragraph=p";
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
@martylouis
Copy link
Author

Here's a screenshot:

screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment