How To Change Footer Widget Title Heading Levels In Divi

by

For accessibility reasons, I needed to change the heading levels in the WordPress Divi footer widget titles on one of the sites I'm building.

They are set to <h4> by default, but I needed them to be <h2>.

The code to change the heading levels is:

add_action ('widgets_init', 'iw_modify_footer', 100);

function iw_modify_footer() {
  global $wp_registered_sidebars;
  $before = "<h2 class='widgettitle'>";
  $after = "</h2>";

  $wp_registered_sidebars['sidebar-2']['before_title'] = $before;
  $wp_registered_sidebars['sidebar-3']['before_title'] = $before;
  $wp_registered_sidebars['sidebar-4']['before_title'] = $before;
  $wp_registered_sidebars['sidebar-5']['before_title'] = $before;
  $wp_registered_sidebars['sidebar-6']['before_title'] = $before;

  $wp_registered_sidebars['sidebar-2']['after_title'] = $after;
  $wp_registered_sidebars['sidebar-3']['after_title'] = $after;
  $wp_registered_sidebars['sidebar-4']['after_title'] = $after;
  $wp_registered_sidebars['sidebar-5']['after_title'] = $after;
  $wp_registered_sidebars['sidebar-6']['after_title'] = $after;

  return true;
}

How This Works

Divi's setup for widget titles is hooked into widgets_init as it should be.

The 100 priority is so that this function fires after Divi has registered the footers.

I know the naming is a little weird, but the widget blocks that you access through Appearance -> Widgets are called "sidebars" by WordPress.

We call the global $wp_registered_sidebars, which returns an array of the widget blocks, with their individual details in an array under each.

Divi's footer widgets are sidebar-2 to sidebar-6. If you're only using three footer widgets, there's no need to do all of them.

We change the before_title and after_title settings for each of the widget blocks.

Because we're changing a global, there's no need to return anything.

Just make sure you update the styling using something like #main-footer h2.widgettitle {} as it will look different now.

Related Posts

Mike Haydon

Thanks for checking out my WordPress and coding tutorials. If you've found these tutorials useful, why not consider supporting my work?

Buy me a coffee

3 thoughts on “How To Change Footer Widget Title Heading Levels In Divi”

  1. Hi Mike,

    Thank you for this.
    It's been bugging me for years that I couldn't control the heading levels of the footer widgets.

    At first your function didn't work for me, as I am using a "new widget" block that isn't defined as "sidebar-#".

    I'm not a coder myself, so I had to Google how to var_dump() the global sidebars array so I could see what the new widget block was called.

    After adding new before and after lines to your function for "['et_pb_widget_area_4']", it worked a treat!

    I'll be adding this to my folder of "Useful Divi Functions" to use in future.

    I'm actually going test whether replacing the widget heading tags with heading-styled tags will affect rankings. As I don't believe "Contact Us" and "Our Location" are relevant sub headings to be used across all pages of a website.

    It's also not recommended for Web Accessibility standards to have missing or out-of-order heading levels. So should help to address those.

    Once again, thank you!

    Reply

Leave a Comment