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


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

2 Answers 2


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

  • Thanks for the reply. I'm still having difficulties. Your code didn't work, so I put the !important but it still didn't take. I then looked harder at the editor with Firebug and got the #post-content-body which I thought would surely work however again the same case. It works when I'm doing it with firebug but not in the actual stylesheet of my theme. And what about passing a class? I'm not understanding that wp_editor - Codex page at all. Does it overwite the existing class so I may use my own class for the editor? So I just swap out 'yourclass' for my own? Thanks again.
    – kia4567
    Commented Jun 9, 2012 at 18:25
  • I believe it will add the class on not swap it out. But you can overwrite what the other class states. Check in firebug if your class is being loaded to the div. Also make sure your looking at the right div container. Commented Jun 9, 2012 at 18:34
  • I have tried everythign I can to resize this editor. I've used firefox to find the id #post-body-content and even put an important tag in there. However the style doesn't show up. I'm using toolbox theme and I just don't understand why it's not working..Can you spare some advice as to why this still isn't working?
    – kia4567
    Commented Jun 11, 2012 at 18:08

#post-body-content it is.

I did not have to use any !important:

#post-body-content {

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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