MORE THEMES - The next new theme is being developed.

WordPress Editor Height and Distraction Free Writing

Just the other day I was working on the next WordPress theme and as I was creating blog posts, I realized my content editor was too short in height. In fact, it was just 300 pixels tall which is really small to get any content into a post or page. I was using a third party editor which has a setting to adjust the height but realized it wasn't working when I went to check it and see I had entered in 800px into the field. Obviously something is wrong.

I opened Google up and looked for ways to increase your editor height, but anything that showed up in the results was from years ago (plural, as in many years). I even went into the WordPress support forums to look and could not find anything relevant. So I decided to post the question as a new request in the forums and had some interesting replies from people who didn't realize that you can no longer change the height. Before we had the ability to simply grab the lower right corner and drag the window downward to make it bigger. A discovery where a few people realized, "hey, when did they change that?"

I also learned that it doesn't matter if you are using a third party editor, this was happening even with the default editor in WordPress.

Distraction Free Writing

Let's first talk about the distraction free writing feature before I get into the editor height solution because it appears this has changed.

I have to say that the distraction free writing is nice to have where everything except the editor is hidden from view. If you move your mouse cursor outside of the editor, then everything comes back into view. The only thing it does not do is re-size your editor...which is what this article is supposed to be about, but more on that in a moment.

You can enable the distraction free writing by clicking an icon found on the upper right corner of the editor—right below the Visual and Text tabs:

distraction free writing

Before you enable this, your editor will look something like this:

wp editor

Then once you enable distraction free writing, it should look something like this:

wp editor distraction free writing

Nice open space to focus on writing your amazing article or stories!

Automatic Editor Height

Before, you could simply drag the lower right corner of your editor to re-size it, but this is no longer enabled by default. People didn't notice this was changed; probably why everyone was saying, hey, when did they change that? Remember there used to be this little icon for dragging:

editor drag icon

 Apparently what happens now is that the editor automatically re-sizes  as you put more content into it. It starts off at 300px in height and then increases as you add enough to push the window downward. It's funny because this seemed to be oblivious to many people, even myself. I was looking for a way to increase the editor height which is how I discovered the changes as I've outlined in this article. This is like one of those things that is in plain sight but you don't see it until someone points it out to you. Then it's like....Ah, why didn't I see that!

Changing the Editor Height...Regardless

If you decide that you still want to change the editor height yourself, I will show you how this is done.

If you go to the top of your post editor screen, you will see a tab labeled as "Screen Options". Click on that and then look for the setting under "Additional Settings" and you will find the option to enable or disable distraction free writing.

distraction free writing on off

If you unchecked the box, you will discover the little corner icon of your editor is back and this will let you drag the editor window to the size you want. I should also mention that disabling this feature also means you lose your distraction free writing. If you decide you want it back, simply check the box next to "Enable full-height editor and distraction-free functionality".

editor drag icon on

Now when you open to editor or create a new post or page, your editor should stay the size (height) you made. 

In Summary

I never realized this was changed until I decided I wanted to increase my editor height, only to discover this feature was gone (or at least changed). Just like many others, I never noticed this. However, this article and quick tutorial should help anyone wanting to have the choice between distraction free writing and manually increasing the default editor height. Of course, it appears you can only have 1 of the 2 choices, not both.