Make the WordPress Editor Look Like Your Front-End

The WordPress Editor – that place where you write and format so much of your content – is supposed to be WYSIWYG (“What you see is what you get”). But while it does showcase basic styling in real time, it’s not truly WYSIWYG because the formatting in the Visual tab of your WordPress Editor doesn’t actually match how your content looks on your front-end website.

As a result, you’re forced to hit the Preview button over and over to see how your post will look once published. But what if there were a better way? A way that let you skip the incessant alt-tabbing and previewing and see your final product right in the WordPress Editor? There is, and I’m going to show you how to do.

In this post, I’ll show you how to emulate the WordPress front-end inside the WordPress Editor.

You’ll need to get your hands a little dirty…

Unfortunately, unlike customizing the WordPress admin, there aren’t any plugins that will make your WordPress Editor automatically emulate your front-end website. That means you’ll need to dig in and get your hands a little dirty. But I promise you I’ll make this as painless as possible. And when you’re done, you’ll have the satisfactory feeling of making your WordPress Editor look like this:

Emulate Front-end With WordPress Editor

To make these changes, you’ll need to use something called a stylesheet. These are the files in your WordPress theme that end with .css. They essentially control how your site looks (hence the style part!).

By default, your front-end WordPress site has one set of stylesheets (included with your theme), and the WordPress Editor has its own, separate stylesheet. That’s why the WordPress Editor looks different from your front-end site – it’s running off a different set of style rules. To make them look the same, you’ll need to edit the style rules for the WordPress Editor.

Unfortunately, that means that you will need to know at least some basic CSS. But like I said, I’m going to try to make this as painless as possible.

Now that you know the main goal, I’ll take you through the four steps you need to complete.

For this example, I’ll use ThemeIsle’s free Zillah theme. But you should be able to follow the exact same steps no matter which WordPress theme you’re using.

Step 1: Create a custom stylesheet for the WordPress Editor

Actually, I take that back. The first step you need to complete is to back up your WordPress site. Only after you have a safe backup of your site should you proceed with the rest of these steps.

Now, it’s time for the real first step. You need to create an empty stylesheet called “custom-editor-style.css”. To do this, you can just open a new document with Notepad (or an equivalent program) and save it as a “.css” file like this:

make-wordpress-editor-look-like-website2

You’ll add your custom CSS to this stylesheet. Simple enough so far, right?

Step 2: Add CSS to Editor stylesheet to mimic your theme

Now is where things might get a little tricky. This is, unfortunately, the part where you need to know some CSS.

In this step, you need to add all of the necessary CSS code to the stylesheet you just created so that your WordPress Editor can properly emulate your front-end website. One way to do this is to actually browse through the “stylesheet.css” located in your theme’s folder:

make-wordpress-editor-look-like-website3

But, that would require you to be a CSS ninja and only select certain bits of code. That’s no good!

There’s an easier way…

Thankfully, there’s an easier way using Google Chrome’s Developer Tools. You could also use Firefox’s Developer Tools, but I’m going to use Chrome for the screenshots because that’s my preferred browser.

First, you need to go to a post on your live site. Then, right-click on an element in your post and click Inspect. For example, I’ve created a post that uses both an <h2> tag and a regular <p> tag:

make-wordpress-editor-look-like-website4

The Developer Tools window should pop up on the right of your screen. You need to find the relevant style in the Styles box. I’ve marked it in the screenshot below. See how it says h1, h2, h3 at the top? That’s how you know it’s the style you need to copy:

make-wordpress-editor-look-like-website5

Then, you need to copy that whole style and add it to the blank stylesheet you created for the WordPress Editor:

make-wordpress-editor-look-like-website6

Repeat this process for every element in your post – that means you’ll need to right-click and inspect regular text, links, images, bullet lists, etc. Essentially, you need to follow this process for anything that you want to replicate the style of.

I know this is a little tedious, but it’s the best way unless you know enough CSS to dig through your theme’s stylesheet or create CSS code from scratch.

By the end, you should get something like this:

make-wordpress-editor-look-like-website7

I know that if you’re a CSS beginner it might seem like I’m throwing you straight into the deep end. Sorry about that! If you need help, here are some additional resources that can hopefully serve as a life preserver:

Step 3: Upload new stylesheet to your theme’s folder via FTP

Once you’ve finished adding all of the necessary styles, you need to use an FTP program to upload your new stylesheet (the one called “custom-editor-style.css”) to your theme’s folder.

You can find your theme’s folder by going to “…/wp-content/themes/NAME”.

Upload your stylesheet in the same theme folder as other files like “functions.php” and “stylesheet.css”:

make-wordpress-editor-look-like-website8

Step 4: Tell the WordPress Editor to use this custom stylesheet

Final step, I promise! Now you just need to add some code to the “functions.php” file of your theme (ideally, a child theme) to tell the WordPress Editor to use the custom stylesheet that you created.

To do that, go to Appearance → Editor → functions.php (remember, ideally you’re using a child theme). Then, add this code snippet to the bottom of your functions.php file:

/**
* Registers an editor stylesheet for the theme.
*/
function wpdocs_theme_add_editor_styles() {
add_editor_style( 'custom-editor-style.css' );
}
add_action( 'admin_init', 'wpdocs_theme_add_editor_styles' );

Here’s what the functions.php file looks like:

make-wordpress-editor-look-like-website8-1

Don’t worry – this code comes from the official wordpress.org repository and does nothing more than connect the WordPress Editor with your new stylesheet.

Once you’ve added the code snippet, just save your changes and you should see your front-end styles when using the WordPress Editor!

make-wordpress-editor-look-like-website9

Wrapping things up

I know, I’m sorry…

You can’t just install a plugin and make your WordPress editor look like your front-end website. If only it were that easy…

But, the CSS knowledge required really isn’t that much. And with liberal use of Google Developer Tool’s Inspect Element, you should be able to quickly pick out only the necessary styles.

Overall, all you need to do is:

  1. Create your custom WordPress Editor stylesheet
  2. Add any necessary/desired CSS to emulate the WordPress front-end
  3. Upload that stylesheet to your theme’s folder via FTP
  4. Link the stylesheet by adding a code snippet to functions.php of your child theme

And then you’re set to jet!

If you have any questions, leave them in the comments section and I’ll try to answer!