The widget area titles ( NOT the individual widgets you drag into the widget areas ) in Genesis are wrapped in h4 tags by default however you can change them. There’s several ways to do this using filter hooks already included in the default genesis function which wrap the widget titles in h4 tags.
Note : The first two solutions only change the tag and not the actual CSS for the new tag which in these examples is h2 so the font-size of your title remains the same unless you modify the original CSS rule in your child themes style.css file or use the 3rd code example below.
The 1st 2 solutions change all the widget titles from h4 to h2 which you can view by highlighting each title with your mouse and inspecting the HTML element.
Add 1 of these custom filter functions to the end of your child themes functions file:
add_filter( 'genesis_register_widget_area_defaults', 'change_all_widget_titles_to_h2' );
function change_all_widget_titles_to_h2( $defaults ) {
$defaults['before_title'] = '<h2 class="widget-title widgettitle">';
$defaults['after_title'] = "</h2>\n";
return $defaults;
}
Or this method which enables you to change the widget wrap:
add_filter( 'genesis_register_widget_area_defaults', 'change_all_widget_titles_to_h2', 10, 1 );
function change_all_widget_titles_to_h2( $defaults ) {
$defaults = array(
'before_widget' => genesis_markup( array(
'open' => '<section id="%%1$s" class="widget %%2$s"><div class="widget-wrap">',
'context' => 'widget-wrap',
'echo' => false,
) ),
'after_widget' => genesis_markup( array(
'close' => '</div></section>' . "\n",
'context' => 'widget-wrap',
'echo' => false
) ),
'before_title' => '<h2 class="widget-title widgettitle">',
'after_title' => "</h2>\n",
);
return $defaults;
}
3rd Example – Changes the h4 font-size
This code also removes the widget-title widgettitle
classes so your widget titles now display using the font-size for h2.
add_filter( 'genesis_register_widget_area_defaults', 'change_all_widget_titles_to_h2' );
function change_all_widget_titles_to_h2( $defaults ) {
$defaults['before_title'] = '<h2>';
$defaults['after_title'] = "</h2>\n";
return $defaults;
}
Was This Tutorial Helpful?