How I Changed Genesis Author Box Title Heading From H4 To H3

I was testing one of my site in the web.dev’s Measure feature, and then on the Accessibility tab I got a warning for Heading elements are not in a sequentially-descending order.

I found that Genesis, by default, uses H4 for the author-box-title (the author’s name in the author box).

This has caused the order of heading elements not being in order, jumping from my H2s in the post to H4 in the author box.

I tried to find the solution for hours, even days, and after testing many (sometimes outdated) codes and different techniques, I finally found the solution (with a little modification), thanks to Sridhar Katakam.

Note: I’m using Genesis Framework 3.3.5 and Genesis Sample 3.4.1 at the time I’m applying this method.

So, here’s how to change the Genesis Framework default author box title heading from H4 to H3.

1. Open your WordPress dashboard, choose Appearance, and then choose Theme Editor.

2. By default, you’ll be editing the style.css file, but choose functions.php on the right side.

3. Now be very careful, since a little error in this file will leads your website to break (although the newer WordPress version prevent that from happening). Add the following code to the functions.php on the last line:

//* Modify the author box
add_filter( 'genesis_author_box', 'sk_author_box' );
function sk_author_box() {

	// Author's Gravatar image
	$gravatar_size = apply_filters( 'genesis_author_box_gravatar_size', 70, $context );
	$gravatar      = get_avatar( get_the_author_meta( 'email' ), $gravatar_size );

	// Author's name
	$name = get_the_author();
	$title = get_the_author_meta( 'title' );
	if( !empty( $title ) )
		$name .= ', ' . $title;

	// Author's Biographical info
	$description   = wpautop( get_the_author_meta( 'description' ) );

	// Build Author box output
	$output = '';
	$output .= '<section class="author-box" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">';
	$output .= $gravatar;
	$output .= '<h3 class="author-box-title"><span itemprop="name">' . $name .'</span></h3>';
	$output .= '<div itemprop="description" class="author-box-content">' . $description . '</div>';
	$output .= '</section>';
	return $output;

}

4. Now click Update File. If you’re still not seeing any changes, try to clear your website and browser cookies and cache.

---

That’s it, now you should see that your Author’s name inside the Author Box has a H3 heading instead of the default H4.

I still don’t get it why StudioPress still hasn’t followed the best practices for their themes, maybe they used H4 for aesthetic purposes and then forgot to keep it up to date.