Adding Classes and Attributes to HTML elements in Genesis

Attributes can be added into various HTML markup elements via filters in the Genesis Framework, these attributes can be adding in an ID or additional CSS Class, or amending the Microdata Schema including role, itemscope or itemtype attributes.

The HTML markup elements/sections also known as ‘contexts‘ are originally declared as functions in the core Genesis Framework in:

genesis/lib/functions/markup.php

Take for example the primary sidebar, it’s original markup/function is:

add_filter( 'genesis_attr_sidebar-primary', 'genesis_attributes_sidebar_primary' );
/**
 * Add attributes for primary sidebar element.
 *
 * @since 2.0.0
 *
 * @param array $attributes Existing attributes.
 *
 * @return array Amended attributes.
 */
function genesis_attributes_sidebar_primary( $attributes ) { $attributes['class'] = 'sidebar sidebar-primary widget-area'; $attributes['role'] = 'complementary'; $attributes['itemscope'] = 'itemscope'; $attributes['itemtype'] = 'http://schema.org/WPSideBar'; return $attributes; }

The attributes which are output in the Primary Sidebar are class, role, itemscope and itemtype, these are rendered in the HTML as the attribute and corresponding value, itemscope and itemtype being attributes of MicroData Schema.

The attributes are declared in the genesis_attributes_sidebar_primary function part of the code, and passed into the genesis_attr_sidebar-primary filter above the function.

So in a Genesis Child theme for example,  if you wanted to include extra CSS classes rather then alter the original code you would use the same filter but in your child themes functions.php file, in the case of the primary sidebar the filter being genesis_attr_sidebar-primary, lets add in and output 2 extra CSS classes: secondary and toggled-on

add_filter( 'genesis_attr_sidebar-primary', 'themeprefix_add_css_attr' );
function themeprefix_add_css_attr( $attributes ) {
 
 // add original plus extra CSS classes
 $attributes['class'] .= ' secondary toggled-on';
 
 // return the attributes
 return $attributes;
 
}

In the above code just the class attribute is being filtered, keeping in the original classes and appending in the new ones with the use of the period before the equals sign.

The previous attributes of role, itemscope and itemtype are still pulled from the original markup.

Also possible is to add additional attributes, say for example you wanted to add a CSS selector ID attribute to the primary menu

add_filter( 'genesis_attr_nav-primary', 'themeprefix_primary_nav_id' );
function themeprefix_primary_nav_id( $attributes ) {
 
 $attributes['id'] = 'sidr';
 return $attributes;
}

Just note in the above example when checking the markup the id attribute would be the last attribute in the element.

In the table below are the majority of the contexts and corresponding filter names, these can be changed to adjust and include various attributes; adding or removing markup throughout of all the framework.

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

Some more Archive specific headings and descriptions

Context/HTML	Genesis Filter
archive-title	genesis_attr_archive-title
taxonomy-archive-description	genesis_attr_taxonomy-archive-description
author-archive-description	genesis_attr_author-archive-description
cpt-archive-description	genesis_attr_cpt-archive-description
date-archive-description	genesis_attr_date-archive-description
blog-template-description	genesis_attr_blog-template-description
posts-page-description	genesis_attr_posts-page-description

Outside of these, even contexts which are not declared can have the genesis_attr applied, as along as it is a valid HTML element with a class, so for example the .site-container div can be manipulated with…

add_filter( 'genesis_attr_site-container', 'themeprefix_site_container_id' );
function themeprefix_site_container_id( $attributes ) { 
 $attributes['id'] = 'my-new-id';
 return $attributes;
}

So in the above I am giving an ID to the site-container by suffixing the genesis_attr filter with the class genesis_attr_site-container and passing in the function below it. This now allows me to change the attributes of that element.