Changing and Adding Custom Classes in Genesis HTML 5

Posted on January 4, 2015 0 Comments

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' );
}