How to Add Four Footer Widgets in Genesis Theme?

If you’re using the Genesis theme and want to add more footer widgets, there are two ways to do it. In this article, we’ll walk you through both options with step-by-step instructions and code snippets.

Option 1: Modify theme-supports.php

1. Open the /config/theme-supports.php file in your Genesis child theme.
2. Find the ‘genesis-footer-widgets’ code.
3. Change the value to 4 to add four footer widgets.
4. Save the changes.

Next, you need to add CSS code to fix the layout.

1. Open the style.css file in your Genesis child theme.
2. Modify the CSS code on line 1699 of your style.css file to

.footer-widget-area {
  float: left;
  margin-bottom: 0;
  width: calc(100% / 4);
}

Option 2: Add Code to functions.php

1. Open the functions.php file in your Genesis child theme.
2. Add the following code:

// Add fourth footer widget area
add_action( 'widgets_init', 'wp_daily_add_footer_widget_area' );
function wp_daily_add_footer_widget_area() {
	genesis_register_sidebar( array(
		'id' => 'footer-4',
		'name' => __( 'Footer 4', 'genesis-sample' ),
		'description' => __( 'This is the fourth footer widget area.', 'genesis-sample' ),
	) );
}

Save the changes.

To display the four footer widgets in your theme, you need to add the following code:

add_action( 'genesis_footer_widget_areas', 'wp_daily_footer_widgets' );
function wp_daily_footer_widgets() {
	echo '<div class="footer-widgets" id="genesis-footer-widgets">';
	echo '<div class="wrap">';
	genesis_widget_area( 'footer-1', array(
			'before' => '<div class="widget-area footer-widgets-1 footer-widget-area">',
			'after' => '</div>',
	) );
	genesis_widget_area( 'footer-2', array(
			'before' => '<div class="widget-area footer-widgets-2 footer-widget-area">',
			'after' => '</div>',
	) );
	genesis_widget_area( 'footer-3', array(
			'before' => '<div class="widget-area footer-widgets-3 footer-widget-area">',
			'after' => '</div>',
	) );
	genesis_widget_area( 'footer-4', array(
			'before' => '<div class="widget-area footer-widgets-4 footer-widget-area">',
			'after' => '</div>',
	) );
	echo '</div></div>';
}

To fix the CSS layout follow the same steps as in option 1.