WordPress: Visual Editor Stylesheet Modification

Have you ever wondered how to style the WordPress Visual Editor (when writing posts) using your current theme’s functions file? Well, lucky for you there is a way to do that!

You can edit quite a lot with this function: typefaces, font size, image styling, and so much more. All it takes is to create a separate stylesheet and add a small function to your theme’s functions.php file.

Add this to your theme’s functions.php file:

function visual_editor_style($url) { 
    if ( !empty($url) ) 
        $url .= ','; 
        
        // Change the path here if using sub-directory 
        $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'visual-editor.css'; 
        return $url; 
} 
add_filter('mce_css', 'visual_editor_style');

Create ‘visual-editor.css’ and add your custom CSS

Add all the CSS you want to use that you want to see on your WordPress Visual Editor. For example, on this blog, I made one just to increase the font size of the Visual Editor. So I did something like this:

body { 
    font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif; 
    font-size: 16px; 
}

Note: You can name the file whatever you want, just make sure to use the correct filename on the PHP function. Also, upload the CSS file to the same directory where your theme’s style.css is.

And voila! Now you have more ways to customize the WordPress interface to your liking. If you have any questions, please let me know by leaving a comment.