Change the Default Font Size in the Editor

To change the default font size in the WordPress editor, you can use the tiny_mce_before_init filter hook to modify the settings of the TinyMCE editor. By adjusting the fontsize_formats parameter, you can set the desired font sizes.

Here’s an example code snippet that demonstrates how to change the default font size in the editor to 16 pixels:

function wpsnippets_change_editor_font_size( $settings ) {
    $settings['fontsize_formats'] = '12px 14px 16px 18px 20px 24px 28px 32px';
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wpsnippets_change_editor_font_size' );

In this example, we define a custom function wpsnippets_change_editor_font_size that accepts the $settings parameter. Within the function, we modify the fontsize_formats parameter to include the desired font sizes separated by spaces. Finally, we return the modified $settings array.

You can add this code to your theme’s functions.php file or create a custom plugin to apply the changes. After adding the code, the font size options in the editor will be updated to include the specified sizes.

This code snippet can be useful when you want to provide a specific set of font sizes for your content creators to choose from in the WordPress editor. It ensures consistency and makes it easier for users to format their content with the desired font size.

Examples

Example 1: Changing the default font size in the editor using CSS

This code example demonstrates how to change the default font size in the WordPress editor by adding custom CSS.

function wpsnippets_change_editor_font_size() {
    echo '<style>
        .block-editor-writing-flow,
        .editor-styles-wrapper {
            font-size: 18px;
        }
    </style>';
}
add_action( 'admin_head', 'wpsnippets_change_editor_font_size' );

This code adds a custom CSS style to the WordPress admin head section, targeting the editor’s writing flow and editor styles wrapper classes. By setting the font-size property to 18px, the default font size in the editor will be changed to 18 pixels.

Example 2: Changing the default font size in the editor using JavaScript

This code example demonstrates how to change the default font size in the WordPress editor by using JavaScript.

function wpsnippets_change_editor_font_size() {
    ?>
    <script>
        jQuery(document).ready(function($) {
            wp.data.dispatch( 'core/editor' ).setFontSizes( [
                { name: 'Small', slug: 'small', size: 12 },
                { name: 'Normal', slug: 'normal', size: 16 },
                { name: 'Large', slug: 'large', size: 20 }
            ] );
        });
    </script>
    <?php
}
add_action( 'admin_footer', 'wpsnippets_change_editor_font_size' );

This code uses JavaScript to modify the font size options available in the editor. By using the wp.data.dispatch function, we can access the editor’s state and modify the available font sizes. In this example, we add three font size options: Small (12px), Normal (16px), and Large (20px).

Example 3: Changing the default font size in the editor using a plugin

This code example demonstrates how to change the default font size in the WordPress editor using a custom plugin.

function wpsnippets_change_editor_font_size() {
    $editor_settings = get_option( 'editor_settings' );
    $editor_settings['fontsize'] = '18px';
    update_option( 'editor_settings', $editor_settings );
}
add_action( 'admin_init', 'wpsnippets_change_editor_font_size' );

This code uses the get_option and update_option functions to retrieve and update the editor settings stored in the WordPress options table. By modifying the fontsize value to '18px', the default font size in the editor will be changed to 18 pixels. This code should be placed in a custom plugin file and activated to take effect.