Here are three really useful filters to expose some font options that are hidden by default in the WordPress TinyMCE WYSIWYG editor:
Add custom tags/styles to the formats drop down menu.
// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
function wpex_styles_dropdown( $settings ) {
// Create array of new styles
$new_styles = array(
array(
'title' => __( 'Custom Styles', 'wpex' ),
'items' => array(
array(
'title' => __('Theme Button','wpex'),
'selector' => 'a',
'classes' => 'theme-button'
),
array(
'title' => __('Highlight','wpex'),
'inline' => 'span',
'classes' => 'text-highlight',
),
),
),
);
// Merge old & new styles
$settings['style_formats_merge'] = true;
// Add new styles
$settings['style_formats'] = json_encode( $new_styles );
// Return New Settings
return $settings;
}
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );
Shows a new/extra formats menu option & UI
// Add Formats Dropdown Menu To MCE
if ( ! function_exists( 'wpex_style_select' ) ) {
function wpex_style_select( $buttons ) {
array_push( $buttons, 'styleselect' );
return $buttons;
}
}
add_filter( 'mce_buttons', 'wpex_style_select' );
Shows a font size selector
// 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' );
Source:
- http://www.wpexplorer.com/wordpress-tinymce-tweaks/{:target=”_blank”}