WordPress: Visual Editor Stylesheet Modification

Posted by on April 4, 2014 • Filed Under Tutorials

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 to your theme’s functions.php file:

¬†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:

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 Comments


  • avatar image

    Kya

    Apr 04, 2014

    Reply

    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

  • avatar image

    cole

    Apr 05, 2014

    Reply

    This is cool; although, I don't use the editor for safety reasons.

    • avatar image

      Liz

      Apr 10, 2014

      Reply

      o.o The WP Visual Editor is the box you post in. There's a text version, but it's still the same box.

  • avatar image

    Liz

    Apr 07, 2014

    Reply

    Ah! I always wondered how some theme makers did this. I get tired of typing in the serif font in the Dashboard's editor. :|

Post your comments