Change sidebar headers from H1?

My theme uses H1 tags without much thought, including the site name at the top of each page and each of the sidebar menu titles. I checked the sidebar.php file in my themes folder, but there is no HTML content present.

<?php
/**
 * The sidebar containing the main widget area.
 *
 * @package Button
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
    return;
}
?>

<div id="secondary" class="widget-area" role="complementary">

    <?php if ( has_nav_menu ( 'social' ) ) : ?>
        <?php wp_nav_menu( array(
            'theme_location'  => 'social',
            'depth'           => 1,
            'link_before'     => '<span class="screen-reader-text">',
            'link_after'      => '</span>',
            'container_class' => 'social-links',
        ) ); ?>
    <?php endif; ?>

    <?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->

What file would the HTML layout be stored in so I can change those?

1 Answer
1

The tags used for the headings would be set wherever the sidebars are registered. Look for register_sidebar() in the theme’s functions.php file (or a file that has been included into the functions file).

It will look like this (example from here):

register_sidebar( array(
    'name'          => __( 'Main Sidebar', 'textdomain' ),
    'id'            => 'sidebar-1',
    'description'   => __( 'Widgets in this area will be shown on all posts and pages.', 'textdomain' ),
    'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>',
) );

Just change the tag in before_title and after_title.

For what it’s worth, and just in my opinion, the ‘only one h1 tag’ thing is just a superstition of so-called SEO experts and there’s probably nothing wrong with having h1 tags in the sidebar. What’s more important is the hierarchy of the headings. If the headings in the sidebar don’t make sense as subheadings of the main h1, then they shouldn’t be marked up as such. If you use the W3C Markup Validator with “Show Outline” enabled you can see a heading-level outline of the page. That outline should make logical sense, and sometimes more than one h1 is the way to achieve that.

Leave a Comment