Resizing the width of the WYSIWYG editor

Question

Just a simple question here but though my googling and searching efforts haven't found the answer to it. I'm wanting to re-size the width of my WordPress WYSIWYG editor to be 650px. What do I have to type into functions.php to get this effect?

I found this but it didn't do anything

add_action('admin_print_styles-edit.php','increase_textarea_css');
add_action('admin_print_styles-post-new.php','increase_textarea_css');

function increase_textarea_css() {
    ?>
    <style type="text/css">
    textarea#content { width:650px!important; }
    </style>
    <?php
}

Answer 1

The WYSIWYG uses the .wp-editor-container class. So the easiest way would be to change this in your CSS. If your style is being overwritten then just add !important.

.wp-editor-container {
    width:50%; // What ever size you want
}

the wp_editor() function also allows us to add a class to the textarea tag, I'm not sure if this might help you. Here's how though:

<?php wp_editor( $content, $editor_id, $settings = array( 'editor_class'=>'yourclass' ) ); ?>

You can take a look at the documentation here: wp_editor - Codex

Answer 2

#post-body-content it is.

I did not have to use any !important:

#post-body-content {
    width:50%;
}

Note: This belongs into an admin-style.css you use for styling the admin area in general. (not any possible editor-style.css you might have to style the inertia of the tinymce iframe). This is how to include the css in functions.php:

function add_admin_style() {
    echo '<link rel="stylesheet" type="text/css" 
        href="'.get_bloginfo('template_url').'/admin-style.css">'; //adjust your path
}
add_action('admin_head', 'add_admin_style');

Going 'further down' in the DOM tree for styling would leave higher level blocks 'oversized'. That is also true (hence: a bad approach), if you went for the respective tinyMCE option:

function config_tinyMce($init) {
    $init['width'] = '620';
    return $init;
}
add_filter('tiny_mce_before_init', 'config_tinyMce' );

If you want a particular inner editor width (in an ideal world to have identical line wrapping between editor and a fixed-column live for instance), well

• either 'do the math', so keep adjusting the (outer) width value above, until the inner width fits (might still vary a bit from browser to browser for different scroll bar widths etc.
• or make it 10-20px oversized (by the means above), and do the precise finetuning then with the tinyMCE config filter.

update: Well, maybe do the enitre math with the tiny_mce_config option, leaving #post-body-content alone. Sure, in WYSIWYG view it's nice, if the outer box isn't much bigger than actual column width. In plain HTML view however one makes his live unnecessarily harder by not being able to see longer lines of code at once.