Community Forums › Forums › Archived Forums › Design Tips and Tricks › Add Custom Class to Specific Structural Wrap
Tagged: css, structural wraps
- This topic has 6 replies, 2 voices, and was last updated 7 years ago by Gregory.
-
AuthorPosts
-
March 12, 2017 at 10:00 pm #202965GregoryMember
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
March 13, 2017 at 7:12 am #202991Victor FontModeratorStructural 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; }
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?March 13, 2017 at 7:37 am #202994GregoryMemberHi 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
March 13, 2017 at 11:53 am #203013Victor FontModeratorActually, 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?March 13, 2017 at 12:00 pm #203014GregoryMemberHi 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
March 13, 2017 at 1:18 pm #203017GregoryMember... 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
March 14, 2017 at 7:34 am #203068GregoryMemberHi Victor,
Your snippet worked perfectly. Thanks for your help.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.