{"id":3952,"date":"2016-12-05T16:36:40","date_gmt":"2016-12-05T14:36:40","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=3952"},"modified":"2023-12-11T02:43:52","modified_gmt":"2023-12-11T00:43:52","slug":"wordpress-editor-emulate-website","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/wordpress-editor-emulate-website\/","title":{"rendered":"How to Make the WordPress Classic Editor Look Like Your Front-End Website"},"content":{"rendered":"

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 <\/strong>tab of the WordPress classic editor didn’t actually match how your content looked on your front-end website.<\/p>\n

<\/p>\n

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

The Block Editor is a much more true-to-form<\/em> 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)<\/a> 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<\/a> to create reusable blocks<\/a>, block patterns<\/a>, and sitewide templates<\/a> for things like your header<\/a>, your homepage<\/a>, your navigation menu<\/a>, and more.<\/p>\n

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.<\/p>\n

\n
\n

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.<\/p>\n

Let’s get to it!<\/p>\n<\/div><\/div>\n

\n\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tStill using the #WordPress classic editor but sick of the preview button? Make it #WYSIWYG instead!<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div><\/div>\n<\/div>\n
<\/div>\n

You’ll need to get your hands a little dirty \ud83d\udcaa<\/h2>\n

Unfortunately, unlike customizing the WordPress admin<\/a>, 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\u00a0as possible. And when you’re done, you’ll have the satisfactory feeling of making your WordPress classic editor look like this:<\/p>\n

\"Side-by-side<\/p>\n

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

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.<\/p>\n

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

Now that you know the main goal, I’ll take you through the four steps you need to complete.<\/p>\n

For this example, I’ll use ThemeIsle’s free Zillah theme.
\n

\n\u26a0\ufe0f Editor’s note<\/strong>: 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<\/a>, and not a block theme like Neve FSE<\/a>.
\n<\/div><\/div>\n
<\/div>\n

How to make the WordPress Classic Editor into WYSIWYG in 4 steps \ud83d\udc40<\/h2>\n