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.
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!
... with heading-styled p tags ...
Worked great for me, thanks!