Genesis Full Height Sidebar with Header above Content

A recent project required duplicating an old website built using tables, but using WordPress. Since I use the Genesis framework for WordPress websites as often as possible, I thought my experience would make a great Genesis theme tutorial.

genesis full height sidebar header footer with content

The old website was flush left in the browser window. It had a full height sidebar with the header above the content area and the footer just below the content. The navigation was in the sidebar. I also wanted to make the site mobile responsive, so that the sidebar drops below the content area as usual.

Let’s get started duplicating this layout. Since the layout applies to the entire site, you will need to add all the php code below to your theme’s functions.php file. There is a lot of code, but you can follow along step-by-step. Begin with the funcitions.php from the Genesis Sample 2.0.1 theme.

Here is the Gist, if you just want to grab the code:
https://gist.github.com/mjsdiaz/7538426

Remove Extra Genesis Layouts

Genesis comes with six different layouts. We need to choose one that can help us with this layout, so force the sidebar-content-sidebar layout, and remove all the other layout choices. Again add to functions.php.

<?php
//* Do NOT include the opening php tag

// 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' );

Remove Primary Sidebar

For this layout, it is easiest to use the secondary sidebar (sidebar-alt) for the full height sidebar, and remove the primary sidebar, so that the header, content, and footer can occupy the entire width of the content-sidebar-wrap.

<?php
//* Do NOT include the opening php tag

// Unregister and remove markup for sidebar-primary
unregister_sidebar( 'sidebar' );
remove_action( 'genesis_after_content', 'genesis_get_sidebar' );

Add Structural Wraps

We will only need the genesis wraps in the navigation and site-inner.

<?php
//* Do NOT include the opening php tag

// Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
	'nav',
        'subnav',
	'site-inner'
) );

Note that for my layout, I did not use the secondary navigation. The primary navigation is used to help with the mobile responsive layout.

Reposition the Header into the Content-Sidebar-Wrap

To move the header, we first need to remove the header from it’s normal location, and then we can reposition it inside the content-sidebar.

<?php
//* Do NOT include the opening php tag

//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 );

Reposition Footer into the Content-Sidebar-Wrap

Next you want to move the footer from it’s normal location, and repostion it into the content-sidebar-wrap. We can also move the footer widgets to a position just above the new footer location.

<?php
//* Do NOT include the opening php tag

//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 );

Styles to Define the Layout Width and Position

Next you need to edit the style.css file to add and remove styles for the new layout. Only what’s required for the basic layout will be shown. You will want to add additional styles for your particular theme design.

Before starting on the detailed styles, look near the bottom of style.css. The entire section
@media only screen and (max-width: 1139px) { }
is no longer needed and can be removed.
The first line of the next section
@media only screen and (max-width: 1023px) {
can be changed to read:
@media only screen and (max-width: 960px) {

You can make the following changes to the Site Containers section in the Structure and Layout section; this is all the code needed for this section. This code will create a flush left layout with a maximum width of 960px. You can also use the wrap to add the full-height sidebar background color, if you like. I’ve commented the lines of code for explanation.

/* 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;
}

Styles for the Column Widths and Positions

Next look at the Column Widths and Positions section. You can remove or comment out much of it because we are only using the sidebar-content-sidebar layout. So below is all the code that is needed for the Column Widths and Positions section. (Note some styles are here only for clarification.)

/* 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;
}

Styles for Site Header

Next we need to make some adjustments to the styles for the site-header and title. This code is all that’s needed in the Site Header section.

/*
Site Header
------------------------------------------------------------------------------------- */
/* This is the entire section */

.site-header {
	margin: 0;
	overflow: hidden;
	padding: 40px 0;
	padding: 4rem 0;
	width: 100%;
}

Styles to the Title Area and Widget Area

These are only the changes to the Title Area and Header Widget Area sections. The remaining styles can be styled as you choose.

/* Title Area
--------------------------------------------- */
/* Change only these sections */

.title-area {
	float: left;
	font-family: Lato, sans-serif;
	font-weight: 700;
	padding: 16px 40px;
	padding: 1.6rem 4rem;
	width: 320px;
}

/* Widget Area
--------------------------------------------- */

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 320px;
}

Styles for the Footer Widgets

Again these are the footer widget selectors that change; the rest can remain the same.

/*
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

Here are some other styles that can be added or changed, so that the sidebar and widgets are all gray, but they can be styled by you too, of course.

.sidebar .widget {
	background-color: #777;
	color: #fff;
}

.sidebar .widget .widget-title {
	color: #fff;
}

.sidebar .widget a {
	color: #fff;
}

And finally, we’re finished! That takes care of the basic layout.

Mobile Responsive Navigation Menu

The navigation menu for this theme uses the Custom Menu widget in the sidebar. At the smaller screen size, the sidebar menu is hidden and the primary navigation is used. You can read more about using Responsive Website Navigation in Genesis themes.

So there you have it – a mobile responsive Genesis theme layout with a full height sidebar, header above the content, and footer below the content.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

8 responses to “Genesis Full Height Sidebar with Header above Content”

  1. Excellent Post – Just what I was looking for to jumpstart me on a project!!! Saved me a few hours.

  2. Z says:

    Thank you, this is a lifesaver! Brilliant jumpstart for my project :)

  3. Lara says:

    I appreciate you publishing this great tutorial, Marcy. I am working on a client site that requires a layout like this. I was scratching my head on the best way to modify the Genesis Sample theme to make it happen – Googled it and Voila! Many thanks to you.

  4. Elham says:

    YOU ARE AMAZING! THANK YOU SO MUCH FOR THIS! :xxx

Leave a Reply

Your email address will not be published. Required fields are marked *