Post navigation

tip, Uncategorised, WordPress

Customise WordPress editor’s font options

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:

About Geraint Palmer

I am a front-end developer and software engineer living in Staffordshire, England. I love latte, good restaurants, photography, watching movies and occasionally snowboarding ( except when cartwheeling head first down the slope ;)