Add Custom Class to Specific Structural Wrap

[Gregory]

We are using structural wraps via:

add_theme_support('genesis-structural-wraps', 
			array(
				'header',
				'nav',
				'subnav',
				'site-inner',
				'footer-widgets',
				'footer'
			)
		);

We need to add a unique class to the structural wrap directly following:

<header class="site-header">

Like this:

<div class="wrap my-custom-class">

We've tried every possible filter to perform this task, but in each attempt, the my-custom-class gets applied to ALL structural wraps. We ONLY want it applied to the one directly following the <header>.

Here's an example of what we've tried thus far which is not working as desired per the above:

add_filter( 'genesis_attr_structural-wrap', 'sg_add_css_attr' );
function sg_add_css_attr( $attributes ) {

	// add original plus extra CSS classes
	$attributes['class'] .= ' row justify-content-between';

	// return the attributes
	return $attributes;
}

Thanks. in advance.

Gregory

[Victor Font]

Structural wrap is not a targeted element. Each structural wrap has its own filter. Here is the correct code:

add_filter( 'genesis_attr_site-header', 'sg_add_css_attr' );
function sg_add_css_attr( $attributes ) {

	// add original plus extra CSS classes
	$attributes['class'] .= ' row justify-content-between';

	// return the attributes
	return $attributes;
}

Understanding Genesis Dynamic apply_filters()—Part 1

https://victorfont.com/genesis-framework-add-a-custom-css-class-to-elements/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Gregory]

Hi Victor,

Thanks for your reply, but won't your solution add the additional CSS to the "header" DIV block? I'm looking to add the additional CSS to the "wrap" DIV block directly following the "header" DIV block, i.e.,

<header class="site-header">
  <div class="wrap my-additional-class">
    ...
  </div>
</div>

Thanks in advance.

Gregory

[Victor Font]

Actually, I gave you the wrong filter. The correct filter is genesis_structural_wrap-header. Here's the corrected code:

add_filter( 'genesis_structural_wrap-header','add_class_to_header_structural_wrap', 10, 2);
function add_class_to_header_structural_wrap( $output, $original_output ) {
    
    if ( 'open' == $original_output )
        $output .= '<div class="wrap row justify-content-between">';
    
    elseif ( 'close' == $original_output )
        $output .= '</div>;';
    
    return $output;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Gregory]

Hi Victor,

Thanks. I'll give that a shot. I assume then that this same targeting can be applied to the genesis_structural_wrap filter depending on what wrap we want to target?

Gregory

[Gregory]

... just read your BIO as well. Would have never expected that type of background in a WP Developer! I come from a leadership background as well (in the construction management space), and can appreciate the dedication it must have taken you to learn and contribute at that level you have. Good stuff Victor!

Gregory

[Gregory]

Hi Victor,

Your snippet worked perfectly. Thanks for your help.

[Author]

Posts