Please find here: Instructions detailing how to get front and back-end, Matching Styles in WordPress Editor. Many clients ask for this feature! Check this out if you have experienced already, the frustration of using stock settings, which don’t match the styles of your site. In truth it makes a lot of sense to be able to preview front-end changes in the content editor without refreshing a separate tab, does it not? Here are three easy file changes, that quickly enable front and back-end matching styles in the WordPress content editor.  

For the verbose edition check out the original article at https://premium.wpmudev.org/blog/emulate-wordpress-front-end/ If you just want to know how to do it, then take a look at these three steps. After that, I’ll talk briefly about why you would want matching styles in your content editor in the first place.

First, create custom-editor-style.css in your theme’s root folder.

Second, add the following to functions.php in your theme’s root folder.


// Connect the WordPress post editor to your custom stylesheet
function my_theme_add_editor_styles() {
  add_editor_style( 'custom-editor-style.css' );
}

add_action( 'admin_init', 'my_theme_add_editor_styles' );


Now, you just need an @import rule in your custom-editor-styles.css to grab the css file that has the styles you want to include in the editor view. To figure out which style sheet manages your site’s typography, try inspecting a paragraph from the front-end and identifying the source file of the font-family attribute.  Here’s the basic idea:

@import url('http://yoursite.com/path-to-your-css-file');

Here’s the line I used for my Gantry 5 site:

@import url(/wp-content/themes/g5_hydrogen/custom/css-compiled/hydrogen.css);

Log in to your site’s administrative dashboard, and try editing a post or page. Now you should see some updated styles! If you don’t, go back and check over your paths and file names for typos.  That sums up the instructions, please continue to reading to find out the reasoning behind this technique of matching css styles front and back.

The main reason to match styles appears to me, in order to respect your less savvy editors.  Often the client or site-owner will request matching styles explicitly, even if they won’t edit the site themselves they may still want the functional ability to do so.  Only code wranglers can easily format content in their minds.  Even so, it seems nice when you don’t have to guess how a certain element will render.  Normally you can have the live page open in another tab, and keep refreshing.  Matching your front and back-end styles can reduce the number of times a designer has to jump between editing and proofing. Here you can see it working from the back-end:

matching-styles-in-wordpress-editor

If you are purchasing web products or related services, make sure to note:  Will my site have matching front-end and back-end styles?  If you provide web services, why not leverage a note about matching styles in your marketing perks, or offer it as a platinum feature for your most important clients?

I’d like to hear your experiences in web design.  Do people mostly request this feature or overlook it?  How highly do you value the ability for regular users to easily edit content?