Skip to content

Instantly share code, notes, and snippets.

@longjasonm

longjasonm/functions.php

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.
Download ZIP
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.
Raw
functions.php
<?php
//* Do NOT include the opening php tag
// Add support for 4-column footer widgets
add_theme_support( 'genesis-footer-widgets', 4 );
Raw
style.css
/* 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;
}
}
@thatjeannie
Copy link

thatjeannie commented Nov 6, 2019 •
edited
Loading

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