I created a custom theme and the "New Post" editor will not wrap text at the same width as my text area on the website. I have Googled for hours and tried every possible snippet of CSS code imaginable, which leads me to believe that the problem is with my theme's code, not just the stylesheet.

This is the website

If anyone has any ideas what I could have done, or if there is a checklist for creating a theme that I should have checked, please let me know.

  • Since your question isn't clear enough, could you please explain a little bit more what you want to achieve? – 99teko Aug 18 '16 at 14:12
  • question is not clear, if there is any thing wrong in your "add new post" section in the admin, please check your function.php for add_editor_style() function, this will load the editor-style.css which will be either in the root of theme or inside css folder. check the code. – Aamer Shahzad Aug 19 '16 at 16:14

This is normal behaviour. First, the class second_column of your site is set to max-width:100%. This means it has no fixed width. You won't notice this on a pc screen, but if you reduce you browsers width to mobile size, you will see the text column becoming narrower. This is good, because it means that your site adapts to mobile screens.

However, it also means that there is no such thing as "the width of the text area of my website" and your text editor can't adapt to that.

I don't know if you already use add_editor_style to make editor use the same css as on your site. That's handy for fonts, colours and so on. But if you include the width statement, that still would refer to the width of the editor frame, which normally is fixed. However, with the following code in your functions.php you can change that width:

function wpse236313_width_text_editor() {
  echo '<style type="text/css">
    .wp-editor-container textarea.wp-editor-area,
    .wp-editor-container #content_ifr {
    max-width: 620px;
    border-right: 1px solid #ddd;
add_action('admin_head', 'wpse236313_width_text_editor');

Note that this still means you get different text wrapping on smaller screens than shown in the visual editor.

|improve this answer|||||
  • Thanks so much for the quick, detailed reply! I think I now understand the reason that my code doesn't work. Unfortunately, you're code snippet for 'functions.php' didn't work. Doesn't that width just add some custom CSS into the head of the document? For some reason, changing the CSS isn't working and I can't pinpoint why not. – real_big_words Aug 19 '16 at 12:55
  • Glad to help you gaining insight. The snippet worked fine in my test installation, in the TEXT editor, not the VISUAL editor. I've updated the answer so it also works in the visual editor. – cjbj Aug 19 '16 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.