• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Nifticious

building seriously nifty websites, minus the geekery

  • Genesis
  • Rainmaker

Making your Genesis theme Gutenberg ‘compatible’ pt 2

Videos in the series

  • Introduction
  • Adding Wide and Full support to Genesis
  • Adding a custom class for Gutenberg content to Genesis
  • Remove existing Genesis content containers for Gutenberg content
  • Add a new Genesis content container for non-wide and non-full width Gutenberg content
  • Adjusting the appearance of Gutenberg wide and full-width content in Genesis
  • Adjusting the Genesis theme for left and right aligned images

Adding Gutenberg Wide and Full support to Genesis themes.

The first step in adding the Gutenberg full and wide align features to our Genesis theme, is to add support for those features in the theme.

This will provide us with two new options in the editor when we are adding content blocks such as images. 

In this video I will cover the code to add to your Genesis theme to enable the full and wide feature, and we will use the demo Gutenberg post to make sure the feature is added correctly and how it looks for our website visitors.

Video Instructions – click play

Text Instructions

To add the Gutenberg full and wide features to your Genesis theme, open the functions.php file of your theme in your code editor.

Copy the below code and paste it into the functions.php, after the last ‘}’.

/*
* Gutenberg Compatibility
*/

// Add support for full and wide align images.
add_theme_support( 'align-wide' ); 

Once you have saved the code and refresh the Gutenberg editor, click on an image and you should see wide and full width icons added to the options available.

Gutenberg Full and Wide width options for images

Filed Under: Genesis Framework Tagged With: Gutenberg

Primary Sidebar

Hi There 👋, it's great to see you!

I promise I'm not spying on you, but I've noticed you've watched a few tutorials on how to do more with the Rainmaker Platform.

If you are looking to hire someone that can help you with your Rainmaker website, head over to my Contact page and send me an email.

But if you just want to keep watching the free tutorials, that's absolutely fine.

Happy Browsing 😀

Copyright © 2023 · Genesis Sample on Genesis Framework · WordPress · Log in

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.