How to Customize wp_editor() Like a Pro in WordPress

The wp_editor() function lets you embed the WordPress visual editor (TinyMCE,WYSIWYG) into your custom settings, plugin pages, front-end forms, and meta boxes. While it’s easy to use, many don’t realize how deeply customizable it is, By default, it comes with standard settings, but there are advanced customizations available — such as adjusting the height, buttons, media buttons, editor styles, and more.

To Prevent Certain Roles from Accessing wp-admin Use Below Code

Add code to your child theme’s functions.php file or via a plugin that allows custom functions to be added, such as the Code snippets plugin. Avoid adding custom code directly to your parent theme’s functions.php file as this will be wiped entirely when you update the theme.

Basic Usage of wp_editor()

$content = '';
$editor_id = 'my_custom_editor';

wp_editor($content, $editor_id);

This outputs a basic WYSIWYG editor.

Adjusting the Height of wp_editor

Height is controlled via the textarea_rows argument:

wp_editor($content, $editor_id, array(
    'textarea_rows' => 20, // default is 10
));

More precise control using editor_height in TinyMCE settings:

add_filter('tiny_mce_before_init', 'custom_wp_editor_height');
function custom_wp_editor_height($initArray) {
    $initArray['height'] = '400'; // Set height in px
    return $initArray;
}

Use both if needed: textarea_rows for fallback, and tiny_mce_before_init for JS-controlled height.

Customize Toolbar Buttons (Visual Editor Controls)

Control which buttons show in the TinyMCE toolbar:

wp_editor($content, $editor_id, array(
    'teeny' => false,
    'quicktags' => true,
    'tinymce' => array(
        'toolbar1' => 'bold,italic,underline,|,bullist,numlist,|,link,unlink,|,undo,redo',
        'toolbar2' => '',
    )
));

This replaces the default toolbar with a custom one (remove unused features, or limit options for clients).

Remove/Add Media Upload Button

The media button (Add Media) appears above the editor by default. To remove it:

wp_editor($content, $editor_id, array(
    'media_buttons' => false
));
// To show it again:
'media_buttons' => true

Add Custom Styles Inside the Editor

You might want the content in the editor to reflect your theme or admin styles. Use editor_css:

wp_editor($content, $editor_id, array(
    'editor_css' => '<style>body.mce-content-body { font-family: Arial; font-size: 16px; }</style>'
));

Or load external CSS:

wp_editor($content, $editor_id, array(
    'editor_css' => '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/editor-style.css">'
));

Advanced TinyMCE Configuration (Add Plugins, Disable Menubar, etc.)

Inject custom TinyMCE config using the tiny_mce_before_init filter:

function custom_mce_options($init) {
    $init['menubar'] = false; // Hide the top menu bar
    $init['branding'] = false; // Hide "Powered by Tiny"
    $init['elementpath'] = false; // Hide element path
    $init['statusbar'] = false; // Hide bottom status bar
    $init['resize'] = false; // Disable resizing

    // Add a custom class to body
    $init['body_class'] = 'custom-editor-body';

    return $init;
}
add_filter('tiny_mce_before_init', 'custom_mce_options');

Using Multiple Editors on a Page

Each editor should have a unique ID. You can safely include multiple editors like this:

wp_editor($content1, 'editor_one', array('textarea_rows' => 12));
wp_editor($content2, 'editor_two', array('textarea_rows' => 8));

WordPress automatically initializes each instance of TinyMCE properly.

Customize the QuickTags (Text/HTML Editor Buttons)

add_filter('quicktags_settings', 'custom_quicktags');
function custom_quicktags($qtInit) {
    $qtInit['buttons'] = 'strong,em,link,block,del,img,ul,ol,li,code';
    return $qtInit;
}