Quick Tip: Visual Editor – Change Full Screen Width and Match Theme Style

When writing long articles the full screen mode comes in handy. The clutter gets out of the way, but it is annoying when the results look different than in the editor.

Set the Visual Editor Width Relative to Your Themes Content Width

Edit your theme’s functions.php and add the following code using the method called by the ‘after_setup_theme‘ action.

add_action( 'after_setup_theme', 'wptuts_theme_setup' );
function wptuts_theme_setup() {
    set_user_setting( 'dfw_width', 1000 );
}

In this example the full width will be 1000 pixels.

Style the Visual Editor to Match the Themes Style

Edit your theme’s functions.php and add the following code using the method called by the ‘after_setup_theme‘ action.

The path to the CSS files are relative to the theme’s root folder.

add_action( 'after_setup_theme', 'wptuts_theme_setup' );
function wptuts_theme_setup() {
    // /wp-content/themes/theme-name/css/my-first-style.css
    add_editor_style( array( 'css/my-first-style.css', 'css/my-second-style.css' ) );
}

Conclusion

Using this method you can be sure you will really get what you see. We hope you find this little tip helpful!

Let us know in the comments if you have any “quick win” style tips for improving your editing experience.