Here’s You can Change WordPress Editor Font Size & Other Styles to Make Writing Easier


Resize Text:

InPast, Whenever I sit down to write a blog for my site, I usually left in mid. The Reason was the size of text in my editor, the font size was way too small & I usually get frustrated when I continuously read and write. To solve this problem I usually zoom in screen but that wasn’t the right solution, as all the buttons also get bigger and make everything annoying.

To Solve this issue I used WordPress builtin functionality to style my WordPress editor with simple CSS. I changed font size, family, padding, width height and everything I wanted to. This helped me get an editor that I can easily use without losing focus.

So if you also want to change editor style than this guide is gonna help you. I will tell you how to pick the right classes and ID and how to style and save them in your theme.
Don’t worry, if you don’t know CSS, you can still follow along. It might help you too.

  1. First of all, open your WordPress editor menu and look it carefully and think what you want to change.
  2. Right-click on the element you want to change (e.g: Text in the editor), select developer tool (inspect element) and you will see a bundle of columns in front of you. Hover over the HTML code in left tab. Browser will highlight the element when you hover over the code behind it, so when your required area is highlighted, click on the code.
  3. Now in CSS bar (right side), click on the + button and then write your CSS style in between parenthesis. E.g: You can change the font size by typing font-size: 30px; (you can get more style codes form internet, just google what you want). if you are satisfied by what you are seeing, then copy the code and save it into notepad or anything else. Only save CSS code you have added selectors, nothing else.
  4. After your code is ready, open Cpanel, FTP or whatever you use and navigate to WordPress currently active theme folder. Create a new file here with name editor-style.css
  5. Paste the code you have written to it. For example, you can write this code to change text size “.mce-content-body p{font-size:20px;}
  6. Now edit your theme functions.php file and add this hook anywhere add_editor_style(‘editor-style.css’); , maybe on top after <?php tag.

That’s it. You are done. Now open editor by editing any post and hopefully your style has been applied.

Helpful(1)Not Helpful(0)

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)

Loading...