How to Make the WordPress Classic Editor Look Like Your Front-End Website

The WordPress classic editor – that place where most of us used to write and format so much of our content – was supposed to be WYSIWYG (“What you see is what you get”). But while it did showcase basic styling in real time, it wasn’t truly WYSIWYG because the formatting in the Visual tab of the WordPress classic editor didn’t actually match how your content looked on your front-end website.

In practice, you were forced to hit the Preview button over and over to see how your post would look once published. Fortunately, all of that changed after the WordPress Block Editor became fully integrated into the core software with the release of WordPress 5.0.

The Block Editor is a much more true-to-form WYSIWYG editor and it’s what most people use these days when working with WordPress. With the additional integration of the Full Site Editor (FSE) as part of the WordPress 5.9 release, almost all aspects of WordPress became customizable in a similar WYSIWYG fashion. You can use FSE along with a block theme to create reusable blocks, block patterns, and sitewide templates for things like your header, your homepage, your navigation menu, and more.

In short, the WordPress ecosystem has changed for the better. However, for those among you who have held on for dear life to the classic editor and would like a way to preview your posts right in the WordPress classic editor, then continue reading. I’m going to show you how to do it.

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 classic 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 classic editor look like this:

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 classic editor has its own, separate stylesheet. That’s why the WordPress classic 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 classic 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.

How to make the WordPress Classic Editor into WYSIWYG in 4 steps 👀

• Step 1: Create a custom stylesheet for the WordPress classic editor
• Step 2: Add CSS to Editor stylesheet to mimic your theme
• Step 3: Upload new stylesheet to your theme’s folder via FTP
• Step 4: Tell the WordPress classic editor to use this custom stylesheet

Step 1: Create a custom stylesheet for the WordPress classic 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:

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 classic 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:

But, that would require you to be a CSS ninja and only select certain bits of code. Therefore, it’s not very practical.

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:

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:

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

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:

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:

• How to Change the CSS of a WordPress Theme (and Not Go Crazy)
• w3Schools CSS Tutorial
• How to customize a WordPress theme

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 like FileZilla 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”:

Step 4: Tell the WordPress classic 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 classic 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:

Don’t worry! This code comes from the official wordpress.org repository and does nothing more than connect the WordPress classic 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 classic editor!

Wrapping things up 🏁

Overall, all you need to do is:

However, keep in mind what I said at the start of this tutorial, which is that all of this is rather unnecessary at this point. All you need to do is make sure that you’re using the latest version of WordPress or update your WordPress if you’re not. That will enable you to access the WordPress Block Editor, which will automatically function as a WYSIWYG editor.

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