How to Mobilize Your Genesis Theme in Less Than an Hour

NOTE 4/20/2015: Genesis child themes are now mobile-responsive, so if you are a Genesis user you shouldn’t need this tutorial. Actually, most WordPress themes created in the past 2 years are responsive. You might be better off just updating your theme, which is what I did for CBI once Lifestyle Pro came out.

I love the Genesis Theme Framework (not an affiliate link) by StudioPress. Sometimes I love to hate it, because I have to figure out how to do something in Genesis that I already know how to do in, say Twenty Eleven or any other “standard” WordPress theme, but it’s worth figuring out the idiosyncrasies. Using any framework means less labor for a designer: the creators of the framework are responsible for keeping it up to speed with WordPress updates and features. Genesis itself has some lovely built-in features, like SEO titles and per page/per post layout options. And there are all those nice child themes bundled up in the developer package to mine for elements of a new theme.

There’s just one little problem with the way that Genesis creates its home page layouts: widgets. A Genesis magazine layout is made up entirely of dynamic content, with the different areas populated by the Genesis Featured Page and Genesis Featured Post widgets. They are marvelously flexible things (and there’s even a Genesis Featured Widget Amplified plugin that displays custom post types and custom taxonomies), and once you’ve mastered adding widgetized areas to a home.php file, you can save yourself hours of coding custom loops by using them.

Here’s an example, using the Lifestyle Theme, from the client site that inspired me to write this post:

From the back end, the main content area looks like:

The sidebar and the footer are also full of widgets.

The Lifestyle theme is easy to set up and rearrange, and even more flexible thanks to the Dynamic Widgets plugin. Widgets are a great feature of WordPress and using them to build home page designs makes Genesis more user-friendly.

But it turns out that widgets don’t play nicely with mobile plugins, and therefore mobile plugins don’t like Genesis.

I hadn’t realized this at first, because I myself am a dumbphone user. I’d asked the client to check on the appearance of the site on a mobile device, but it turns out my main contact there didn’t have a smartphone either, so she had to ask a third person, and the response wasn’t entirely clear. Another visitor to the site actually asked “Why do I see a calendar?” Only when I borrowed my husband’s iPhone did I understand what this person had seen, and only after a lot of hunting around did I realize why.

This is what WP Mobile Detector was showing to those with iPhones (and iPads: it wasn’t making a distinction):

This is not the site’s home page: it’s the blog index. This was confusing enough for me to find; I can completely understand why the typically non-technical member of Congregation Beth Israel Connecticut might think it was an event calendar. (There is one of those on the site, but this is not it.)

I went looking at other mobile plugins. StudioPress mentions the Wapple Architect Mobile Plugin for WordPress on their FAQ page, but while that at least displays the regular site to iPads (which really don’t need any special design concessions), it still couldn’t recognize the home page content, though I was able to customize the menu. (It supposedly displays a sidebar and lets you choose widgets, but that feature did not work properly.)

I also looked at MobStac WordPress Mobile, which did both the best and worst jobs of displaying content comprehensively, since it completely ignored the category exclusion rules set up to keep the events listings and newsletters off the main blog page. And I tried WPtouch, but to configure that properly you need to spend a lot of time creating custom icons, and it still wouldn’t create the  home page I needed. I took a look at OnSwipe, but that says  in its FAQ that it doesn’t display widgets, so that wasn’t going to be of any use to me. I even started looking at premium plugins like iThemes Mobile, but wasn’t convinced—and not authorized by the client to spend money, either.

Trolling around in the StudioPress support forums was not terribly satisfactory. There were a couple of recommendations (from the same person) for the pro version of WPtouch. And then, finally, a link to a tutorial from Smashing Magazine called “How to Use CSS3 Media Queries to Create a Mobile Version of Your Website.”

Now, CBI was not paying me to design a mobile theme, which is why I didn’t just develop one in the first place. (That, and I’m fairly new to responsive design: see the previous post.) They’re a non-profit on a tight budget, and if a free mobile plugin had worked, it would have been good enough for their purposes. Based on my experience with other sites, I assumed (very, very dangerous thing to do), that a mobile plugin  would work for them. It wouldn’t, and I’d promised them a mobile-ready site.

Besides, the instructions seemed so simple. I suggest you read the entire article, but here’s the short form for converting your old stylesheet for mobile devices.

1. Save a copy of your style.css file as small-device.css. Remember to rename the file within the comments.
2. Open the file in a text editor. Search for the word “float.” If it applies to a div, replace “left” or “right” with “none.”
3. Look for a “width” property on those divs. Set it to “auto.”
4. Set the base font size to 100% and convert the remaining font sizes to ems or %. You will probably want to increase font sizes, particularly in menus and search box. You could skip this step and still have something more usable than the plugins are giving you, though.
5. Upload the small-device.css file to your child theme directory (in my case this was wp-content/themes/lifestyle)
6. Open your functions.php file and add the following lines at the end:

   add_action('wp_head','mobile_styles');
   /**
    * Add mobile stylesheet
    *
    */
   function mobile_styles() { 
   	<link href="<?php bloginfo('stylesheet_directory');?>/small-device.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" rel="stylesheet" type="text/css"/>
   }
   

Doing this took me about an hour, including reading the tutorial and figuring out how to put the stylesheet link into the functions.php file. (That info comes from a StudioPress tutorial on adding a print stylesheet.) I spent another hour or so today mucking about with the menu and the header and the fonts. The site has a fairly long menu, and I didn’t like the way it looked stacked. I’m not completely happy with my current solution of dividing it into three columns, since the drop-down menus now also divide up that way, but I think it’s an improvement. I created a new, taller subnav background image and increased the menu font size and line height to make it easier to use. I also set the description display to “none” in order to have the site name displayed more readably. (I had tried to use a different header image, but couldn’t figure out how to override the custom header choice in the theme options.)

The result is not pixel-perfect, but every single element of the original home page is there and working, from the image slider to the featured video.

You can visit http://bethisraelwesthartford.org on any device with a screen 480 pixels or smaller to check it out for yourself.

(Edit 2015: Not any more: you will see the new mobile-responsive site at http://cbict.org.)

Those of you who have more experience than I do with responsive design can doubtless make suggestions for improvement.

Meanwhile, anyone using a Genesis theme can quickly create a mobile-friendly version of the site. Given that, I would expect StudioPress to be able to release a spiffier version of this small-device.css file for each child theme, quite easily, at the next update, if not to start making all the new themes responsive out of the box. Unlike me, their designers know their themes, and their framework, backwards and forwards, and wouldn’t have to spend as much time tinkering while adjusting things.