{"id":2186,"date":"2021-06-02T10:35:44","date_gmt":"2021-06-02T02:35:44","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=2186"},"modified":"2021-06-02T10:35:47","modified_gmt":"2021-06-02T02:35:47","slug":"change-divi-footer-widget-title-heading-levels","status":"publish","type":"post","link":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/change-divi-footer-widget-title-heading-levels\/","title":{"rendered":"How To Change Footer Widget Title Heading Levels In Divi"},"content":{"rendered":"\n
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.<\/p>\n\n\n\n
They are set to <h4> by default, but I needed them to be <h2>.<\/p>\n\n\n\n
The code to change the heading levels is:<\/p>\n\n\n\n
add_action ('widgets_init', 'iw_modify_footer', 100);\n\nfunction iw_modify_footer() {\n global $wp_registered_sidebars;\n $before = \"<h2 class='widgettitle'>\";\n $after = \"<\/h2>\";\n\n $wp_registered_sidebars['sidebar-2']['before_title'] = $before;\n $wp_registered_sidebars['sidebar-3']['before_title'] = $before;\n $wp_registered_sidebars['sidebar-4']['before_title'] = $before;\n $wp_registered_sidebars['sidebar-5']['before_title'] = $before;\n $wp_registered_sidebars['sidebar-6']['before_title'] = $before;\n\n $wp_registered_sidebars['sidebar-2']['after_title'] = $after;\n $wp_registered_sidebars['sidebar-3']['after_title'] = $after;\n $wp_registered_sidebars['sidebar-4']['after_title'] = $after;\n $wp_registered_sidebars['sidebar-5']['after_title'] = $after;\r\n $wp_registered_sidebars['sidebar-6']['after_title'] = $after;\r\n\n return true;\n}<\/code><\/pre>\n\n\n\nHow This Works<\/h2>\n\n\n\n
Divi's setup for widget titles is hooked into widgets_init<\/em> as it should be.<\/p>\n\n\n\nThe 100 priority is so that this function fires after Divi has registered the footers.<\/p>\n\n\n\n
I know the naming is a little weird, but the widget blocks that you access through Appearance -> Widgets<\/em> are called \"sidebars\" by WordPress.<\/p>\n\n\n\nWe call the global $wp_registered_sidebars<\/em>, which returns an array of the widget blocks, with their individual details in an array under each.<\/p>\n\n\n\nDivi'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.<\/p>\n\n\n\n
We change the before_title<\/em> and after_title<\/em> settings for each of the widget blocks.<\/p>\n\n\n\nBecause we're changing a global, there's no need to return anything.<\/p>\n\n\n\n
Just make sure you update the styling using something like #main-footer h2.widgettitle {}<\/em> as it will look different now.<\/p>\n","protected":false},"excerpt":{"rendered":"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: How This Works Divi’s setup for widget titles is<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[17,16],"yoast_head":"\n
How To Change Footer Widget Title Heading Levels In Divi<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n