Flexible Footer Widgets in Genesis Framework

I have recently posted a quick hack guide to register different column footer widgets in Genesis and it will work with any of child theme. However, sometimes we need to change the layouts and adding different CSS everytime is time-consuming.

I believe sometimes we need to write CSS manually to change the layout width of a column according to media queries but flexible widgets are helpful in some cases and it is not difficult to implement in a specific section.

Flexible widgets automatically add a specific CSS class based on the number of contents added in that particular widget section.

We are going to use the same method of register and display flexible widgets in Genesis but just changing the hook position. Let’s see how we can make a flexible widget section work for footer Widget.

1. Setup Widget count Script and add CSS classes according to the number of widgets added in the flexible section.
2. Adding CSS in the stylesheet that is added by above functions.
3. Register a widget area aka flexible section with a unique id.
4. Add the positioning and function to output the flexible widget section, we have registered in (2) with additional flexible-widgets class and id (2) to make it work as (1)

Step 1

Add the following in your child theme’s functions.php

/**
 * Setup widget counts.
 *
 * @param string $id The widget area ID.
 * @return int Number of widgets in the widget area.
 */
function custom_count_widgets( $id ) {
    global $sidebars_widgets;

    if ( isset( $sidebars_widgets[ $id ] ) ) {
        return count( $sidebars_widgets[ $id ] );
    }
}

/**
 * Set the widget class for flexible widgets.
 *
 * @param string $id The widget area ID.
 * @return Name of column class.
 */
function custom_widget_area_class( $id ) {
    $count = custom_count_widgets( $id );

    $class = '';

	if ( $count == 1 ) {
		$class .= ' widget-full';
	} elseif ( $count % 3 == 0 ) {
		$class .= ' widget-thirds';
	} elseif ( $count % 4 == 0 ) {
		$class .= ' widget-fourths';
	} elseif ( $count % 2 == 1 ) {
		$class .= ' widget-halves uneven';
	} else {
		$class .= ' widget-halves';
	}

    return $class;
}

Step 2

Add the following in your child theme’s style.css

/* Flexible Widgets
--------------------------------------------- */

.flexible-widgets .wrap {
	max-width: 100%;
	clear: both;
	margin: 0 auto;
	padding: 60px 30px 0;
}

.flexible-widgets.widget-area .widget {
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	margin-bottom: 40px;
}

.flexible-widgets.widget-halves .widget:nth-child(odd),
.flexible-widgets.widget-thirds .widget:nth-child(3n+1),
.flexible-widgets.widget-fourths .widget:nth-child(4n+1) {
	clear: left;
}

@media only screen and (max-width: 767px) {
	.flexible-widgets.widget-fourths .widget,
	.flexible-widgets.widget-halves .widget,
	.flexible-widgets.widget-thirds .widget {
		float: none;
		width: 100% !important;
	}
	.flexible-widgets .widget {
		padding-left: 0;
		padding-right: 0;
	}
}

@media only screen and (max-width: 959px) {
	.flexible-widgets.widget-fourths .widget {
		width: 50%;
		float: left;
	}
}

@media only screen and (min-width: 960px) {
	.flexible-widgets.widget-full .widget,
	.flexible-widgets.widget-halves.uneven .widget:last-of-type {
		float: none;
		width: 100%;
	}
	.flexible-widgets.widget-fourths .widget {
		width: 25%;
	}
	.flexible-widgets.widget-halves .widget {
		width: 50%;
	}
	.flexible-widgets.widget-thirds .widget {
		width: 33.33%;
	}
}

Step 3

We are registering a widget area with id footer-flexible-widget Add this in child theme’s functions.php

// Register footer flexible widget area
genesis_register_widget_area(
    array(
        'id'          => 'footer-flexible-widget',
        'name'        => __( 'Flexible Widget for Footer', 'text-domain' ),
        'description' => __( 'This is the footer flexible widget section', 'text-domain' ),
    )
);

Step 4

Hook and output the widget before footer (genesis_before_footer) we have just registered. Add this in child theme’s functions.php

add_action( 'genesis_before_footer', 'custom_footer_flexible_widget' );
/**
 * Display Footer Flexible widget area before footer
 */
function custom_footer_flexible_widget() {

    genesis_widget_area( 'footer-flexible-widget', array(
        'before' => '<div class="flexible-widgets widget-area' . custom_widget_area_class( 'footer-flexible-widget' ) . '"><div class="wrap">',
        'after'  => '</div></div>',
	) );
	
}

 

Go to Appearance >> Widgets and populate the widget section that has been made flexible above with 1 or more widgets.

Tweaks.

What if you want flexible widget not to show on front-page but show on other pages? We will use a conditional tag to exclude the widget from showing on the frontpage.

add_action( 'genesis_before_footer', 'custom_footer_flexible_widget' );
/**
 * Display Footer Flexible widget area before footer
 */
function custom_footer_flexible_widget() {
	// if we are on the front page, abort this function.
	if ( ( is_front_page() ) ) {
		return;
	}
    genesis_widget_area( 'footer-flexible-widget', array(
        'before' => '<div class="flexible-widgets widget-area' . custom_widget_area_class( 'footer-flexible-widget' ) . '"><div class="wrap">',
        'after'  => '</div></div>',
	) );
	
}

Please note:- We are using return early hook that’s why there is no ! for like excluding me.