Sometimes you need a custom CSS class to be able to customize an element. Below is the code to add an extra class to HTML elements in Genesis.
| <?php | |
| //* Add extra class to an HTML element in Genesis | |
| add_filter( 'genesis_attr_content', 'customprefix_add_class' ); | |
| function customprefix_add_class( $attributes ) { | |
| $attributes['class'] = $attributes['class']. 'your-extra-class'; // change "your-extra-class" name | |
| return $attributes; | |
| } |
Below is a table to help you find the correct Genesis filter according to the HTML element you target. In the example above, we added the class “your-extra-class” to the HTML element with the existing class of “content”.
| Existing Class Names | Genesis Filters to Use |
|---|---|
| body | genesis_attr_body |
| site-header | genesis_attr_site-header |
| site-title | genesis_attr_site-title |
| site-description | genesis_attr_site-description |
| header-widget-area | genesis_attr_header-widget-area |
| nav-primary | genesis_attr_nav-primary |
| nav-secondary | genesis_attr_nav-secondary |
| nav-header | genesis_attr_nav-header |
| structural-wrap | genesis_attr_structural-wrap |
| content | genesis_attr_content |
| entry | genesis_attr_entry |
| entry-image | genesis_attr_entry-image |
| entry-image-widget | genesis_attr_entry-image-widget |
| entry-image-grid-loop | genesis_attr_entry-image-grid-loop |
| entry-author | genesis_attr_entry-author |
| entry-author-link | genesis_attr_entry-author-link |
| entry-author-name | genesis_attr_entry-author-name |
| entry-time | genesis_attr_entry-time |
| entry-modified-time | genesis_attr_entry-modified-time |
| entry-title | genesis_attr_entry-title |
| entry-content | genesis_attr_entry-content |
| entry-meta-before-content | genesis_attr_entry-meta-before-content |
| entry-meta-after-content | genesis_attr_entry-meta-after-content |
| archive-pagination | genesis_attr_archive-pagination |
| entry-pagination | genesis_attr_entry-pagination |
| adjacent-entry-pagination | genesis_attr_adjacent-entry-pagination |
| comments-pagination | genesis_attr_comments-pagination |
| entry-comments | genesis_attr_entry-comments |
| comment | genesis_attr_comment |
| comment-author | genesis_attr_comment-author |
| comment-author-link | genesis_attr_comment-author-link |
| comment-time | genesis_attr_comment-time |
| comment-time-link | genesis_attr_comment-time-link |
| comment-content | genesis_attr_comment-content |
| author-box | genesis_attr_author-box |
| sidebar_primary | genesis_attributes_sidebar_primary |
| sidebar-secondary | genesis_attr_sidebar-secondary |
| site-footer | genesis_attr_site-footer |