Skip to content

Instantly share code, notes, and snippets.

@munts
Created August 25, 2020 23:15
Show Gist options
  • Save munts/b91591016757f027595f5ef6f49cc9dc to your computer and use it in GitHub Desktop.
Save munts/b91591016757f027595f5ef6f49cc9dc to your computer and use it in GitHub Desktop.
add custom styles to the WordPress TinyMCE editor
/*================= custom wysiwyg editor styles ==============*/
//add custom styles to the WordPress editor
function my_custom_styles( $init_array ) {
$style_formats = array(
// These are the custom styles
array(
'title' => 'Testimonials',
'block' => 'div',
'classes' => 'testimonials',
'wrapper' => true,
),
array(
'title' => 'Custom H3',
'block' => 'h3',
'classes' => 'custom-h3',
'wrapper' => false,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$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_custom_styles' );
function add_style_select_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'add_style_select_buttons' );
// add .testimonials and .custom-h3 classes and styles to you style.css file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment