Mobile First Genesis 2.0 Child Theme
Download our new Mobile First Child Theme for Genesis 2.0. The theme looks and feels identical to the Genesis 2.0 Sample Theme, however it has been optimized with a “Mobile First” approach, meaning faster load times and an overall better experience for mobile users.
Intro
We’ve long been huge fans of the Genesis Framework – it integrates with tons of well-designed child themes, it offers lots of amazing functionality and plugins, and the StudioPress support team is consistently speedy and helpful. One thing we’ve always wanted, however, is a basic Genesis child theme that is “Mobile First.” So we decided to go ahead and make our own! We wanted to keep things as simple as possible, so we started with the Genesis 2.0 Sample Theme and went from there. Most of the work just involved rearranging CSS, however you may want to check out the full list of details below for more information.
Theme Details
- Requires Genesis 2.0+.
- All media queries have been switched from “max-width” to “min-width”.
- Media queries have been rearranged to proceed from smallest to largest widths.
- Only two changes were made to the original CSS to preserve styling after rearranging the media queries:
- Line 700:
.sidebar .enews-widget
was changed to.sidebar .widget.enews-widget
- Line 1366-67: the
margin-top
selector was changed tomargin
- Line 700:
- This theme’s functions.php is identical to that in the Genesis 2.0 Sample Theme, only difference being the child theme name, url, and version definitions. It adds theme support for:
- HTML5
- Responsive viewport meta tag
- Custom background
- 3-column footer widgets
Important Note
Being as this theme utilizes mobile first media queries, you’ll need to utilize a polyfill if you want the theme to appear correctly in Internet Explorer 8 and below. Here are a few options:
- Respond.js WordPress plugin
- css3-mediaqueries.js (you’ll need to manually enqueue this script)
Installation
- Install Genesis 2.0. If don’t already have Genesis, you might want to get it.
- Download the Mobile First Child Theme for Genesis 2.0.
- Install the the child theme, either manually or via WordPress’ theme installer.
- Activate the child theme.
- Feel free to modify the child theme’s CSS and PHP to create your own unique look and feel.
- All done!
Change Log
- 1.4
- Fixed nav extras CSS to better display search bar.
- 1.3
- Moved
.first {}
CSS rule into media queries where it belongs (thanks again @GaryJ)
- Moved
- 1.2
- Added missing
width: 100%;
rule for full width content - Added missing
float: right;
rule for.content
div
- Added missing
- 1.1
- Updated style.css table of contents to reflect new media queries (thanks @GaryJ)
Feedback?
We’d love to hear it. Please let us know if you have any comments or suggestions below. Thanks!