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/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.

28 Comments

  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 StackOverflowhttp://stackoverflow.com/questions/2630013/invalid-argument-supplied-for-foreach

  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

  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?

    Thanks.

    • 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: http://www.studiopress.com/forums/topic/how-to-add-a-class-for-logo-daily-dish-pro-theme/

    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 ?

    Thanks
    TOM

    • 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

    Hi,

    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?

  17. […] are just under 4o structural elements that have various microdata attributes applied to them. These have been marked up well and will work […]

  18. […] in the article element alongside the other default attributes.  – Here is a list of all the HTML elements/contexts that can be filtered for adding new attributes. These article elements would then inherit the default or amended values […]

  19. […] in the article element alongside the other default attributes. – Here is a list of all the HTML elements/contexts that can be filtered for adding new […]

Leave a Comment





%d bloggers like this: