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.

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?

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?

share|improve this question
    
links to site show forbidden messages –  Tom J Nowell Mar 28 '13 at 21:59
add comment

4 Answers

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:

enter image description here

share|improve this answer
add comment

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?

share|improve this answer
    
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
add comment

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');
share|improve this answer
add comment

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
);
share|improve this answer
add comment

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.