Add Custom CSS Styles to WordPress Visual Editor

You can add custom CSS styles and Classes to the visual WordPress editor (TinyMCE) by using one of the two following snippets.

Using a Theme

Add the following snippet to your functions.php:

add_editor_style();

Now, add a file called editor-style.css to your theme directory. All styles and classes in this file will be applied to the WordPress Editor

Using a Plugin

Add the following snippet to your index.php (or something similar):

function wpkb_add_editor_stylesheet()
{
    add_editor_style(plugins_url('editor-style.css', __FILE__));
}

add_action('admin_init', 'wpkb_add_editor_stylesheet');

Now, add a file called editor-style.css to your plugin directory. All styles and classes in this file will be applied to the WordPress Editor

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top