Genesis Featured Posts – Headings

[Mark-C]

Hi All,

I have a localhost instance of genesis sample theme with Genesis Featured Posts.
I need to change the following headings:

Widget Title (<h4 class="widget-title widgettitle">You may like these</h4>): from H4 to H2
Entry Title (<h2 class="entry-title">Sample Product</h2>): from H2 to H3

Thanks

Mark C

[Jess]

While you could probably figure out a way to do that, a (probably much) faster strategy would just be to change the font size to whatever you're looking for (there's a list of general h1-h6 font sizes here: http://stackoverflow.com/questions/6140430/what-are-the-most-common-font-sizes-for-h1-h6-tags) . So the CSS would look something like this:

h4.widget-title {
font-size: 24px;
}

h2.entry-title {
font-size: 18px;
}

---

Jess

[Mark-C]

Hi Jess,

Thank you for reply.

The reason why I need to change 'Genesis Featured Posts' Title from H4 to H2 is that the heading structure is wrong.

Correct SEO structure should follow:

H1
....... H2
.............H3
....... H2
....... H2
.............H3
................ H4

At present, when you use Genesis Featured Posts and add a title such as 'you may like these' or 'related' the structure is as follows:
Genesis Featured Post Title: 'You may like these' - H4
Post Title: H2

Logical heading structure along with Google guideline considers this as poor structure.

Thank you

Mark

[Victor Font]

The Genesis Featured Post widget purposefully changes the title markup from H2 to H4 to support accessibility. Line 211 in the widget's code reads $heading = genesis_a11y( 'headings' ) ? 'h4' : 'h2';. This means that if you have accessibility activated for headings, the markup will use h4 otherwise it will use H2.

You can either turn off accessibility for headings or copy the widget to create a new widget for yourself and modify that line of code.

I am not an expert in A11Y, so you may want to ask Rian why that is. http://www.rianrietveld.com/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Christoph]

Hi Mark,

the markup with accessibility is h4 because the primary sidebar uses the h2 (outputting "Primary Sidebar" using screen-reader-text.)
The h3 is the title of the widget and subsequent headings use h4.
So in essence, activate the accessibility features to get the semantic markup that visitors with visual impairments can understand more easily.

genesis-accessible.org/2015/07/genesis-2-2-accessibility-changes-and-features/
http://blog.rrwd.nl/2014/11/21/html5-headings-in-wordpress-lets-fight/

On a side note, Google included accessibility features in the webmaster guidelines and it looks like it may become a stronger ranking factor (similar to the push for https right now) in the future. https://support.google.com/webmasters/answer/35769?hl=en

If you prefer to change the heading structure, I´d follow Victor's advice.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Mark-C]

Hi Victor and Christoph,

Thank you for your advise.
I will reach out to ask the question in due course. Hopefully, somebody familar with coding and the above procedure may add value.

Regards

Mark

[bluegirl]

Hi,
I have the same issue as Mark. I want to use the genesis featured post widget for my front page and use the title as
a heading and to use good SEO I want make my title and H2 not an H4. I know I can override it with css or copy the widget,
but I didn't want to mess up accessibility. It would be great for the page to come up with the H4 only for those using
special readers for accessibility and for the rest of the visitors they could get an H2... Would be good to be able to test for that
in php or something before outputting the html? I'm on a time crunch, so I can't delve into that. Thoughts anyone? 🙂

Thanks!
Karin

[bluegirl]

Hi Mark,

After some research I decided to turn on 'headings' accessibility which would be good for moving toward accessibility in my
custom theme anyway. In the functions.php file:

add_theme_support( 'genesis-accessibility', array( 'headings') );

This fixes the header issues and adds some accessibility.

- Karin

[Author]

Posts