Change WordPress admin TinyMCE settings

Recently, I had to modify the default WordPress admin post editor (TinyMCE) configuration on a specific post type. I wanted to remove a few buttons, Quicktags, limit the number of rows and so on. At first, I was puzzled over which hook I should use. In the end, it turned out to be pretty easy to accomplish that.

Modified TinyMCE editor
Modified TinyMCE editor

Hooking into proper filters

Let’s say I have a custom post type apartment. If a user is creating or editing an apartment from the WordPress admin dashboard, I want to limit his or her editing capabilities. I also don’t want the editor to automatically resize because I want to limit its height.

The first thing we need to do is to hook a function into the wp_editor_settings filter. The filter is applied when any wp_editor() (a function which creates the default TinyMCE editor) is instantiated. In our case, the editor is created on the admin page wp-admin/post.php — the page used for editing or creating new posts.

The wp_editor_settings filter passes two arguments to the hooked function, $settings and $editor_id, respectively. We are only interested in the $settings, which is an array containing the main settings for the editor.

add_filter( 'wp_editor_settings', 'lamosty_modify_wp_editor_settings' );

To modify TinyMCE buttons, there is another filter called mce_buttons. The filter is applied later than the wp_editor_settings one during the process of constructing the editor. The first argument it passes is the array of the activated buttons.

add_filter( 'mce_buttons', 'lamosty_modify_tinymce_buttons' );

This filter works only for the main row of buttons.

TinyMCE main row of buttons
TinyMCE main row of buttons

If you want to customize the other button rows, there are filters mce_buttons_2, mce_buttons_3 and mce_buttons_4 eagerly waiting for you.

Determine the correct admin screen

I want to change the TinyMCE settings and buttons only if I work with the apartment post type, not on posts or pages. I’ve prepared a handy helper function for this purpose:

function lamosty_is_screen( $base, $post_type = '' ) {
    $screen = get_current_screen();

    if ($screen->base == $base && $screen->post_type == $post_type) {
        return true;
    }

    return false;
}

What this function does is getting the current screen and returning true if the $base$ parameter equals to the base of the screen. If the parameter $post_type is set, the function takes it into consideration.

In our case, the base is post (from wp-admin/post.php) and post type is apartment. So, we call the function like this:

if (lamosty_is_screen( 'post', 'apartment' ) ) {
    // we are creating or editing apartments
}

Perfect.

Changing the editor settings

Now that we are hooked into the proper filters and have a function to determine if we are on the apartments editor screen, let’s modify some of the editor’s settings.

function lamosty_modify_wp_editor_settings( $settings ) {
    if ( Admin_Helper::is_screen( 'post', 'apartment' ) ) {
        $new_settings = [
            'textarea_rows' => 8,
            'tinymce' => [
                'wp_autoresize_on' => false,
                'resize' => false,
                'statusbar' => false
            ],
            'editor_height' => '',
            'quicktags' => [
                'buttons' => 'strong,em,ul,ol,li'
            ]
        ];

        $settings = array_merge($settings, $new_settings);
    }

    return $settings;
}

As you can see from the code above, the function is getting the editor’s settings through the $settings parameter. In the $new_settings array (PHP 5.4 syntax), we perform a few modifications which are pretty self-explanatory. Notice the quicktags key. Its value is another array containing the buttons in string which will be shown in the editor’s Text mode. We need to merge the two arrays in a correct order, so old settings get overridden with our new ones. New ones are simply added to the $settings array. Finally, we have to return the array for the changes to come into effect.

Changing the TinyMCE buttons

Analogous to the previous point:

function lamosty_modify_tinymce_buttons( $buttons ) {
    if ( Admin_Helper::is_screen( 'post', self::$post_type_id ) ) {
        $new_buttons = [
            'bold',
            'italic',
            'bullist',
            'numlist'
        ];

        return $new_buttons;
    }

    return $buttons;
}

Conclusion

Although developing web applications in WordPress is sometimes less comfortable than in Laravel (or any other good MVC framework), the more I play with it, the more I see one of its biggest strengths: thorough customizability. No need to touch the source code thanks to the extensive actions/filters API. Even its editor can be modified this way.

Join the Conversation

3 Comments

    1. If it’s your own custom coded theme, yes added to the theme’s functions.php file. If not then in a child theme’s functions.php file.

      Like

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: