TinyMCE
Add to functions.php to enable:
// Enable font size & font family selects in the editor
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
function wpex_mce_buttons( $buttons ) {
array_unshift( $buttons, 'fontselect' ); // Add Font Select
array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
return $buttons;
}
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );
// Add custom Fonts to the Fonts list
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
function wpex_mce_google_fonts_array( $initArray ) {
$initArray['font_formats'] = 'Times=times;Typewriter=linowriteregular';
return $initArray;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );
// Remove buttons from the mce editor
function myplugin_tinymce_buttons( $buttons ) {
$remove = array( 'forecolor', 'strikethrough' );
if ( ( $key = array_search( $remove, $buttons ) ) !== false )
unset( $buttons[$key] );
return $buttons;
}
add_filter( 'mce_buttons_2', 'myplugin_tinymce_buttons' );
// Add 'Formats' dropdown to WYSIWYG
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// Add custom styles to 'Formats' dropdown
function my_mce_before_init_insert_formats( $init_array ) {
$style_formats = array(
// Each array child is a format with it's own settings
array(
'title' => 'Tab Space',
'inline' => 'span',
'classes' => 'tab-space',
'wrapper' => false,
),
array(
'title' => 'Blue Block',
'block' => 'div',
'classes' => 'blue-block',
'wrapper' => true,
),
);
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// Add a few custom styles to WYSIWYG editor (on admin site)
function wpdocs_theme_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );
* then create a file called 'custom-editor-style.css' in the root of the theme folder