• 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

Add support for full and wide width images in a Genesis child theme

Learn how to make a Genesis child theme compatible with the full and wide width image sizes of WordPress block editor.

Among the features of the WordPress block editor, there are 2 new ways to display images.

Before this, in WordPress the pictures had three possible alignments: to the right (alignright), to the left (alignleft) and to the center (aligncenter).

The block editor introduces 2 alternatives: wide width (alignwide) and full width (alignfull).

wide-full-width-images-block-editor

In the first one, the image takes up a little more space than the page container and in the second one it takes up the whole width.

Gutenberg-wide-width-block-editor-image
Wide width

In order for them to display correctly in the block editor you must give them support in your Genesis theme and CSS styles.

Gutenberg-full-width-block-editor-image
Full width

Instructions for supporting full width images

Add the following line in functions.php:

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

With this step, the new alignment options will appear in the image block.

But for the images to be displayed correctly and take up the space they should, you must give style to the new classes.

To do this, enter the following code in style.css:

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

Styles may vary depending on the Genesis child theme.

In this case, I used Genesis Sample as an example. However, you can get the effect you want with any other Genesis child theme.

Conclusions

You only need one line in functions.php and adapt the look through CSS to get your Genesis Framework child theme to use and show correctly the WordPress block editor wide and full width image sizes.

If you want more information about how to adapt Genesis child themes to the WordPress block editor, take a look at how to add a specific color palette or restrict it.

You can also check 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 Genesis Framework 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?