The Studio Press Atmosphere Pro child theme is a minimalist design. As a minimalist theme, Atmosphere Pro is designed to only display its content in the Genesis full screen layout. Two frequently asked questions about Atmosphere Pro are, "How can I enable sidebars?" or "What plugin can I use to create a sidebar?"
Keep in mind that these questions are being asked about the fully featured Genesis Framework. You do not need a plugin. There are six layouts built into the Genesis Framework as depicted in the above image. The six layouts starting at the top left and moving clockwise are:
- Full Screen Content
- SideBar-Content
- Content-Sidebar
- Content-Sidebar-Sidebar
- Sidebar-Content-Sidebar
- Sidebar-Sidebar-Content
These layouts are always available to child themes. If a child theme does not display a specific layout, it is because the theme author decided to disable that particular layout. Theme authors can disable specific Genesis Framework layouts by unregistering them in the child theme's functions.php file. If you open and view Atmosphere Pro's functions.php file, you will see the following code around line 106:
To enable the sidebars and additional layouts in Atmosphere Pro, either comment out or remove the above code from functions.php.
Keeping the Home Page Full Width
Out of the box Atmosphere Pro forces full-width content for the entire site. Since you want to use sidebars, this needs to change. Comment out the following code in functions.php:
In most cases, users prefer to leave the Atmosphere Pro home page in full width mode. Since we commented out the full-width content in functions.php, we need to move this code to front-page.php:
Adding the Sidebar CSS
Since Atmosphere Pro is designed as a minimal full-width site, its style.css file has no support for sidebars. This support needs to be added back. The easiest way is to copy sidebar CSS from another Studio Press theme, in this case I'm using the CSS from Executive Pro.
First, look for the .site-inner css in style.css and overwrite what's there with the following code:
Next, add the following sidebar code to style.css:
Mobile CSS
The media query CSS below is from the latest Genesis Sample Theme. Merge the CSS below into the media queries for your theme and adjust it until it works for your situation.
This should all get you started on the right path. Since everyone has their own preferences, you'll have to further tweak the CSS to achieve the look and feel you desire, but at least you have the foundation.
