I've been looking around on how to re-size the WYSIWYS editor for wordpress and have used firebug to re-size the #post-body-content but it doesn't resize ever. It will resize in the firebug application but not when I go to put it into my style.css for my toolbox theme.

#post-body-content {
    width:650px !important;

Is there something I have to put in the functions.php page?

Site is here


I've placed the provided code into my function.php file and it worked but only half of it. I've tried to place another style for another part I see but it doesn't apply the style. Am I only allowed one style in the new function?

enter image description here

The line just behind the content is the newly resized editor, but the content is still spilling past it. Would it be because of the Tiny MCE toolbar?

  • links to site show forbidden messages – Tom J Nowell Mar 28 '13 at 21:59

Instead of resizing the editor, resize the internal representation inside the TinyMCE instance so the content itself never passes the line. This way the editor can eb any width and the content will never be wider than it's intended to

Start by adding the editor style in functions.php

function my_theme_add_editor_styles() {
    add_editor_style( 'custom-editor-style.css' );
add_action( 'init', 'my_theme_add_editor_styles' );

Inside custom-editor-style.css put:

body#tinymce.wp-editor { 
    margin-left: auto;
    margin-right: auto;

This will center the content inside the editable area in a 600px wide column.

Using this method you can style the editable area to look like the front end, making the WYSIWYG editor far more realistic

e.g. my own site:

enter image description here

  • This is the correct method, but Tom's post has a few errors. Namely: margin-left: auto and margin-right: auto will center the content. The picture shows it left-aligned. Secondly, you should be able to just use "body". You don't need #tinymce.wp-editor (and it may not even work anymore. Outdated answer?) Because the style is in an editor-stylesheet, you don't need to specify anything related to TinyMCE. Just use normal css.. A generic body selector will not affect the WP admin page. Also you can use body.post-type-your-post to apply this only to specific post types -- super handy. – JamesHoux Jun 11 '19 at 15:36
  • The screenshot from my own site is just that, an example of a max width, it's not a literal screenshot of what the snippet will do. Afterall my screenshot contains premium typekit fonts – Tom J Nowell Jun 11 '19 at 18:25

You have to add the css to WordPress admin section within your theme functions.php file with one of these to actions:

function my_custom_css() {
  echo '<style type="text/css">
  .postdivrich {
    width:650px !important;

add_action('admin_head', 'my_custom_css');

Or if you want more control and will add more css, load a new css file in your theme folder like this in the folder css as stylesheet my-style.css:

function my_admin_styles() {
   if ( !is_admin() )
   wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/css/my-style.css',false,'1.1','all');

out of curiosity, why do you want to set the editor to 650px width?

  • Thanks for the reply. Please see the update in the question. And the reason why I want it to be the 650px width is this website is for a friend and she gets confused, so I figured I'd make the editor only 650px wide so she doesn't have to worry about being confused as to why the editor shows content to the right of a table shes put it but looks fine on the website itself. Or why it looks great in the editor but there are a bunch of line breaks on the page. The default WYSIWYG editor for wordpress isn't my favourite but for now it'll have to do.. – kia4567 Jun 11 '12 at 19:33
  • OK, i understand. You can add as many classes you want. The best to do is try in firebug and get it look as you want it to be. then add the styles within the tags: <style> .mystyleclass{} </style> I have updated the code with the class postdivrich and set the width to 650px. Try that and tell me if it works! – Pontus Abrahamsson Jun 11 '12 at 21:48
  • That's what I thought. I was doing that (just not with .postdivrich) but with the #post-content but nothing I do seems to resize the other part of this editor. I'm not sure what to do now. – kia4567 Jun 11 '12 at 23:21

Put the following in your functions.php file:

    function custom_max_width_editor() {
echo '<style type="text/css">#post-body-content textarea#content, #content_ifr { max-width:650px;}</style>';

add_action('admin_head', 'custom_max_width_editor');

Try to explicity set the width of the editor

    function( $in ) {
        $in['width']  = '600px';
        return $in;

    function() {
        add_editor_style( 'custom-editor-style.css' );

You also should resize the container where the editor is in

    function() { echo '<style>#wp-content-wrap, #post-status-info { width: 600px; }</style>'; },

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.