How to Add Footer Widgets

If you would like to add footer widgets to the sample child theme, follow the instructions below.

Download: Sample Child Theme

1. Add Support For Footer Widgets

Open up the Genesis sample child theme’s functions.php file and add the following code. The code should be entered at the end of the file, just before the closing ?> if there is one.

/** Add support for 3-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 3 );

If you would like to create a 4-column widgeted footer, the code would look like this:

/** Add support for 4-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 4 );

2. Add CSS to the Stylesheet

Lastly, open up the child theme’s style.css file and add the code below. Please note that this CSS is designed for a 3-column widgeted footer section. If you are using any more/less columns, you’ll need to modify or add to your CSS accordingly.

/* Footer Widgets
------------------------------------------------------------ */

#footer-widgets {
	-khtml-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 3px;
	clear: both;
	margin: 0 auto 10px;
	overflow: hidden;
	width: 958px;
}

#footer-widgets .wrap {
	font-size: 13px;
	line-height: 20px;
	overflow: hidden;
	padding: 15px 19px 0;
}

#footer-widgets .widget {
	background: none;
	border: none;
	margin: 0 0 15px;
	padding: 0;
}

#footer-widgets .textwidget {
	padding: 0;
}

#footer-widgets h4 {
	background: none;
	border: none;
	margin: 0 0 5px;
	padding: 0;
}

#footer-widgets .widget_tag_cloud div div {
	padding: 0;
}

#footer-widgets p {
	font-size: 13px;
	line-height: 20px;
	padding: 0 0 10px;
}

#footer-widgets ul {
	margin: 0;
}

#footer-widgets ul li {
	margin: 0 0 0 20px;
}

#footer-widgets #wp-calendar thead,
#footer-widgets #wp-calendar td {
	background: none;
}

.footer-widgets-1 {
	float: left;
	margin: 0 20px 0 0;
	width: 295px;
}

.footer-widgets-2 {
	float: left;
	width: 290px;
}

.footer-widgets-3 {
	float: right;
	width: 295px;
}