Skip to content

Instantly share code, notes, and snippets.

@longjasonm
Last active November 6, 2019 00:40
Show Gist options
  • Save longjasonm/6151469 to your computer and use it in GitHub Desktop.
Save longjasonm/6151469 to your computer and use it in GitHub Desktop.
How to set up a 4-column footer in the Genesis framework. I've only seen code about 3-column setups, but I need 4 for a design I'm working on. Here's my code.
<?php
//* Do NOT include the opening php tag
// Add support for 4-column footer widgets
add_theme_support( 'genesis-footer-widgets', 4 );
/* 4-Column Footer (Overrides default 3-column setup in Genesis, so that code must remain in place)
---------------------------------------------------------------------------*/
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
width: 21.875%; /* 252px / 1152px */
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
float: left;
margin-right: 4.166666666%; /* 48px / 1152px */
}
.footer-widgets-4 {
float: right;
}
@media only screen and (max-width: 768px) {
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
width: 47.9166666666%; /* 552px / 1152px */
}
.footer-widgets-2 {
float: right;
margin: 0;
}
}
@media only screen and (max-width: 480px) {
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
width: 100%;
}
.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
margin: 0;
}
}
@kahull
Copy link

kahull commented Mar 5, 2015

Not finding this works for the media 480. I had to add a clear:both to get them to stack but they are staying in 25% columns (it's pulling from the primary footer CSS).

@davidrichied
Copy link

Works great. Thanks!

@devendrabisht
Copy link

Good work.
Worked like a charm for me.
Thanks!

@daltrey
Copy link

daltrey commented Aug 7, 2019

Hi, thanks for this! Set up seems to work as in there is a place for a 4th column frontend but it doesn't appear to have added a 4th widget area in the wordpress backend to add the actual content?

@dartagnan007
Copy link

Hi, thanks for this! Set up seems to work as in there is a place for a 4th column frontend but it doesn't appear to have added a 4th widget area in the wordpress backend to add the actual content?

I had this same question and was able to fix on my end, using the genesis-sample theme, in config/theme-supports.php
Changed line 34 in my file:

'genesis-footer-widgets' => 3,
to
'genesis-footer-widgets' => 4,

@thatjeannie
Copy link

thatjeannie commented Nov 6, 2019

Hi, thanks for this! Set up seems to work as in there is a place for a 4th column frontend but it doesn't appear to have added a 4th widget area in the wordpress backend to add the actual content?

Also add this css inside a min-width 960px media query - previously width was 100% divided by 3, just update that to 4.

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

Currently working on the Genesis Framework Genesis Sample child theme.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment