How to change the default class for the widget title?

Question

I would like to change the default class of the widget title. Currently it is h2 and I would like it to be h3. I have seen there is the option of customizing css so that h2 looks like h3.

#sidebar h2 {
font-size: 24px;
}

But then, this may cause a problem if I modify h3 later, h2 will not follow the changes.

And I also saw this discussion How to add class on Widget Title about how to create a register a new widget.

But I would like to apply it to the default widget, not register a new one...

Thanks for your help

Answer 1

h2 and h3 are not html classes, they are html tags.

That said, does not exists a default html tag for the widgets, because the format used to output widgets title is set when the sidebar is registered (look at 'before_title' argument).

So how title is shown is theme related and sidebar related, does not depends on widgets.

An easy way to change the html tag your theme is using for widget titles, is to use the 'dynamic_sidebar_before' hook (fired just before the sidebar is shown) and global $wp_registered_sidebars variable to alter the 'before_title' argument on the sidebar being shown, thanks to the fact the hook pass the sidebar id:

add_action( 'dynamic_sidebar_before', 'widget_title_h2_h3' );

function widget_title_h2_h3( $sidebar_id ) {
 global $wp_registered_sidebars;
 if ( isset( $wp_registered_sidebars[$sidebar_id] ) ) {
    if ( isset($wp_registered_sidebars[$sidebar_id]['before_title']) ) {
      $now = $wp_registered_sidebars[$sidebar_id]['before_title'];
      $h3 = str_ireplace( '<h2', '<h3', $now );
      $wp_registered_sidebars[$sidebar_id]['before_title'] = $h3;
    }
 }
}

However this will change h2 to h3 in all your sidebars (at least all the sidebars where there is an h2 in the widget title).

To apply code to a specific sidebar, add a condition inside outer if that should appear like so:

if ( $sidebar_id === 'sidebar-id' && isset( $wp_registered_sidebars[$sidebar_id] ) ) {

Answer 2

By default the WordPress sidebars use H2 tags. To change these to use H3 tags instead, add this to your functions.php file:

if ( function_exists('register_sidebar') )
 register_sidebar(array('name'=>'Sidebar','before_title'=>'<h3>','after_title'=>'</h3>'));