Customized WYSIWYG Editor Page Widths Plugin

The current admin WYSIWYG editor will expand to the size of your monitor. On modern monitors that can be very wide and as a result your content will stretch out beyond the normal bounds. The current solution is to minimize your window until the editor is about the right size. But depending on the width of other elements and sections this can create an unusable workspace in the admin section.

This plugin adds the ability to enforce a maximum page width in the WYSIWYG editor for a more realistic content window that matches your blog/site layout. Widths, in pixels, are configurable per each custom post type that supports an editor. So you can define a max width for blog posts, pages, content molecules (see: https://wordpress.org/extend/plugins/content-molecules/) along with any other registered custom post type from any other plugin. Or you can leave them blank to have a full width editor in the admin interface.

This gives you or your content creators a realistic view of how the text will wrap on the front end of your website. This improves the readability of your content by ensuring your paragraphs are not giant blocks of text.

This plugin will only affect the WYSIWYG Visual Tab. Your HTML source code will always use the full available screen real estate. It also uses proper CSS inclusion for page width styles for plugins that enable multiple stylesheet joining and compression meaning your server won’t make another costly request just for this resource.

Arbitrary section

1. Upload the plugin contents to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress Admin
3. Then navigate to Settings => Writing tab where you can specify the page width for each post type
4. Now when you edit or create content your Visual tab will constrict the content to the proper dimension

How do I specify page widths?

In the admin section, navigate to the Settings => Writing section. There you will find the “WYSIWYG Editor Page Widths” section that should list all available post types by their name, and respective fields for setting the max width in pixels.

Why must the width be between 10 and 5000 pixels?

Because I said so? 😀 Really because why would you need any other setting? In all seriousness though if you need a larger (or smaller) dimension just let me know and I’ll update the plugin.

Why must I specify the width in pixels and not EM’s or 960 Grid columns?

Well, that adds to the complexity and most layout widths are not measured in EM’s. 960 Grids are easily converted to pixels so I used the lowest common denominator.

How do I figure out the number of pixels used in my current site if I don’t know it already?

I suggest you look into using a DOM Inspector like Firebug or IE Developer Tools. Both will give you an option to hover over the content on the front end of your website and select a paragraph of text. Then you can check the computed width of that content (here’s a link I found on the web that should get you started: http://www.evotech.net/blog/2007/06/introduction-to-firebug/) Alternatively you could just try a series of sizes or use a piece of paper against your monitor to eyeball the measurement between the front end and the backend.

1.0

• Initial creation of plugin