Adding Classes and Attributes to HTML elements in Genesis

25 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!

   Reply
   • 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;
}

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

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

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

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

   Reply
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;
   }

   Reply
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!

   Reply
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?

   Reply
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?

   Reply
   • 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.

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

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

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

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

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

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

    Reply
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

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

      Thanks, updated

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

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

      Try as your condition

      if ( get_post_type() == 'local' )

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

    Thanks, this is really helpful

    Reply
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

    Reply
    • 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;

      }

      Reply
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

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

      Well spotted Henry – post is updated

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

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

        Reply
        • Neil Gee on July 12, 2015 at 5:02 am

          Updated – Thanks

          Reply