WP SITES

Log in

Change Genesis Widget Area Title HTML Tag

—

by

Brad Dalton

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;
	
}

Related Tutorials

Comments

2 responses to “Change Genesis Widget Area Title HTML Tag”

  1. Mohand HAMADOUCHE Avatar
    Mohand HAMADOUCHE

    Hi,

    i tried all of these methods + https://wpsites.net/wordpress-tips/php-code-to-modify-the-widget-title-of-any-widget/ .. to modify the heading of a specific widget ( AgentPress Pro theme , Home Featured Widget ) ..

    I didnt find any method online 🙁

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Mohand. To modify the heading? Can you be more specific?

      Are you referring to the AgentPress listings widget? If so, what widget specifically did you want to modify?

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.