Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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
}
share|improve this question

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 over written then just add !important.

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

the wp_editor function also allows us to pass a class to the not sure if this might help you. Here's how tho:

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

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

share|improve this answer
    
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 Jun 9 '12 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. –  Kirill Fuchs Jun 9 '12 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 Jun 11 '12 at 18:08

#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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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