How To Build A Mobile WordPress Theme, And Why You Should
There are 5 reasons why you need to build a theme specifically for visitors to your WordPress site. And already having a responsive theme is one of them.
Truth is that most responsive themes provide a second-rate mobile experience and as mobile becomes the dominant device for accessing the web, your traffic is going to suffer.
Whilst you can get plugins that will help you create a mobile theme, let me show you how to take complete control of your visitor’s mobile experience by building your very own custom mobile theme.
5 Reasons Why You Need A Specific Theme For Mobile?
Your current theme is not responsive
Seems blindingly obvious but if your current theme is not responsive then it’s likely a nightmare to use on a mobile device. Creating a specific theme is going to be cheaper, quicker and easier than building a brand new responsive theme.
Your current theme is responsive but the mobile experience sucks
Even if your current theme is responsive it might still be a pain to use as too many responsive themes provide a terrible experience on a mobile. Even the current WordPress default, Twenty Fourteen, has plenty of issues.
You want to optimize the experience for each platform
Truth is that unless your theme contains effectively 3 virtual themes (one for desktop, one for tablet and one for mobile) then it’s had to compromise somewhere: you are using a jack-of-all-trades and a master-of-none.
To truly optimize the experience for each platform you need to build a theme for each platform.
You want to build a mobile app
If you use the right tools then a mobile theme can be an excellent stepping stone to a mobile app allowing you to get all your trials and testing done in the much more forgiving web environment.
And it just so happens, that this article will introduce you to the tool that the developers of the Twitter for iPhone app used for their prototyping.
You want to target the mobile market
Perhaps you’ve decided that you are going to create a unique product for mobile users that you want to deliver local news targeted at commuters or you want to deliver fitness content to gym junkies or live match stats to sports event attendees.
If you’ve targeted mobile then you need a mobile theme.
Initially released in November 2012, it’s proven popular as a prototyping tool for mobile apps with its platform-specific CSS files, its own icon set, and a swag of ui components. It’s also now officially part of the Bootstrap family.
Building the user interface is, as you’ll see, very quick and easy. It’s also easy to get your head around Ratchet’s model.
Based around the typical one-page app paradigm, you designate a header and a content area. All local links are converted to ajax and Ratchet simply checks the server response and updates the header (if it has changed) and the content area as necessary.
What this means is that you have complete control over the look and feel of the app from WordPress itself. No big deal, perhaps, when dealing with a web app but fairly significant when it comes to mobile apps.
Using Ratchet To Build A Mobile Theme
Ratchet’s model is perfect for delivering WordPress content to a mobile device and effectively we will be building a Ratchet app into our mobile theme.
Our example theme is a very simple version of the excellent Quartz website:
Now, that is a certain irony in this choice, given that Quartz is a responsive theme that caters extremely well for mobile but Quartz seems to be the exception rather than the norm.
Delivering the Ratchet App
Ratchet is based around a single page that looks something like this:
We can translate this to a WordPress theme as follows:
The header.php file handles all the code from the <!DOCTYPE html> declaration to the opening of the <div class=”content”> element.
Things to notice:
- link tags are added to images for web-clipping
- A “home” icon is added to the header if the page being viewed is not the home page
- Two “popovers” are created, one for categories and one for tags.
The popovers are unordered lists that are built using a common function, ratchet_popover_table, located in the functions.php file.
Remember that Ratchet only looks for changes in the header rather than replacing as it does with the content.
The footer.php does little more than generate the closing tags for the content div, body and html elements and calling wp_footer.
This just helps make the theme extendable via plugins.
The functions.php is also fairly straight-forward:
- Adds theme support for post thumbnails (featured images)
- Adds a function to retrieve the caption for a featured image. This is a really useful bit of code (thanks to thanks to Ben Byrne via bobz.co) as getting the caption for a WordPress image is unnecessarily difficult.
- Adds a function to build a popover list for a given term type
The major file in any theme (in fact, the theme won’t work without it) is, of course, style.css.
I won’t go through this file, suffice to say that it’s mostly sitting alongside ratchet.css to style the content, set colors for headings, etc.
There is just one technique that I want to highlight, though, as this was new to me and may be of interest to you, and that’s adding the pointer that sits on top of the first headline and points “into” the image.
This effect is achieved by making use of the :before CSS selector to add content, the pointer, before an element:
border-right: 15px solid transparent;
border-bottom: 15px solid #ffffff;
border-left: 15px solid transparent;
Be aware that the element itself (in this case #post-list) must have its position set to relative: it won’t work if you leave it with the default of static.
Index.php, Single.php, Archive.php
All these files are very simple and are there really just to provide the content.
Index.php, which is used for the home page, and archive.php are virtually identical. They generate a list of posts, outputting the featured image, if one exists, for the first post in the list.
The list is marked-up as a Ratchet table component but I tweaked it a little to remove the chevrons to free up space for the post titles and excerpts.
Single.php generates the output for a single post using the formatting from Quartz.
So we’ve built the theme but there’s still a couple of ‘I’s to dot and ‘T’s to cross.
Responsive Images With The Pco Media Plugin
I would recommend installing the Pco Media plugin as this will make working with images a lot easier. By removing all the width and height attributes this plugin makes sure your images will be scaled correctly on a mobile screen and will save you considerable time and frustration.
Automatic Theme Switching Using Any Mobile Theme
If you are not in mobile-only scenario (or using a mobile domain such as m.domain.com) then you have to ensure that you deliver your new mobile theme to mobile users only.
The Any Mobile Theme plugin allows you to select the theme for a range of devices via its simple, easy-to-follow settings page.
Icons For Web-Clipping
And lastly, you’ll be hoping that your mobile visitors add your site to their home page, so called web clipping, so you’ll want to provide great looking icons are easy to recognize in that sea of icons.
Start by designing your icon 1024×1024 and then head to makeappicon to generate all the sizes that you need. Simply drop these into the icons folder in your theme.
Extending The Theme
This is just a quick and simple introduction to building a mobile theme with Ratchet and we’ve done little more than scratch the surface of the framework’s capabilities.
Even so, we can see how building a mobile-specific theme is both quick and easy using the framework and provides a much better app like experience for your visitors.
And as WordPress is still at the heart of the solution, adding login, forms, even premium content and services should all be possible.
Perhaps it’s time to seriously consider delivering a better experience for your mobile users rather than just relying on a responsive theme to do the job for you?