Bubsites

Genesis Custom Classes and HTML Attributes

With the Genesis Framework for WordPress it’s possible to add custom values to HTML attributes via attribute filters. So for example, if you need to add a custom class to a site element, use the corresponding filter with attributes['class'].

The corresponding theme functions are located in: genesis/lib/functions/markup.php

List of HTML Attribute Filters

The following list shows the most important contexts (HTML elements) and its corresponding filters, however attribute filters should work with every valid Genesis HTML element.

  • 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
  • archive-title: genesis_attr_archive-title
  • Standard posts page description (blog index): genesis_attr_posts-page-description
  • 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

Example Code

add_filter( 'genesis_attr_site-header', 'bubdev_add_site_header_attributes' );
/**
 * Site Header Attributes
 */
function bubdev_add_site_header_attributes( $attributes ) {

  // Add 'static' class (used in combination with a 'fixed' header).
  $attributes['class'] .= ' static';

  return $attributes;
}

Sources

  • https://alexanderdejong.com/genesis/changing-adding-custom-classes-html-5/
  • https://wpbeaches.com/adding-attribute-html-section-genesis/

Zeige alle ...