Change the WordPress Editor Width

1
Posted September 2, 2011 by Joe DiFiglia in Articles
wordpress-thumbnail-logo



A friend of mine recently went through some issues with WordPress and the WYSIWYG editor.  His theme’s content width is 620px, but the editor is as wide as his screen.  With that said, when he would create a post and insert pictures he would have to preview the post over and over to make sure things were falling into the right places.  Fortunately, there is an easy fix for this.

Open your functions.php file and add the following code:

// --------------------------------------------------------------------------
// Start Modify Editor Width
// --------------------------------------------------------------------------
    function fb_change_mce_buttons( $initArray ) {
    $initArray['width'] = '620px';
    return $initArray;
    }
    add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');
// --------------------------------------------------------------------------
// End Modify Editor Width
// --------------------------------------------------------------------------

Here is a list of things you can change with this function (these are the defaults from WordPress)

    'mode' => 'specific_textareas'
    'editor_selector' => 'theEditor'
    'width' => '100%'
    'theme' => 'advanced'
    'skin' => 'wp_theme'
    'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
    'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
    'theme_advanced_buttons3' => ''
    'theme_advanced_buttons4' => ''
    'language' => 'de'
    'spellchecker_languages' => 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
    'theme_advanced_toolbar_location' => 'top'
    'theme_advanced_toolbar_align' => 'left'
    'theme_advanced_statusbar_location' => 'bottom'
    'theme_advanced_resizing' => true
    'theme_advanced_resize_horizontal' => false
    'dialog_type' => 'modal'
    'relative_urls' => false
    'remove_script_host' => false
    'convert_urls' => false
    'apply_source_formatting' => false
    'remove_linebreaks' => true
    'gecko_spellcheck' => true
    'entities' => '38,amp,60,lt,62,gt'
    'accessibility_focus' => true
    'tabfocus_elements' => 'major-publishing-actions'
    'media_strict' => false
    'paste_remove_styles' => true
    'paste_remove_spans' => true
    'paste_strip_class_attributes' => 'all'
    'wpeditimage_disable_captions' => false
    'plugins' => 'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'

Note: Some of these functions are not of my own creation, simply things I have found along the way. If you are the author of this function, please let me know so I can properly credit you with your work!


About the Author

Joe DiFiglia

In early 2000 I became increasingly frustrated with hardware review sites praising less than satisfactory products. The saying: “if you want something done right, do it yourself” applies here. I wasn’t satisfied, so I did it myself; and here we are years later.