wordpress editor

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.

In this post, you’ll learn how to emulate the WordPress front-end inside the WordPress classic editor to give it a more WYSIWYG feel.

Let’s get to 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:

Side-by-side example of showing the WordPress classic editor as it normally looks and how it looks after following this tutorial

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.

⚠️ Editor’s note: this theme is no longer available, but you should be able to follow the same steps with whatever WordPress theme you’re using, as long as it’s a classic theme like Neve, and not a block theme like Neve FSE.

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

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:

Saving a custom CSS file in Notepad

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:

Browsing the stylesheet.css file

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:

Right-clicking on an element in a live post and clicking Inspect

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:

Using the Inspect tool to find h1, h2, h3 tags in a live post

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

Adding copied style to custom CSS file

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:

Custom CSS code snippet

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

Uploading custom stylesheet via FTP to make WordPress classic editor look like website

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:

functions.php file

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!

End result showing WordPress classic editor looking like front-end of website

Wrapping things up 🏁

There you have it. If you’re up for the task, the CSS knowledge required really isn’t that much. Plus 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 classic 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 the functions.php of your child theme
And then you’re set to jet!

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!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

4 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Coen Naninck
January 20, 2018 1:39 am

There is another easy way to do this which some people may find less challenging which I’m using on my own website. (Don’t let the length of this comment deter you, the text after step 7 is just additional info.) Follow these steps: 1) Browse to your WordPress theme directory at /wp-content/themes/name_of_theme/ and open style.css (or if your CSS is contained in another or multiple files, open all of them). 2) Select all of your website’s CSS and copy it to the clipboard. 3) Browse to TinyMCE’s editor skin directory at /wp-includes/js/tinymce/skins/wordpress/ and open wp-content.css in your editor of choice. 4) At the bottom of wp-content.css paste all of your website theme’s CSS (make sure it sits at the bottom otherwise TinyMCE’s CSS will override your own CSS) and make sure to include any custom font declarations. (If you have multiple CSS files just repeat steps 1 to 4 for each file.) 5) Save wp-content.css. Note: this assumes you’re editing the file directly on the server, but you can also download it, edit it, save it, and then upload the file. 6) Go to your web browser’s ‘Clear browsing data’ settings page and clear the cached images and files for… Read more »

Weez
January 14, 2018 3:43 pm

Hi, I followed this exactly and it didn’t seem to work, even with a hard refresh…still sticks to the defaults. Is there anything else I need to do?

Amrit Anand
September 19, 2017 5:35 pm

Nice and informative article. Very easy to follow. Keep up the nice work!!!

Motaz Homsi
January 12, 2017 10:31 pm

Nice Article , some customers feel bad when they see the backend texts , this is a nice solution (y)

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!