Wordpress: Visual Editor Stylesheet Modification

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.

4 thoughts on “WordPress: Visual Editor Stylesheet Modification”

  1. That is really cool, thanks for the tip on how to do this. :D I haven’t actually tried it myself before, but I will have to think about it. Now I know how. :D

Leave a Comment

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

Scroll to Top