Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

Full-Width Distraction-Free Writing

Enlarge DFW (Distraction-Free Writing) mode to fill the screen's width, giving users a real fullscreen editor.

Full-Width DFW allows you to use the complete width of your browser window for editing in DFW mode. Simply hit the DFW button, in the upper right corner of the editor, and the editor will expand to fill the width of your window.

Learn More at:
  • Preview your full-width content at the viewport sizes it will display
  • Correctly render responsive styles in editor stylesheets
  • Get rid of wasted space
Author Gregory Schoppe
Contributors gschoppe
Tags big, DFW, distraction-free, editor, enlarge, expand, full width, fullscreen, fullwidth, media queries, TinyMCE
  1. full-width-distraction-free-writing screenshot 1

    Where to find the DFW button

  2. full-width-distraction-free-writing screenshot 2

    What the full width editor looks like

You can use the built in installer and upgrader, or you can install the plugin manually.

From your WordPress dashboard

  1. Visit 'Plugins > Add New'
  2. Search for 'Full-Width Distraction-Free Writing'
  3. Click Install
  4. Activate Full-Width Distraction-Free Writing from your Plugins page.


  1. Download Full-Width Distraction-Free Writing.
  2. Upload the 'fullwidth_dfw' directory to your '/wp-content/plugins/' directory, using your favorite method (ftp, sftp, scp, etc...)
  3. Activate the Full-Width Distraction-Free Writing plugin from your Plugins page.

Once Activated

  1. Edit or Create a Post, Page, or Custom Post Type
  2. Click the DFW button on the right hand side of the visual editor's toolbar
  3. Click the DFW button again, when you want to return to windowed mode.


  • Initial Release

Q. I installed the plugin, and nothing changed. What gives?

A. Full-Width Distraction-Free Writing does nothing until you click the DFW button in the WordPress editor.

Q. Why would you want this?

A. I often design sites to use a max content area size of 1200px. On a 1440x900 laptop, that width cannot be seen in the normal WordPress editor. If I include my media queries in the editor stylesheet, I can't preview them live, without a bigger monitor.

Q. Can I integrate Full-Width DFW in my theme/plugin?

A. I'd love to see plugin integrations, but reach out to me first, at There are some caveats with integration that I can help you navigate. For themes, I'd prefer if you list it as a suggested or required plugin with your theme. It's always best if there is a single source for updates and improvements

Q. Why does your editor look so much cooler than mine, in the screenshots?

A. Stay Tuned ;)

Q. Your plugin is bad, and you should feel bad!

A. That's not really a question, but at least our moms like us. Feel free to send your 'constructive criticism' to, or leave us a review/rating.


Full-Width Distraction-Free Writing has been fully tested in the following browsers:

  • Safari
  • Chrome
  • Firefox
  • Opera
  • Microsoft Edge
  • Internet Explorer 9-11
  • IOS 7+
  • Android 4.0+
  • Windows Phone 8.1

This is by no means an exhaustive list of supported devices; it just represents our primary target platforms.


Please Rate/Review and Enjoy

Your Ratings and Reviews help us to direct our development, and help other users know what to expect.

Version 1.0.0

Requires WordPress version: 3.5.0 or higher

Compatible up to: 4.6.3

Last Updated 14 Oct 2016

Date Added: 14 Oct 2016

Plugin Homepage


0 stars
0 ratings


Not Enough Data

Works: 0
Broken: 0