• 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

Adding a CSS class to pages that use WordPress block editor

Learn how to insert a CSS class in the pages that use WordPress block editor in your Genesis Framework child theme by code.

The block editor not only modifies how you create entries (using blocks), but also how they are displayed.

And, depending on the child theme, this change will be more or less noticeable.

The first thing you have to do in order to adapt the design to your aesthetic needs is to apply styles to the new blocks.

But you can also give a CSS class to the pages that use the block editor to apply certain styles only on them.

Would you be interested in this? The, use the following code.

Snippet to insert a custom CSS class to WordPress block editor pages

Add the following line in functions.php:

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

Conclusions

Now you know how to do introduce a CSS class to pages that use the block editor by code.

If you’re interested in adapting a child theme to WordPress block editor, check out the tutorial that includes all the changes you need to make to make sure your child theme is compatible with the block editor.

Any questions? I read you in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉

Block Editor CSS Page PHP WordPress

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?