This is my current code:

$initial_data = $this->options['my_plugin_editor'];
$settings = array(
    'quicktags' => array('buttons' => 'em,strong,link',),
    'quicktags' => true,
    'tinymce' => true,
    'textarea_rows' => 20,
$id = 'my_plugin_editor_options[my_plugin_editor]';

The problem is I am unable to set the width of the editor. I can set the height 'textarea_rows' => 20, but I am not aware of a way how to set the width(cols).

If I am using a standard textarea without an editor, this is working well cols="120"

How to set cols in wp_editor function?


There are two parameters that you can use to change the size of the text editor generated with wp_editor(), here there are:

$settings = array(
    'editor_height' => 425, // In pixels, takes precedence and has no default value
    'textarea_rows' => 20,  // Has no visible effect if editor_height is set, default is 20
  • If editor_height is provided, its raw value will be used
  • Otherwise textarea_rows (or it's default value of 20) will be used to calculate the matching height in pixels

Good to know:

Here are a few examples of the result of the conversion from textarea_rows to pixels (this is done on the client side):

  • 0 to 3 => 100
  • 4 => 113
  • 5 => 133
  • 10 => 230
  • 15 => 328
  • 20 => 425
  • ...
$settings = array(
    'tinymce' => array(
        'width' => 200

Gives you a tinymce that is 200px wide. Found it here: http://www.tinymce.com/wiki.php/Configuration

When I tried it the background color of my tinymce changed. So maybe you have to tweak that.


OK, here's what I just did that works well:

echo "<div style='width:75%;'>";
wp_editor( $content, 'myid', $settings );
echo "</div>";
  • While I suppose this works, I suggest adding the parameter instead, as outlined in other answers.
    – Christine Cooper
    Apr 25 '19 at 8:54

I'm not sure if you even can set the cols"number" in the array.

But one way to achieve what you want, would be by adding a class to your wp_editor.

 $settings = array(
'quicktags' => array('buttons' => 'em,strong,link',),
'quicktags' => true,
'tinymce' => true,
'textarea_rows' => 20,
 'classes' => 'yourclass',

or when you're calling the wp_editor:

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

Then just set width in css:

 .yourclass {
   width: 400px !important; //add !important if your style is being overriden 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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