• 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 3

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 a custom class to Genesis themes for styling Gutenberg content.

In the previous video we added support for the Gutenberg full and wide blocks in our Genesis theme.

We are now in the process of looking at the front end of the website and adjusting the design of our Genesis theme so wide images are appearing wide, and full images are appearing the full width of the page.

Rather than try to patchwork together existing HTML body classes to make our design changes specific for full-width, Gutenberg created content, we can add some code to our Genesis theme which will assign a custom body class for that content only.

The custom body class can be used in the design changes we apply to our content, and that way we are not creating any potential conflicts with the non-Gutenberg content on our website.

Video Instructions – click play

Text Instructions

To add the custom body class 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 ‘}’.

add_filter( 'body_class', 'genesis_gutenberg_add_body_class' );
/**
* Add a custom body class to full-width posts or pages using Gutenberg blocks
*/
function genesis_gutenberg_add_body_class($classes) {
	
	if ( 'full-width-content' === genesis_site_layout() && (is_single() || is_page()) && !is_page_template() && has_blocks(get_the_ID())){
		
		$classes[] = 'genesis-gutenberg';
		
	}
	
	return $classes;
	
}

If you want to apply the custom body class to all full-width content that is using the Gutenberg editor, edit this piece of code:

if ( 'full-width-content' === genesis_site_layout() && (is_single() || is_page()) && !is_page_template() &&; has_blocks(get_the_ID()))

and remove everything from the first ‘&&’ to the last ‘&&’:

if ( 'full-width-content' === genesis_site_layout() && has_blocks(get_the_ID()))

Once the code is saved, you should see the custom class appear in the body tag when you use the browser developer tools to inspect the HTML code of your website:

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.