• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Load all frontend CSS styles in WordPress block editor

Find out in this tutorial how to display the same frontend styles in WordPress block editor.

In previous tutorials I already explained how you can support editor styles in a WordPress theme and how to load a specific stylesheet for the editor.

But maybe what you are interested in is to use the same stylesheet of the website frontend so that it is also applied in the editor and thus gives you a similar experience between the two.

Let’s see how you can achieve this:

Snippet to display the frontend CSS styles in the block editor

Add the following snippet in functions.php:

To see this and another 847 code snippets of this website, login or subscribe here.

With this code you make sure to give support to the styles of the editor and indicate the stylesheet that is going to load, in this case those of the front end.

In this example, the file that would be loading is the style.css that is in the root of the theme. If it is in a subfolder or has another name you only have to modify it in the snippet.

If you are creating a new theme I encourage you to consider using the theme.json for styling since what you define in this file will be reflected both in the frontend and in the block editor.

Conclusions

Now you know how to use the same CSS stylesheet for the frontend and the block editor

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂


Block Editor CSS PHP

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?