How To Change Footer Widget Title Heading Levels In Divi

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.

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

2 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!


Leave a Comment