Advertisement
Tips

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

by

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.

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Code
    Creative Coding
    Advanced Use of Attachments in WordPress: Creating Custom Queries for AttachmentsAdvanced use of attachments in wordpress 400
    This tutorial is the second in a four part series in which you'll learn some techniques for working with images in attachments in WordPress which give you advanced options.Read More…
  • Code
    WordPress
    5 Quick Beginner-Friendly CSS Customizations That Make Your Blog Stand OutCssblog
    In this tutorial, we'll cover how to do five quick CSS customizations that make your blog stand out. Even if you don't know what CSS is, you'll be able to follow the instructions and change the standard look of your theme.Read More…
  • Code
    Creative Coding
    Using a Custom Post Type to Create a Home Page BannerUsing a custom post type to create a home page banner
    Sometimes it's useful to have a nice obvious banner on your site's home page—for announcements, snippets that aren't long enough to merit a blog post, or links to new content within the site. But you don't want to be editing your homepage content every time you add a new piece of content, nor do you want to be delving into the code to add content.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Adding Featured ImagesCreating wordpress theme from html 400
    You've now worked through a number of steps to create a WordPress theme from static HTML files. Specifically, we've looked covered the following: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages creating an archive template file. Your theme now has a template file for displaying archive pages, but at the moment it's not displaying images properly. In this tutorial, you'll learn how to add featured image support to your theme and how to display and style them in your archive template.Read More…
  • Code
    Creative Coding
    How to Modify the Parent Theme Behavior Within the Child ThemeHow to modify the parent theme behavior within the child theme
    What are child themes? Child themes are a useful WordPress feature that allows developers to build a new template without starting from scratch, but by taking advantage of all the features already available in an existing theme. Sometimes however, the parent theme we have chosen for our site may have some features that we don't need (or we need to customize to best suit our needs), for example custom post types with a different slug, Shortcodes, JavaScript libraries, image sizes that we don't use and so on...Read More…