I was recently tasked with creating a mobile-only theme for a site using WordPress. This was my first time doing so, as opposed to making a responsive theme (which mostly deals with media queries in CSS), and there were quite a few things that I learned.
First, I started by installing Mobile Smart, a WordPress plugin that automatically switches themes when viewed from a mobile phone (a configurable setting lets you choose whether or not to include tablets). Mobile Smart provides a starter theme so you get a headstart on programming your mobile WordPress theme. Note: When I installed this theme (you have to move it into your Themes folder), the styles were broken because of a missing “;” in one of the stylesheets.
Custom Post Types and Shortcodes for More Than 1 Theme
After that, I ran into trouble with the Custom Post Types and shortcodes that were declared in the existing desktop theme. Do I re-declare them? If I re-declare them in the new mobile theme, what would happen if a new CPT were created? Declaring it yet again?
The answer: Move shortcodes and Custom Post Types to a plugin. This will ensure that even if you change themes, your custom post types and shortcodes are preserved and fully functional.
I made my mobile theme into a child theme to the desktop theme. This might not be necessary for every mobile theme, but could help if your theme is heavily customized (because there will be a fallback to the desktop theme).
Google Maps for a Mobile Website
Since this mobile theme is for a brick-and-mortar store, it was important for there to be a map of the store. Inputting the normal desktop-sized map didn’t work for viewing on a mobile phone. The responsive Google Maps wrapper that every web designer online talks about just means that the map will span the entire width of the screen. Using that fix didn’t even show the store’s map marker.
The simple solution? Use Google’s smallest map settings or declare your custom dimensions. I found the 300×300 dimensions to be a bit wide, so I changed it to 250×300, making sure that the store’s map marker was visible on the Map Preview. When this embedded map is viewed on a mobile phone, the correct map view is shown. Since this store is a verified business on Google+, 3 buttons show up along with the average review rating.
Now instead of scrolling helplessly on a responsive version of the larger sizes of Google Maps, your mobile users will be able to get directions or call the mapped business by using Google Maps’ small map functions.
Wrong Page Template Being Used
One of the things that happened with my mobile theme is that if a page had a special page template selected on the desktop theme and there wasn’t a corresponding page template on the mobile theme, it would show the page with the desktop theme’s page template. Very awkward! To fix that, I added this to the end of my header.php file in the mobile theme:
<?php if(is_page_template( 'nosidebar.php' )) { load_template(STYLESHEETPATH.'/page.php'); XXXX } ?>
The above code would load the mobile theme’s page.php template instead of the desktop theme’s nosidebar.php template. You can do this for multiple templates just by adding PHP’s “or” between the conditionals, like so:
<?php if(is_page_template( 'nosidebar.php' ) || is_page_template( 'random.php' )) { load_template(STYLESHEETPATH.'/page.php'); XXXX } ?>
IMPORTANT NOTE: Replace “XXXX” with “e x i t ;”, removing the extra spaces in between the letters. Apparently, I can’t post that word with a semi-colon in WordPress because it errors!
WordPress Mobile Theme…Done!
That’s basically it (apart from testing and screenshots)! How have you fared with developing mobile themes?
