• Skip to main content

Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Genesis Framework: Add a Custom CSS Class to Elements

Genesis Framework: Add a Custom CSS Class to Elements

By Victor M. Font Jr.
March 6, 20159 Comments

A common question about the Genesis Framework is "How do I add a custom class to a [specific] HTML element?"

In many cases, the person asking the question asks where in the Genesis Core files can they change the markup for the element they want to modify. First of all, it's always a very BAD idea to ever change Genesis Framework Core files. Doing so can lead all kinds of problems down the line because future framework updates will overwrite your changes and you'll find yourself in a regular cycle of update and reapply modifications. But, don't fret, there's a much simpler way. The code below is an example of how to add a custom class to the entry-content div.

Other popular areas to add custom class to are the navigation and sidebar items as well as many other. Replace the genesis_attr_entry-content hook in the add-Filter call above with any of the following to add a class to the corresponding element:

genesis_attr_adjacent-entry-pagination
genesis_attr_archive-pagination
genesis_attr_author-box
genesis_attr_body
genesis_attr_comment
genesis_attr_comment-author
genesis_attr_comment-author-link
genesis_attr_comment-content
genesis_attr_comment-time

genesis_attr_comment-time-link
genesis_attr_comments-pagination
genesis_attr_content
genesis_attr_entry
genesis_attr_entry-author
genesis_attr_entry-author-link
genesis_attr_entry-author-name
genesis_attr_entry-comments
genesis_attr_entry-content
genesis_attr_entry-image

genesis_attr_entry-image-grid-loop
genesis_attr_entry-image-widget
genesis_attr_entry-meta-after-content
genesis_attr_entry-meta-before-content
genesis_attr_entry-modified-time
genesis_attr_entry-pagination
genesis_attr_entry-time
genesis_attr_entry-title
genesis_attr_header-widget-area

  • 5shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn0
  • Print
  • SMS1

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. YLev

    January 9, 2019 at 12:29 pm

    Hi there, Searching for answers and found your site. Your code here–it is to be inserted into the Genesis child theme’s functions.php file, right?

    Reply
    • Victor M. Font Jr.

      January 9, 2019 at 12:52 pm

      Yes, you can add it to the child theme’s functions.php or use a plugin like Snippets.

      Reply
  2. Dare

    September 8, 2017 at 6:11 pm

    Thanks Victor for the post. I stumbled on this post while looking for something else on Studiopress forum. Will need this later.

    Reply
  3. Ginger Coolidge

    March 11, 2016 at 12:02 am

    Hi Victor,

    This was hugely helpful! I could not figure out how to assign a class to the content section of posts on my homepage — the genesis_attr_content did the trick, and I even added in a check for is_front_page, yay!

    Reply
    • Victor M. Font Jr.

      March 11, 2016 at 6:31 am

      Glad it helped Ginger.

      Reply
  4. Richard de Jong

    December 1, 2015 at 6:00 am

    I’m trying to add a class to the standard Genesis footer widget areas, for example after the “footer-widget-# widget area”. How could I achieve that? Thank you.

    Reply
    • Victor M. Font Jr.

      December 1, 2015 at 8:46 am

      You would use the following:

      add_filter( 'genesis_attr_footer-widgets', 'my_custom_class' );

      Reply
  5. Michael Caiati

    August 21, 2015 at 10:31 am

    I am trying to add a a class to the images in the featured post widget. What would I use to achieve that. I tried genesis_attr_entry-image it did not work. Thanks

    Reply
    • Victor M. Font Jr.

      August 21, 2015 at 12:40 pm

      You can add a class with jQuery to the front page. You can do this through the Genesis/Theme Setting menu in the admin area:

      
      

      Make sure you wrap the code in the script element.

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2023 Victor M. Font Jr.

Return to top of page