Saturday , 19 April 2014
Home | Articles | Wordpress | Change the WordPress Editor Width
Change the WordPress Editor Width

Change the WordPress Editor Width

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 Joe DiFiglia

I have always had a passion for everything computing. In early 2000, I decided to take my passion to the web. Thus, C.O.D. was born. Through the years we have made many great friends at C.O.D. and hope to continue our journey for years to come.