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.
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.
Leave a Reply