Last active
November 6, 2019 00:40
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| //* Do NOT include the opening php tag | |
| // Add support for 4-column footer widgets | |
| add_theme_support( 'genesis-footer-widgets', 4 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| } |
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
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,