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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 |