How To Build A Mobile WordPress Theme, And Why You Should

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.

Four screenshots of the mobile theme running on an iPhone
Why build a mobile-specific theme? Because most responsive themes are terrible on a mobile

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.

Introducing Ratchet

Screenshot of the Ratchet home page
Part of the Bootstrap family

We are going to build a mobile theme based around Ratchet, an HTML, CSS and javascript framework that came out of the project that created the Twitter for iPhone app.

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:

iPhone screenshots of the home page and a single post
Our example mobile theme is a 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:

Header.php

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:

  1. We don’t include any reference to the Ratchet stylesheet or the Ratchet javascript file. These are added to the <head> via the wp_enqueue_style and wp_enqueue_script functions in conjunction with wp_head.
  2. link tags are added to images for web-clipping
  3. A “home” icon is added to the header if the page being viewed is not the home page
  4. 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.

Screengrabs showing the two popovers in action
Popovers are a Ratchet component so simple to implement

Remember that Ratchet only looks for changes in the header rather than replacing as it does with the content.

Footer.php

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.

Functions.php

The functions.php is also fairly straight-forward:

  1. Adds theme support for post thumbnails (featured images)
  2. Enqueue’s the Ratchet javascript file and the Ratchet stylesheet
  3. 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.
  4. Adds a function to build a popover list for a given term type

Style.css

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.

Screengrab showing the pointer
The pointer is a neat CSS-only visual enhancement

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:

{code}
#post-list:before {
position: absolute;
top: -15px;
left: 10%;
width: 0;
height: 0;
margin-left: -15px;
content: ”;
border-right: 15px solid transparent;
border-bottom: 15px solid #ffffff;
border-left: 15px solid transparent;
}
{/code}

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.

Just be careful with the content that you are trying to deliver in the single template, particularly keeping in mind the potential limitations of Ratchet’s ajax approach. Javascript and even styles delivered as part of the content will not be executed: you have to ensure that all these assets are delivered in the initial page set-up.

Finishing Off

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.

Screenshot of the plugin's settings page
Select the theme by device – here we only use Ratchet for mobiles not tablets

Icons For Web-Clipping

iPhone screen showing custom icon on home screen
Providing icons makes a web
clip far more effective

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?