WordPress: Changing the Width of Your Post Editor

WordPress: Changing the Width of Your Post Editor

WordPress is a fantastic blogging tool, but unfortunately it is not perfect. Even after numerous of updates, and hundreds of added features some of the basic usability is still in need of work.

I have recently written a number of long list type posts such as “WordPress Photography Themes (Best of the Best)” and while doing so discovered a problem with the WYSIWYG post editor that I had not previously been aware of – or at the very least had only affected me in the smallest way.

The Problem

When creating these long posts (mainly images), I was forced to save and preview the post often to ensure that the list was formatting properly. In addition I often had to write text to the right of my image due to the post editor being almost 1.5 times larger than that of my images (and the main content area of my website).

See the image below:

overlapping post

The Solution

The solution is relatively simple, but you have to know how to accomplish it. Firstly you will need to know the width of your websites content area. In my case the blogs main post area is 650 pixels wide. You will then want to open your functions.php file and add the following code at the bottom of the file, but just before the final ?>

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

The result we are looking for is a post editor that mimics the exact width of your main content area. This will ensure that when you create a blog post in the administration dashboard it will look as close to the finished result as is possible.

Bear in mind that some screen resolutions will have to alter your screen options to show only 1 column depending upon your content width.

set post editor width

Smarter blogging Smile