A common question about the Genesis Framework is "How do I add a custom class to a [specific] HTML element?" In many cases, the person asking the question asks where in the Genesis Core files can they change the markup for the element they want to modify. First of all, it's always a very BAD idea to ever change Genesis Framework Core files. Doing so can lead all kinds of problems down the line because future framework updates will overwrite your changes and you'll find yourself in a regular cycle of update and reapply modifications. But, don't fret, there's a much simpler way. The code below is an example of how to add a custom class to the entry-content div.
1 2 3 4 5 6 7 8 | function vmf_my_custom_class( $attributes ) { if ( is_single() ) { $attributes['class'] = $attributes['class'] . ' my-custom-class'; } return $attributes; } add_filter( 'genesis_attr_entry-content', 'vmf_my_custom_class' ); |
Other popular areas to add custom class to are the navigation and sidebar items as well as many other. Replace the genesis_attr_entry-content hook in the add-Filter call above with any of the following to add a class to the corresponding element:
genesis_attr_archive-pagination
genesis_attr_author-box
genesis_attr_body
genesis_attr_comment
genesis_attr_comment-author
genesis_attr_comment-author-link
genesis_attr_comment-content
genesis_attr_comment-time
genesis_attr_comment-time-link
genesis_attr_comments-pagination
genesis_attr_content
genesis_attr_entry
genesis_attr_entry-author
genesis_attr_entry-author-link
genesis_attr_entry-author-name
genesis_attr_entry-comments
genesis_attr_entry-content
genesis_attr_entry-image
genesis_attr_entry-image-widget
genesis_attr_entry-meta-after-content
genesis_attr_entry-meta-before-content
genesis_attr_entry-modified-time
genesis_attr_entry-pagination
genesis_attr_entry-time
genesis_attr_entry-title
genesis_attr_header-widget-area
genesis_attr_nav-header
genesis_attr_nav-primary
genesis_attr_nav-secondary
genesis_attr_sidebar-primary
genesis_attr_sidebar-secondary
genesis_attr_site-description
genesis_attr_site-footer
genesis_attr_site-header
genesis_attr_site-title
genesis_attr_structural-wrap
Hi there, Searching for answers and found your site. Your code here–it is to be inserted into the Genesis child theme’s functions.php file, right?
Yes, you can add it to the child theme’s functions.php or use a plugin like Snippets.
Thanks Victor for the post. I stumbled on this post while looking for something else on Studiopress forum. Will need this later.
Hi Victor,
This was hugely helpful! I could not figure out how to assign a class to the content section of posts on my homepage — the genesis_attr_content did the trick, and I even added in a check for is_front_page, yay!
Glad it helped Ginger.
I’m trying to add a class to the standard Genesis footer widget areas, for example after the “footer-widget-# widget area”. How could I achieve that? Thank you.
You would use the following:
add_filter( 'genesis_attr_footer-widgets', 'my_custom_class' );I am trying to add a a class to the images in the featured post widget. What would I use to achieve that. I tried genesis_attr_entry-image it did not work. Thanks
You can add a class with jQuery to the front page. You can do this through the Genesis/Theme Setting menu in the admin area:
Make sure you wrap the code in the script element.