Headings structure (good for accessibility)

Thanks for the feedback!

You can change the Related Posts headline with the jetpack_relatedposts_filter_headline filter, like so:
https://jetpack.me/support/related-posts/customize-related-posts/#headline

Could you reconsider titling these (and possibly other) sections with H2. It seems to be more appropriate globally as it will cause less issues with headings structure.

While this may make sense on your site, it might not fit everyone’s needs. For example, if someone uses the default Twenty Fifteen theme and looks at their home page, each post title is an h2 heading. In such cases, we wouldn’t want sharing headings to be as important as post titles. This is also true with single post pages in the Twenty Fifteen theme.

Hi Jeremy,

Thanks for jetpack_relatedposts_filter_headline filter. I’ve used it by now and should have actually mentioned that I need to level up the post headings too as they keep H4 level and there is no way to change it.

Considering H2:
I’m not really sure what you mean here.

On the blog (home) page Twenty Fifteen (and also my theme) there are H2 headings for post titles, but sharing and related posts are not displayed here. Have a look at https://twentyfifteendemo.wordpress.com/

Than on single post page the post title is H1 while sharing and related posts title is H3, skipping H2. Just like in my theme. https://twentyfifteendemo.wordpress.com/2011/07/07/the-war-of-the-worlds-bk-1/

If you are using Chrome, you can check the headings structure with https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi extension.

Regards,

Oliver

I need to level up the post headings too as they keep H4 level and there is no way to change it.

I’m afraid you won’t be able make that change without editing the plugin files. We’ll see about adding a new filter in a future Jetpack release. You can follow our progress here:
https://github.com/Automattic/jetpack/pull/3278

Feel free to apply the patch to your own installation if you feel comfortable editing PHP code.

On the blog (home) page Twenty Fifteen (and also my theme) there are H2 headings for post titles, but sharing and related posts are not displayed here.

That will indeed depend on your sharing settings. If you go to Settings > Sharing in your dashboard, you can enable sharing buttons on your home page as well, thus adding several new h3 headings to the home page.

Than on single post page the post title is H1 while sharing and related posts title is H3, skipping H2.

That’s correct. The heading structure is indeed different on single posts. Post Tiles use h1 there, while they use h2 on the home page.

Hi,

Thank you for applying the fix for Related Posts module!

As for default heading tags used in Jepack I understand now that it is probably the best solution for not causing issues. That’s great we have filters now to adapt the heading tags via themes, though.

If I can suggest one ore thing: would be great if filter like https://github.com/Automattic/jetpack/pull/3278 (specifically targeting heading tag only) would be applied everywhere (even in Sharing module). That way we can only swap the heading tag instead of search and replace the code in HTML string (like it is now with jetpack_sharing_display_markup filter). Could you consider this please?

Regards,

Oliver

For completion, here I’m posting a solution for the problem I’m currently using for others to benefit too:

/**
 * Level up heading tags
 *
 * Levels up the HTML headings in single post/page view.
 * Transforms H3 to H2 and H4 to H3.
 *
 * @since    1.0
 * @version  1.0
 *
 * @param  string $html
 */
function themeslug_headings_level_up( $html ) {

  // Requirements check

    if (
        ! is_page( get_the_ID() )
        && ! is_single( get_the_ID() )
      ) {
      return $html;
    }

  // Processing

    switch ( $html ) {

      case 'h3':
        $html = tag_escape( 'h2' );
      break;

      case 'h4':
        $html = tag_escape( 'h3' );
      break;

      default:
        $html = str_replace(
            array(
              '<h3', '</h3', // 1) H3...
              '<h4', '</h4', // 2) H4...
            ),
            array(
              '<h2', '</h2', // 1) ...to H2
              '<h3', '</h3', // 2) ...to H3
            ),
            $html
          );
      break;

    } // /switch

  // Output

    return $html;

} // /themeslug_headings_level_up

add_filter( 'jetpack_sharing_display_markup',           'themeslug_headings_level_up', 999 );
add_filter( 'jetpack_relatedposts_filter_headline',     'themeslug_headings_level_up', 999 );
add_filter( 'jetpack_relatedposts_filter_post_heading', 'themeslug_headings_level_up', 999 );

Regards,

Oliver

I had actually forgotten about jetpack_sharing_display_markup, thanks for reminding me. We’ll discuss all options in the GitHub issue I created above, and update the patch accordingly.

Thanks Jeremy. The above function I posted actually works well for that filter too. This can be probably applied to any similar Jetpack module.