How to add an additional Footer widget area in Altitude Pro

Posted on
5/5 - (295 votes)

Step 1

Edit Altitude Pro’s functions.php.

a) Change

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

to

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

b) Change

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'nav',
	'subnav',
	'footer-widgets',
	'footer',
) );

to

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'header',
	'nav',
	'subnav',
	// 'footer-widgets',
	'footer',
) );

Step 2

Edit Altitude Pro’s style.css.

Replace the Footer Widgets section (line 1688 to line 1726 in the unmodified Altitude Pro’s stylesheet) with the following:

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

.footer-widgets {
	/*background-color: #22a1c4;*/
	clear: both;
	text-align: center;
	position: relative;
	z-index: 9;
}

/*.footer-widgets .wrap {
	padding-bottom: 100px;
	padding-top: 100px;
}*/

.footer-widgets,
.footer-widgets .wrap a,
.footer-widgets .wrap a.button {
	color: #fff;
}

.footer-widgets a:hover {
	color: #000;
}

.footer-widgets li {
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.footer-widgets .widget {
	/*margin-bottom: 40px;*/
	max-width: 1200px;
	margin: 0 auto;
	padding-top: 100px;
}

.footer-widgets .widget:last-child {
	padding-bottom: 100px;
}

.footer-widgets p:last-child {
	margin-bottom: 0;
}

.footer-widgets-1 {
	background-color: #22a1c4;
}

.footer-widgets-1 a {
	color: #fff;
}

.footer-widgets-2 {
	background-color: #23282d;
}

Step 3

At Appearance > Widgets populate Footer 2 widget area with your desired widget(s).