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/HTMLGenesis Filter
bodygenesis_attr_body
site-headergenesis_attr_site-header
site-titlegenesis_attr_site-title
site-descriptiongenesis_attr_site-description
header-widget-areagenesis_attr_header-widget-area
nav-primarygenesis_attr_nav-primary
nav-secondarygenesis_attr_nav-secondary
nav-headergenesis_attr_nav-header
structural-wrapgenesis_attr_structural-wrap
contentgenesis_attr_content
entrygenesis_attr_entry
entry-imagegenesis_attr_entry-image
entry-image-widgetgenesis_attr_entry-image-widget
entry-image-grid-loopgenesis_attr_entry-image-grid-loop
entry-authorgenesis_attr_entry-author
entry-author-linkgenesis_attr_entry-author-link
entry-author-namegenesis_attr_entry-author-name
entry-timegenesis_attr_entry-time
entry-modified-timegenesis_attr_entry-modified-time
entry-titlegenesis_attr_entry-title
entry-contentgenesis_attr_entry-content
entry-meta-before-contentgenesis_attr_entry-meta-before-content
entry-meta-after-contentgenesis_attr_entry-meta-after-content
archive-paginationgenesis_attr_archive-pagination
entry-paginationgenesis_attr_entry-pagination
adjacent-entry-paginationgenesis_attr_adjacent-entry-pagination
comments-paginationgenesis_attr_comments-pagination
entry-commentsgenesis_attr_entry-comments
commentgenesis_attr_comment
comment-authorgenesis_attr_comment-author
comment-author-linkgenesis_attr_comment-author-link
comment-timegenesis_attr_comment-time
comment-time-linkgenesis_attr_comment-time-link
comment-contentgenesis_attr_comment-content
author-boxgenesis_attr_author-box
sidebar-primarygenesis_attr_sidebar-primary
sidebar-secondarygenesis_attr_sidebar-secondary
site-footergenesis_attr_site-footer

Some more Archive specific headings and descriptions

Context/HTMLGenesis Filter
archive-titlegenesis_attr_archive-title
taxonomy-archive-descriptiongenesis_attr_taxonomy-archive-description
author-archive-descriptiongenesis_attr_author-archive-description
cpt-archive-descriptiongenesis_attr_cpt-archive-description
date-archive-descriptiongenesis_attr_date-archive-description
blog-template-descriptiongenesis_attr_blog-template-description
posts-page-descriptiongenesis_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.

Share:

Leave a Reply