footer widgets hook

[keraweb]

Hi there, I found out that the default genesis footer widgets are missing a hook.

in the function genesis_widget_area there are the hooks: "genesis_before_**ID**_widget_area" and "genesis_after_**ID**_widget_area". These are great to make an inner container for your widgets!

My problem was that I needed inner containers in my footer widgets and found out that the footer widgets created with the default add_theme_support function didn't use the genesis_widget_area function!

My sollution was this:

remove_action('genesis_before_footer','genesis_footer_widget_areas');
add_action('genesis_before_footer','genesis_footer_widget_areas_custom');
function genesis_footer_widget_areas_custom() {
	$footer_widgets = get_theme_support( 'genesis-footer-widgets' );
	if ( ! $footer_widgets || ! isset( $footer_widgets[0] ) || ! is_numeric( $footer_widgets[0] ) ) {return;}
	$footer_widgets = (int) $footer_widgets[0];
	//* Check to see if first widget area has widgets. If not, do nothing. No need to check all footer widget areas.
	if ( ! is_active_sidebar( 'footer-1' ) ) {return;}
	$inside  = '';
	$output  = '';
 	$counter = 1;
	while ( $counter <= $footer_widgets ) {
		//* Darn you, WordPress! Gotta output buffer.
		ob_start();
		dynamic_sidebar( 'footer-' . $counter );
		$widgets = ob_get_clean();
		$inside .= sprintf( '<div class="footer-widgets-%d widget-area"><div class="inner">%s</div></div>', $counter, $widgets );
		$counter++;
	}
	if ( $inside ) {
		$output .= genesis_markup( array(
			'html5'   => '<div %s>',
			'xhtml'   => '<div id="footer-widgets" class="footer-widgets">',
			'context' => 'footer-widgets',
		) );
		$output .= genesis_structural_wrap( 'footer-widgets', 'open', 0 );
		$output .= $inside;
		$output .= genesis_structural_wrap( 'footer-widgets', 'close', 0 );
		$output .= '</div>';
	}
	echo apply_filters( 'genesis_footer_widget_areas', $output, $footer_widgets );
}

You can see I just copied the genesis_footer_widget_areas fomr the footer.php file (located: lib > structure) and edited the $inside in the function.

I would like to ask if this could improved in the next genesis updates, I find it strange that you can't alter this in the default footer widgets..

#EDIT -> The reason that I would like to see this implemented is because I don't like to alter core functionality due to incompatibility with future updates..

Thanks! Jory

[David Chu]

Hi,
I would be interested in seeing the context where you would need to do something that difficult. Do you have a URL to show?

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[keraweb]

Hi Dave,

It's still a development site so its only available for my own IP.

Here is the code:

<div class="footer-widgets">
  <div class="wrap">
    <div class="footer-widgets-1 widget-area">
      <div class="inner">**MULTIPLE WIDGETS**</div>
    </div>
    <div class="footer-widgets-2 widget-area">
      <div class="inner">**MULTIPLE WIDGETS**</div>
    </div>
    <div class="footer-widgets-3 widget-area">
      <div class="inner">**MULTIPLE WIDGETS**</div>
    </div>
    <div class="footer-widgets-4 widget-area">
      <div class="inner">**MULTIPLE WIDGETS**</div>
    </div>
  </div>
</div>

And here is the functionality for the template:

div.footer-widgets -> white background (white), 100% width
div.wrap -> none (it was allready there.. but no use for me since it wraps all the widget areas)
div.widget-area -> width 25%, paddings for separation of the widget areas
div.inner -> the widget area background (light gray)

The reason I needed to do this is because when I put the background on the widget-area div, the padding will have that background aswell (instead of the white color of the footer-widget area.
And when I make the padding of the widget-area a margin the width's won't make 100% together but more. (I have all elements set to box-sizing: border-box).
This was the only way I could think of to make the 4 widget areas equal with (25%) plus let them have separate backgrounds with a white line in between.

I could also use the widgets for the gray background, but that won't work either since I'm equalizing the heights of the widget-areas (looks neat) and I want the gray background to be equalized as well.

Plus despite of the above... ALL the other genesis widget areas have this hook, so why not the footer widget areas?

Thanks, Jory

[David Chu]

Jory,
Very persistent and clever solution, I see what you mean. I ran into a somewhat analogous situation on a site that's also in test. The designers I work with put me through similar mini torture tests. 🙂

What's cool about the web is the number of ways you can achieve something. I'm a CSS hacker, so my preference is usually a CSS solution first. There are some various interesting ways to get equalized columns, and I got great ideas here. Before I was aware of some of those tricks, I would use jQuery to handle that sort of thing. Hackish, but non-invasive, and not hard to do. And filtering and hooking will usually do the job short of that. What's incredibly ironic is what kind of machinations we must go through to replicate the behavior of dreaded HTML tables. 🙂

When I need more control, I might just pull out the stock footer (or other part) completely, and make my own widgets and containers, which I can stuff with almost anything easily.

More to your point, even going right to the Codex, I've found relatively few options for "playing with" widget output, unless you're defining the widgets as per above. I haven't examined it too much, because I haven't had the need, but I would guess that the Genesis widget functions are mostly wrappers for the stock WP stuff, rather than having loads of functionality themselves. I'm sure Gary Jones would know all about that!

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts