alexanderdejong.com

Wordpress Developer

  • Home
  • Blog
  • Projects
  • Contact
You are here: Home / Genesis

Changing and Adding Custom Classes in Genesis HTML 5

Posted on January 4, 2015 Leave a Comment

Sometimes you need to add some more classes to a site element in Genesis. It took me ages to find a proper list and how to do it so here are a few examples and the complete list of filters. Happy coding!

Why would you want to use these? Well you could use them to add Bootstrap classes, in my latest update of SpectacularStays I used it for implementing the Aesop Story Engine into my Genesis Theme.

Adding a class to the header

//* Add custom classes to navigation menu
add_filter( 'genesis_attr_site-header', 'atp_new_header_class' );
function atp_new_header_class( $attributes ) {
 $attributes['class'] = 'site-header new-class-header clearfix fixed';
return $attributes;
}

Adding a class to the post

//* Add custom classes to posts
add_filter( 'genesis_attr_entry', 'atp_post_class' );
function atp_post_class( $attributes ) {
 $attributes['class'] = 'atp-entry-content clearfix';
return $attributes;
}
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

Genesis WordPress Framework adding custom classes to markup This gist was originally created as an example of what I perceived to be an inconsistent behavior, my error was failing to attach my code to action `genesis_setup`. Corrected version now appears below. 20131027 – merged Gary Jones’s fork with corrections and refactoring

<?php
/* 
 * Examples to add custom classes to Genesis WordPress Framework Markup when using HTML5 output
 */
add_action( 'genesis_setup', 'srf_add_cust_classes', 15 ); // Priority 15 ensures it runs after Genesis itself has setup.
function srf_add_cust_classes() {
    add_filter( 'genesis_attr_site-inner', 'srf_attr_site_inner' );
    add_filter( 'genesis_attr_content-sidebar-wrap', 'srf_attr_content_sidebar_wrap' );
    add_filter( 'genesis_attr_content', 'srf_attr_content' );
    add_filter( 'genesis_attr_sidebar-primary', 'srf_attr_sidebar_primary' );
} // Don't add a closing marker comment here - it just clutters the code

// Don't nest functions, move them outside of the hooked in function. While nested functions work, if the outer function is called again for whatever reason, PHP will throw a wobbly when it tries to redefine an existing function.

// Just for fun, I've refactored the common code into one function, and improved it with sanitization.

function srf_add_class( $attr, $class ) {
    $attr['class'] .= ' ' . sanitize_html_class( $class );
    return $attr;
}

// Now the rest of the functions are one line each, and the name of the called function tells us what's happening (add a class).

function srf_attr_site_inner( $attr ) {
    return srf_add_class( $attr, 'example-class-1' );
}

function srf_attr_content_sidebar_wrap( $attr ) {
    return srf_add_class( $attr, 'example-class-2' );
}

function srf_attr_content( $attr ) {
    return srf_add_class( $attr, 'example-class-3' );
}

function srf_attr_sidebar_primary( $attr ) {
    return srf_add_class( $attr, 'example-class-4' );
}

Filed Under: Genesis

Recent Posts

  • Migrating a WordPress Website Manually with Phpmyadmin, Search and Replace, DigitalOcean and Runcloud
  • How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • How to Install Roots Bedrock on a Digital Ocean Droplet running on Serverpilot via SSH
  • Linux SSH Useful Server Commands to Remember: Grep, Permissions and more.
  • How to Install Roots Sage 8.5.1 on a Digital Ocean Droplet running on Serverpilot via SSH

Find more content

Affiliate links
  • cheap shared hosting
  • low priced virtual servers only 5$
Affiliates
  • If someone buys a product then I get a commission.
  • You pay the same price using my affiliate links.
  • I can spend more time making newsletters and tutorials.
  • Thanks for visiting!

Connect with me

Recent Comments

  • Pedro Gómez on Migrating a WordPress Website Manually with Phpmyadmin, Search and Replace, DigitalOcean and Runcloud
  • Tim Delmeire on How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • Jaehyuk J Yang on How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • Alexander de Jong on A guide on customising the membership experience with Theme my Login (TML)
  • Judit Sarkany on A guide on customising the membership experience with Theme my Login (TML)

Recent Posts

  • Migrating a WordPress Website Manually with Phpmyadmin, Search and Replace, DigitalOcean and Runcloud
  • How to add Total Price Calculation to your WooCommerce Product Page with AJAX
  • How to Install Roots Bedrock on a Digital Ocean Droplet running on Serverpilot via SSH
  • Linux SSH Useful Server Commands to Remember: Grep, Permissions and more.
  • How to Install Roots Sage 8.5.1 on a Digital Ocean Droplet running on Serverpilot via SSH

Copyright © 2014 | Alexander de Jong | About | Contact | Privacy | Sitemap