Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Genesis Layout Full Height Sidebar with Header above Content and Footer Below Content
<?php
//* Do NOT include the opening php tag
// Add the code below to the functions.php of the Genesis Sample 2.0.1 theme
// Force sidebar-content-sidebar layout setting
add_filter( 'genesis_site_layout', '__genesis_return_sidebar_content_sidebar' );
// Unregister layout settings
genesis_unregister_layout( 'sidebar-content' );
genesis_unregister_layout( 'content-sidebar' );
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );
genesis_unregister_layout( 'full-width-content' );
// Unregister and remove markup for sidebar-primary
unregister_sidebar( 'sidebar' );
remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
// Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
'nav',
'subnav',
'site-inner'
) );
//Remove the header from normal location
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );
// Move header into into content-sidebar-wrap
add_action( 'genesis_before_content', 'genesis_header_markup_open', 5 );
add_action( 'genesis_before_content', 'genesis_do_header' );
add_action( 'genesis_before_content', 'genesis_header_markup_close', 15 );
//Remove the footer from normal location
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );
// Move footer into content-sidebar-wrap
add_action( 'genesis_after_content', 'genesis_footer_markup_open', 5 );
add_action( 'genesis_after_content', 'genesis_do_footer' );
add_action( 'genesis_after_content', 'genesis_footer_markup_close', 15 );
// Move footer widget into content-sidebar-wrap above new footer
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
add_action( 'genesis_after_content', 'genesis_footer_widget_areas', 4 );
/* Replace each section of Genesis Sample 2.0.1 with the code for each section */
/* Site Containers
--------------------------------------------- */
/* This is the entire section */
.wrap {
background-color: #777; /* full height sidebar background color */
margin: 0 auto 0 0; /* flush left layout */
width: 100%;
max-width: 960px;
}
/* Column Widths and Positions
--------------------------------------------- */
/* This is the entire section */
/* Wrapping div for .content and .sidebar-primary */
.content-sidebar-wrap {
background-color: #fff;
float: right;
width: 740px;
}
/* Content */
.content {
background-color: #fff;
width: 100%;
}
/* Primary Sidebar */
.sidebar-primary {
width: 0;
}
/* Secondary Sidebar */
.sidebar-alt,
.sidebar {
background-color: #777;
float: left;
margin: 0;
padding: 0;
text-align: center;
width: 220px;
}
/*
Site Header
------------------------------------------------------------------------------------- */
/* This is the entire section */
.site-header {
margin: 0;
overflow: hidden;
padding: 40px 0;
padding: 4rem 0;
width: 100%;
}
/* Title Area
--------------------------------------------- */
/* Change only this section */
.title-area {
float: left;
font-family: Lato, sans-serif;
font-weight: 700;
padding: 16px 40px;
padding: 1.6rem 4rem;
width: 320px;
}
/* Widget Area
--------------------------------------------- */
/* Change only this section */
.site-header .widget-area {
float: right;
text-align: right;
width: 320px;
}
/*
Footer Widgets
---------------------------------------------------------------------------------------- */
/* Change only these sections */
.footer-widgets-1,
.footer-widgets-3 {
width: 193px;
}
.footer-widgets-2 {
width: 193px;
}
.footer-widgets-1 {
margin: 0 40px;
margin: 0 4rem;
}
.footer-widgets-3 {
margin: 0 40px 0 0;
margin: 0 4rem 0 0;
}
/* Other styles you can edit */
.sidebar .widget {
background-color: #777;
color: #fff;
}
.sidebar .widget .widget-title {
color: #fff;
}
.sidebar .widget a {
color: #fff;
}
@media only screen and (max-width: 1139px) {
/* Remove this entire section */
}
/* Change @media only screen and (max-width: 1023px) { to */
@media only screen and (max-width: 960px) {
@LukeSkaff

This comment has been minimized.

Copy link

LukeSkaff commented Jan 15, 2016

Hi, This is awesome, do you have a copy of the full CSS file as the CSS here is not too straightforward to replace the genesis sample theme CSS selectors as the selectors in the sample theme CSS files have more selectors on the lines than shown in the file. Maybe the sample theme has been updated. For example in the sample theme CSS file the .wrap selectors is actually two selectors ".site-inner, .wrap {..." Cheers,
Luke

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.