Creating a Mobile WordPress Theme with the jQuery Mobile Library

When it comes to separating a mobile website from a truly robust mobile experience, the main differentiator is typically the use of jQuery. This innovative use of JavaScript, which is generally considered the only acceptable use of the JavaScript language in mobile websites, is the key way to turn a standard website into one that more closely resembles the experience found in mobile applications, without the high costs of learning those respective APIs and engaging with multiple application stores.

And, because these jQuery-based mobile websites require no separate application download to provide an app-like experience, they assist users in saving data (which is rarely unlimited anymore) and spare them the prospect of overage fees or slow, throttled downloads.

Of course, the other huge benefit to using a jQuery-designed site over a traditional, static XHTML counterpart, is that the site pre-loads its data and doesn’t force information-hungry readers to wait for each page to load. This is especially crucial on mobile devices, where even 3G data can be subject to slow performance when reception is low or the device is older and has a slower processor. Enabling faster navigation and consumption of a site’s data will keep mobile users in the fold, and that’s good for everything from revenue levels to the page rank of a website in a typical Google search. Here’s how to change the way a website presents itself on smartphones and tablet devices using the jQuery Mobile library to create a rich user experience.

Step 1: Setting Up the Theme Files and Folder and Preparing for Deployment of the jQuery Experience

The great thing about this mobile theme is that it will be a greatly pared-down version of a typical WordPress desktop theme that a reader base is used to. For the purposes of this specific theme, only a few essential files will be needed. They’ll have to be created as blank PHP files and uploaded to the server. Once on the server, they’ll be edited directly using an FTP client and its built-in utilities. Here are the files that should be created in a plain text editor:

  • style.css
  • index.php
  • page.php
  • header.php
  • footer.php

That’s it! It’s one of the most simple themes a WordPress designer will ever take on, and that’s exactly the point. With just a few files, the jQuery Mobile library can display the full information of a website and promote quick and efficient page loading times.

Step 2: Identify the Theme By Inserting a Stylesheet Heading

Every theme created for use with WordPress must have a stylesheet heading that identifies it to the Dashboard and allows it to be “seen” by the control panel software. This is true even for themes that won’t require activation behind the scenes, as WordPress still needs to know that this theme is an “option” and to process its variables and present information from the database. Therefore, a heading must be placed at the top of the “style.css” file created in the step above. An example of that heading can be seen here:

/*
Theme Name: Robust Mobile Theme Powered by jQuery Mobile
Theme URI: http://domain.com
Description: Using jQuery, HTML5, and basic CSS, this theme will transform the mobile user experience from one that is static to one that is dynamic, animated, and performs like a downloadable mobile application on Android, iOS, Windows Phone, and touchscreen BlackBerry devices.
Author: Your Name Goes Here
Author URI: http://domain.com
Version: 1.0
Tags: these, tags, are separated, by, commas, and, describe the, theme, functions
*/

That heading will complete the contents of the style.css file, as the page’s styling will be pulled from a remotely-hosted jQuery stylesheet that is specifically designed to give interface attributes a distinctive look when the mobile library is used. This is an optional step, however, and those users who wish to customize the look and feel of their mobile website can duplicate the remote jQuery styling classes for use in style.css. This would simply require a change to the stylesheet meta tag. This will become more apparent as the header.php template file is developed for the theme.

Step 3: Creating a Simple “Header.PHP” Template File to Interface with the jQuery Mobile Library

In order to take advantage of the jQuery Mobile library, the mobile website must be powered by HTML5. This will cause some elements to contain new classes and other parameters, and they may be confusing to those users who have not yet familiarized themselves with the W3C‘s HTML5 semantics and development guidelines. Rest assured that this is merely a more highly evolved form of XHTML, and it will still be very similar in its implementation. First, the page header template must identify the page as an HTML5 website before the <HEAD> tag can do its work. This is far more simple than the XHTML doctype headings and looks like the following example:

<!DOCTYPE html>
<html>
<head>

Below this, the current header.php template can be copied from the currently-selected desktop theme that the website uses. The information copied from this theme should include the title tags, meta tags, and everything between the opening <HEAD> tag and the opening <BODY> tag contained in the desktop header template. Once that information has been copied over, there are a few lines of code that must be adjusted. These lines will permit the use of the jQuery stylesheet, and they’ll call the essential mobile and desktop jQuery interface libraries for use throughout the template’s HTML5 code. Those lines look like the following, and they should replace any existing stylesheet or jQuery meta tags:

<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

With this information placed into the <HEAD> tag, work can now proceed to the page’s actual header are that will appear “static” across al pages. Thanks to the jQuery library, this piece of code will not scroll with the page, replicating the mobile application experience where a title bar is found at the top of the application throughout all of its functions and screens. This is a relatively simple piece of code to add, since all the styling and programming is done offsite by the library meta tags:

<div data-role="mobile-page" id="home" class="home">
<div data-role="mobile-title-bar">
<h1 class="mobile-title-bar" data-role="mobile-title-bar"><?php bloginfo('name'); ?></h1>
</div>
<div data-role="home-content">

Using these “data-role” tags, combined with the “class” and “ID” elements found in each <DIV> tag, the jQuery library will know which functions and animations to apply, and the stylesheet will give the content visual appeal. Remember, the jQuery stylesheet can be copied over into the style.css file for a custom appearance. Likewise, if a custom stylesheet is being used, the WordPress designer can feel free to change the “class” and “ID” elements to something that is more appropriate and specific in terms of their own website’s design and functions.

Step 4: Creating the Two Files That Will Display the Mobile Website’s Content

Standard desktop designs typically display a chronological list of entries in reverse order, and this list of entries contains the full content of each post on the index page. That’s great for home broadband connections and more powerful computers with quad-core processors, but it’s simply too much for the average single-core mobile device to process at one time. At the same time, it requires a great deal more data, and the site will load appropriately slower when this approach is used on the homepage of a mobile site. For that reason, this tutorial splits the content into a homepage list of entry titles and a series of standalone pages that feature the full entry content. This allows a user to select only the content they wish to read, and forces their phone to process and download only the data that a user hopes to access.

The first piece of this construction that will be created is the full single.php template that will display the full entry to the mobile reader. This template is exceedingly simple, and uses the WordPress Loop to produce just an entry title and the full content. It uses the same “static” header as was developed earlier in this tutorial, and contains just a few lines of code. Here’s how the jQuery-driven “single.php” file for mobile users should be constructed:

<div data-role="post" data-inset="true">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h2 class="standalone-title"><?php the_title(); ?></h2>
<span id="the-content"><? php the_content(); ?></span>
<?php endwhile ?>
</div>

Just six lines of code in this file will produce a robust mobile experience, and that’s a testament to the efficiency of the jQuery library and HTML5. Mobile device users will be impressed with how quick these standalone pages load on their smartphones or tablets, and they’ll be thankful for the low-impact data usage that this website requires.

Now it’s time to develop the index.php template that will link to these standalone entry pages. This page, as well, will use just a few lines of code to produce a robust, jQuery-driven user experience. Here’s how it’s done:

<ol data-role="list-of-entries" data-inset="true">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="< ?php the_permalink() ?> " class="mobile-entry link" id="entry-list"><?php the_title(); ?></a></li>
<?php endwhile ?>
</ol>

That’s all there is to it. Now that both templates have been six lines of code to produce a satisfying mobile experience, they can be saved and uploaded to the server. There is no more work that needs to be done in order to display the content of a WordPress installation to mobile users.

Now, the process moves on to the final stage of the development process. A proper header most be created that includes copyright information as well as a convenient link that allows users to instantly scroll to the top of the current page’s content. While this can be done in most mobile operating systems by tapping near the top of the screen, providing a button is a highly accessible way to accomplish the same task and it’s far more usable and intuitive than a top-screen tap on most devices. Here’s how to develop the last few lines of mobile jQuery code for this theme.

Step 5: Getting Back to Basics with a Simple, Functional, jQuery-Enabled Footer Template

In the past few years, footer.php templates have grown almost needless complex, as they’ve begun serving as a second sidebar full of dynamic content and links. This is not the approach to take when developing a mobile site, as this edition of the website must be streamlined and quick to load. No essential information will be placed into the header. Instead, it will be brought back to its web design roots as a place to store copyright information and allow the user to return to the top of the page at their convenience. Of course, as is common in WordPress themes, the footer document will also close the <BODY> and <HTML> tags, finishing the loading process and causing the theme to be considered valid by the W3C organization. Here are the eight lines that constitute a mobile, jQuery-enabled footer:

<div data-role="page-footer" class="top" id="top">

<?php wp_footer(); ?>


<a href="#index" data-role="button">Top of Page</a><br />
<div id="rights">This Website is Copyright 2010 - 2012, All Rights Reserved. Please Don't Steal My Code!</div>
</div>

</body>
</html>

With that, the development of the jQuery-based mobile WordPress theme is complete, at least in terms of raw coding and file development. Save the footer.php template and upload it to the mobile theme’s folder. Then close that FTP client and open the browser on your mobile device of choice.

Step 4: Put the Theme Through its Paces on One or More Mobile Devices

A standards-developed theme should display the same way across multiple mobile browsers and operating systems, but that should never be taken for granted. Using a mobile device, load up the mobile theme by navigating the website’s homepage. It should be activated via user agent detection at that time. Then, peruse the list of entries, view a few of them on their standalone pages, and ensure that they’re displaying properly. Make sure the jQuery Mobile library is doing its job, and that the navigation elements, animations and “Top of Page” button are all performing exactly as planned.

If that’s the case, the mobile device can be relieved of its duty as a beta tester and the theme can be deployed to the wider public. Relax and enjoy this major milestone in developing not just a mobile website, but a mobile experience, for the enjoyment of every website visitor.

Author: (40 Posts)

Vladislav Davidzon is the principal of US-based online marketing consultancy Vladislav Davidzon & Associates, developing integrative solutions through high impact search engine optimized WordPress websites for socially responsible customers of all sizes around the world.

Comments