Our New Mobile First Child Theme for Genesis 2.0+

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.

Download Now » See Demo »

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 to margin
    • 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:

Installation

  1. Install Genesis 2.0. If don’t already have Genesis, you might want to get it.
  2. Download the Mobile First Child Theme for Genesis 2.0.
  3. Install the the child theme, either manually or via WordPress’ theme installer.
  4. Activate the child theme.
  5. Feel free to modify the child theme’s CSS and PHP to create your own unique look and feel.
  6. 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)
  • 1.2
    • Added missing width: 100%; rule for full width content
    • Added missing float: right; rule for .content div
  • 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!

17 thoughts on “Our New Mobile First Child Theme for Genesis 2.0+”

    1. mickeykay

      Hi Amit,

      Glad to hear you like the theme! If you’re looking to modify this theme (or any child theme) to match a specific dimensions, you’ll have to do a number of things:

      1. SEARCH: First off, just do a few searches in the CSS for the following strings: “width:”, “min-width:”, “max-width:”, “height:”, “min-height:”, and “max-height:”. By doing so, you’ll at least get a generalized sense of where specific dimensions are being defined, and consequently where you’ll need to make your modifications.

      2. MAIN DIVS: In the case of this child theme, you’ll most likely be changing styles for all wrapper, content area, and sidebar divs. One the site you link to, for example, the main #content div is 810px wide, whereas in our theme the main .content div is 740px wide. Most simply, you’ve just got to change 740px to 810px. If you’re looking for a solution that will make future changes easier, you may want to switch from hard pixel values to percentages.

      3. LAYOUTS: with Genesis, you get to choose from a number of different layouts (full-width, sidebar-content, sidebar-content-sidebar, etc). If you’re going to modify the child theme’s CSS, make sure you do so for all available layouts. Nothing worse than your client deciding to switch page layouts and creating a hot mess because you forgot to style it. Alternately, you can disable certain layouts in Genesis (http://wpspeak.com/remove-genesis-layouts/).

      3. MEDIA QUERIES: you’ll also probably want to modify your media queries to match the new dimensions of your site. This child theme includes two main breakpoints, one that occurs right at the max-width of the .site-inner and .wrap divs, and one that occurs at 1024px. Feel free to modify this to suit your needs – just make sure to test, test, and test some more.

      Hope this helps! Let us know if you have more questions, and we’ll do our best to get back to you ASAP.

        1. mickeykay

          Hi Rudd,

          You’re spot on – our theme shouldn’t look similar to the Genesis 2.0 sample theme, it should look IDENTICAL! We haven’t changed any styles, we’ve simply optimized the CSS to be “mobile first” (http://www.html5rocks.com/en/mobile/responsivedesign/) – so the bulk of what we’ve done is just modify the stylesheet to utilize min-width media queries instead of max-width.

          1. Salman Ahmad

            What changes max to min would cause. In short what is the difference between min and max width? Why is it better than Max-width?
            One more question 🙂 Both the themes are mobile responsive then how is it different from the Genesis Sample Child theme ?
            I’m not criticizing your work, I’m actually new to genesis framework. That’s why I’m asking such questions. Your answers would help me in my future projects. Thanks

  3. Pingback: SEO Miami

  4. Salman Ahmad

    Hello Mickey, I’ve no words. You did a great job. You don’t know but I was searching such theme from past 2 days. I tried to create one but I got failed very badly. This stater theme would help me to create my own child theme. I’ll analyze its structure actually. If my luck is not good in creating a child from scratch then I’ll definatly customize this theme. Do you have any article on creating a HTML 5 base child ? In the end, All I can say is that You saved my Days and a lot of effort. Thanks Michey

  5. tarun Soni

    Hello Mickey, i have a one question for you .i use this theme but in my site is not show the next page number what i do please replay

    1. mickeykay

      Hi Tarun,

      Can you please provide a bit more info around the issue your experiencing? Where are you not seeing page numbers that you would expect to? Can you provide a link to your site please? Our theme is almost entirely CSS, so any functionality issues are likely a result of some other PHP on your end. We’ll be happy to take a look though. Thanks!

        1. mickeykay

          Hi Tarun,

          Yep, you’re going to have to do some CSS editing 🙂 The theme is a basic, mobile-first set of CSS – if you want to add/modify, you’ll have to get your hands a little dirty.

          Good luck and let us know if you come up with anything cool!

  6. Pingback: For love. + MIGHTYminnow Web Studio & School, Oakland CA

  7. Pingback: For Love. Part Two. + MIGHTYminnow Web Studio & School, Oakland CA

  8. Pingback: What is Mobile First CSS and Why Does It Rock? + MIGHTYminnow Web Studio & School + Oakland / San Francisco Bay Area

Comments are closed.

%d bloggers like this: