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:


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'] = ''; 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.


  1. Kevin Donnigan on September 11, 2016 at 7:18 pm

    Hey Neil,

    I am trying to change the itemprop attribute on a single custom post type page. So I’m using this:

    add_filter( 'genesis_attr_entry-content', 'agenda_entry_attributes', 20);
    function agenda_entry_attributes( $attributes ) {
    if( is_singular( 'leadership' ) ) {
    $attributes['itemprop'] = '';
    return $attributes;

    It works. But it generates an error that I can’t get rid of:f

    Warning: Invalid argument supplied for foreach() in .../wp-content/themes/genesis/lib/functions/markup.php on line 123

    I’ve also tried if ( get_post_type() == 'leadership' ) with no luck. Can you advise?

    Thanks in advance!

    • Neil Gowran on September 12, 2016 at 4:01 am

      Hi Kevin – what you need to do is return the $attributes after the conditional statement – so it returns altered if the condition is met and unaltered if not.

      add_filter( 'genesis_attr_entry-content', 'agenda_entry_attributes', 20);
      function agenda_entry_attributes( $attributes ) {
      if( is_singular( 'leadership' ) ) {
      $attributes['itemprop'] = '';
      return $attributes;

  2. Brent on July 5, 2016 at 5:53 pm

    I am adding a class to the entry-title item and I see an error above the titles on the archive page(s) when I debug. The error is: Warning: Invalid argument supplied for foreach() in usr/.................../themes/genesis/lib/functions/markup.php on line 123
    My google-ing has turned up the suggestion that an array is not being created at one step or another somewhere along this process where it should be (sorry if this is vague, I’m still learning). See this thread on StackOverflow

  3. Felicia Betancourt on June 16, 2016 at 11:31 pm

    Two words: life saver! I thoroughly agree with one of the other commenters that it’s outrageous that StudioPress (or Rainmaker, or whatever they’re calling themselves this week) do not expose these filters in their code snippets section. Thanks a million.

  4. Ataul Ghani on May 28, 2016 at 10:00 pm

    I was looking for this type tutorial. Finally got it here. Loved it!

  5. Paolo on May 9, 2016 at 4:02 pm

    hi, why this code working on site header and not work on article page ? there is another hook to use ?

    add_filter(‘genesis_attr_site-header’, ‘capri_service_body_class’);

    function capri_service_body_class($attributes) {

    // add original plus extra CSS classes
    $attributes[‘class’] .= ‘ light’;

    // return the attributes
    return $attributes;

  6. Sean Vandenberg on February 29, 2016 at 1:43 pm

    Thanks, Neil. I was trying to reposition the site header, footer widgets and footers OUTSIDE of the body… but that wasn’t doing the trick. So instead I added a class to the entry content. Thanks again, Sir!

  7. Lloyd Silver on January 29, 2016 at 6:04 am

    This is very helpful. Would you mind sharing how I would remove the schema markup for multiple sections.

    Would it be something like:

    remove_filter( 'genesis_attr_sidebar-primary', 'genesis_attributes_sidebar_primary' );
    add_filter( 'genesis_attr_sidebar-primary', 'sidebar_attributes_without_schema' );

    function sidebar_attributes_without_schema( $attributes ) { $attributes['class'] = 'sidebar sidebar-primary widget-area'; $attributes['role'] = 'complementary'; return $attributes; }

    So basically remove the built-in filter and then add a new one without the schema?

  8. Kenny Eliason on January 9, 2016 at 1:00 am

    This is a freaking awesome list. Thanks for putting it together. I’m running into an issue where when I add an attribute to the genesis_attr_entry filter, it also hits the entry’s that are down in the footer. I only want it to show up on the site-inner section. Thoughts?

    • Neil Gowran on January 9, 2016 at 1:22 am

      Since it will add the attribute wherever the .entry is used I would use a hierarchal CSS/JS selector to target a specific part of the layout.

  9. Patrick Fortino on November 1, 2015 at 3:08 pm

    Neil. Thanks a million for this tutorial. It’s “The Missing Genesis Manual.” On the studeopress site, they don’t list these filters in the filter list so I assumed they weren’t available. For a long time, I’ve wanted to modify or add to the default genesis div classes so I could use my own grid system. I looked in the code but couldn’t figure out how to do it. This tutorial made it crystal clear.

    • Neil Gee on November 1, 2015 at 9:06 pm

      Looks like a great title – “The Missing Genesis Manual.”

  10. Karla on September 24, 2015 at 6:48 pm

    This is very helpful. I wish that StudioPress would make these kinds of tips available to the people who buy their themes.

    I used this technique and it worked great except when I tried to modify footer-widgets-1 which failed. The generalization you discovered works but not always.
    I am having trouble figuring out when it works and when not, but mostly it seems that it works on major elements like site-footer, footer-widgets, site-inner etc, but not items like footer-widgets-1, wrap, and widget-wrap.

    Thank you again for posting.

  11. duynguyen on September 18, 2015 at 3:51 pm

    this is exactly what i need. Thanks for your great article!

  12. Chuck Reynolds on September 10, 2015 at 1:30 am

    genesis_attributes_sidebar-primary should actually be “genesis_attr_sidebar-primary”. At least in Genesis 2.1.3+
    I didn’t check the rest but just came across your page for that. fyi. Cheers

    • Neil Gee on September 10, 2015 at 1:36 am

      Thanks, updated

  13. Aaron on July 31, 2015 at 6:58 pm

    genesis_attr_entry-image – Doesn’t work for custom post type loop with an image.

    Here’s what I’m using:

    add_filter( ‘genesis_attr_entry-image’, ‘local_image_custom_attributes_entry’, 20 );

    function local_image_custom_attributes_entry( $attributes ) {

    if (is_singular( ‘local’ ) || is_archive(‘local’)
    $attributes[‘itemprop’] = ‘image’;


    return $attributes;


    I am able to filter genesis_attr_entry-title and genesis_attr_entry with that snippet above.

    Any ideas why this wouldn’t work with the image?


    • Neil Gee on August 1, 2015 at 7:25 am

      Try as your condition

      if ( get_post_type() == 'local' )

  14. Amanda on July 22, 2015 at 8:59 am

    Thanks, this is really helpful

  15. TOMo NG on June 19, 2015 at 12:11 am

    I would like to change Genesis child theme logo by this HTML code at here:

    Trying to use peShiner effect for my logo. I tried your tutorial above but don’t known how to add the image for the code. Could you please help ?


    • Neil Gee on June 19, 2015 at 9:18 am

      try adding

      add_filter( 'genesis_attr_site-title', 'custom_add_css_attr' );
      function custom_add_css_attr( $attributes ) {

      // add original plus extra CSS classes
      $attributes['class'] .= ' peShiner';

      // return the attributes
      return $attributes;


  16. Henry on May 18, 2015 at 1:38 pm


    Have an error with your code, pls fix it
    Wrong: sidebar_primary genesis_attributes_sidebar_primary
    Right: sidebar-primary genesis_attr_sidebar-primary

    • Neil Gee on May 19, 2015 at 1:24 am

      Well spotted Henry – post is updated

      • Paul on July 12, 2015 at 3:34 am

        I still see genesis_attributes_sidebar_primary in the table is that wrong too?

Leave all Comment