Sometimes you need to add some more classes to a site element in Genesis. It took me ages to find a proper list and how to do it so here are a few examples and the complete list of filters. Happy coding!
Why would you want to use these? Well you could use them to add Bootstrap classes, in my latest update of SpectacularStays I used it for implementing the Aesop Story Engine into my Genesis Theme.
Adding a class to the header
//* Add custom classes to navigation menu add_filter( 'genesis_attr_site-header', 'atp_new_header_class' ); function atp_new_header_class( $attributes ) { $attributes['class'] = 'site-header new-class-header clearfix fixed'; return $attributes; }
Adding a class to the post
//* Add custom classes to posts add_filter( 'genesis_attr_entry', 'atp_post_class' ); function atp_post_class( $attributes ) { $attributes['class'] = 'atp-entry-content clearfix'; return $attributes; }
Context/HTML | Genesis Filter |
---|---|
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_attr_sidebar_primary |
sidebar-secondary | genesis_attr_sidebar-secondary |
site-footer | genesis_attr_site-footer |
Genesis WordPress Framework adding custom classes to markup This gist was originally created as an example of what I perceived to be an inconsistent behavior, my error was failing to attach my code to action `genesis_setup`. Corrected version now appears below. 20131027 – merged Gary Jones’s fork with corrections and refactoring
<?php /* * Examples to add custom classes to Genesis WordPress Framework Markup when using HTML5 output */ add_action( 'genesis_setup', 'srf_add_cust_classes', 15 ); // Priority 15 ensures it runs after Genesis itself has setup. function srf_add_cust_classes() { add_filter( 'genesis_attr_site-inner', 'srf_attr_site_inner' ); add_filter( 'genesis_attr_content-sidebar-wrap', 'srf_attr_content_sidebar_wrap' ); add_filter( 'genesis_attr_content', 'srf_attr_content' ); add_filter( 'genesis_attr_sidebar-primary', 'srf_attr_sidebar_primary' ); } // Don't add a closing marker comment here - it just clutters the code // Don't nest functions, move them outside of the hooked in function. While nested functions work, if the outer function is called again for whatever reason, PHP will throw a wobbly when it tries to redefine an existing function. // Just for fun, I've refactored the common code into one function, and improved it with sanitization. function srf_add_class( $attr, $class ) { $attr['class'] .= ' ' . sanitize_html_class( $class ); return $attr; } // Now the rest of the functions are one line each, and the name of the called function tells us what's happening (add a class). function srf_attr_site_inner( $attr ) { return srf_add_class( $attr, 'example-class-1' ); } function srf_attr_content_sidebar_wrap( $attr ) { return srf_add_class( $attr, 'example-class-2' ); } function srf_attr_content( $attr ) { return srf_add_class( $attr, 'example-class-3' ); } function srf_attr_sidebar_primary( $attr ) { return srf_add_class( $attr, 'example-class-4' ); }
Recent Comments