How to add selectable font sizes in older WordPress block themes

For classic WordPress themes that do not use a theme.json file, the most effective way to add selectable font sizes to the editor is by using the functions.php file and a custom editor stylesheet or by using a plugin like Advanced Editor Tools. 

Method 1: Using Code (functions.php and CSS)

This method involves adding custom CSS classes to the WordPress editor’s toolbar dropdown menu and defining those styles in a custom stylesheet. 

1. Create an Editor Stylesheet:
   In your theme’s root folder, create a new CSS file named editor-style.css.
   • Tip: If you are using a child theme, ensure you are editing files within the child theme directory.
2. Add Font Size Classes to the Stylesheet:
   In your editor-style.css file, define CSS classes for the font sizes you want to make available in the editor. Using em or rem units is recommended for better accessibility.css
   

css

/* editor-style.css */
.has-small-font-size {
    font-size: 0.8rem;
}

.has-normal-font-size {
    font-size: 1rem;
}

.has-large-font-size {
    font-size: 1.5rem;
}

.has-huge-font-size {
    font-size: 2.2rem;
}

Enqueue the Editor Stylesheet in functions.php:
Open your theme’s functions.php file (or ideally your child theme’s functions.php file) and add the following code to link the new stylesheet to the WordPress editor:

php

// In your theme's functions.php file
function my_theme_add_editor_styles() {
    add_editor_style( 'editor-style.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );

This function automatically adds support for the editor-style.css file in the visual editor.Define Custom Font Sizes for the Block Editor (Gutenberg):
For the modern block editor, you need to register the custom sizes in PHP so they appear as selectable options in the “Typography” sidebar settings. Add this code to your functions.php file:

php

function my_theme_custom_font_sizes() {
    add_theme_support(
        'editor-font-sizes',
        array(
            array(
                'name'      => __( 'Small', 'your-theme-slug' ),
                'shortName' => __( 'S', 'your-theme-slug' ),
                'size'      => 0.8, // In rem
                'slug'      => 'small',
            ),
            array(
                'name'      => __( 'Normal', 'your-theme-slug' ),
                'shortName' => __( 'M', 'your-theme-slug' ),
                'size'      => 1, // In rem
                'slug'      => 'normal',
            ),
            array(
                'name'      => __( 'Large', 'your-theme-slug' ),
                'shortName' => __( 'L', 'your-theme-slug' ),
                'size'      => 1.5, // In rem
                'slug'      => 'large',
            ),
            array(
                'name'      => __( 'Huge', 'your-theme-slug' ),
                'shortName' => __( 'XL', 'your-theme-slug' ),
                'size'      => 2.2, // In rem
                'slug'      => 'huge',
            ),
        )
    );
}
add_action( 'after_setup_theme', 'my_theme_custom_font_sizes' );

After implementing these steps, the custom font sizes will be available as options in the editor’s typography settings, applying the corresponding CSS classes. 

Method 2: Using a Plugin (Advanced Editor Tools)

If you prefer a no-code solution or are using the older Classic Editor, the Advanced Editor Tools (TinyMCE Advanced) plugin simplifies this process by adding a font size dropdown menu directly to the editor’s toolbar. 

1. Install the Plugin:
   Go to Plugins > Add New in your WordPress dashboard, search for “Advanced Editor Tools”, install, and activate it.
2. Configure Settings:
   Navigate to the plugin’s settings page (usually under Settings > Advanced Editor Tools) to customize the buttons available in the editor toolbar, including font size selection dropdowns.
3. Use the New Options:
   When editing a post or page, you can now highlight text and select the desired font size from the new dropdown menu in the toolbar.