Resizing the wordpress editor

Question

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

UPDATE

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?

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?

Answer 1

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 { 
    width:600px;
    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:

Answer 2

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">
  #post-body-content,
  .postdivrich {
    width:650px !important;
  }
  </style>';
}

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');
}
add_action('wp_enqueue_scripts','my_admin_styles');

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

Answer 3

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');

Answer 4

Try to explicity set the width of the editor

add_filter(
    'tiny_mce_before_init',
    function( $in ) {
        $in['width']  = '600px';
        return $in;
    }
);

add_action(
    'admin_init',
    function() {
        add_editor_style( 'custom-editor-style.css' );
    }
 );

You also should resize the container where the editor is in

add_action(
    'admin_print_scripts-post-new.php',
    function() { echo '<style>#wp-content-wrap, #post-status-info { width: 600px; }</style>'; },
    10,
    0
);