Steps to Fabricate a Mobile WordPress Theme With the jQuery Mobile Library

0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

WordPress is the most preferred CMS when it comes to theme creation and the experience is further enhanced with the use of jQuery. Yes, the main differentiator, when it comes to separating a mobile website from a flourishing mobile experience, is jQuery. Javascript, in this innovative form i.e. jQuery, is the lone acceptable mode in mobile websites. jQuery is the outline to convert a standard website into a form that relates more closely to the experience catered to in mobile applications. All this does not involve the high costs of making an effort to learn the respective APIs and engage with multiple application stores.

jQuery based mobile websites make provision for no separate application download to sustain an app-like experience. Instead, they assist the users in saving data. Another benefit of using a jQuery-designed site over a traditional XHTML one, is that the site allows pre-loading of the data and doesn’t force the users to wait for loading of every page. This happens on a major basis when it comes to mobile devices as even the fastest speed becomes slow when the device is slow or there is network congestion. Providing faster navigation and loading of data of a site keeps the users intriguing and that gets the site extra brownie points.


There are some basics steps that help a website adapt to the mobile devices making use of the jQuery Mobile library to enrich the user experience. They are discussed in detail below:

Step 1: Allocation of the Theme Files and Folder and Gearing-up for Arranging the jQuery Experience

The outstanding part of this theme is that it will at par with a typical WordPress desktop theme that a normal user is accustomed to. Designing this specific theme will require you to include a few principal files. These files have to be created as blank PHP files and uploaded on the server. Once uploaded on the server they can be edited conveniently using an FTP client and the in-built utilities. There are some files that should be created in a plain text editor. They are style.css, index.php, page.php, header.php, footer.php. This is the simplest of themes a WordPress designer will ever cater to and that’s the motive behind its usage. Just a few files and the jQuery Mobile library displays the entire information of a website and promotes quicker and adequate page loading times.

Step 2: Identification of the Theme By Embedding a style-sheet Heading

A theme created for the purpose of using with WordPress should have a style-sheet heading that marks is presence on the Dashboard and makes it visible by the control panel software as well. The condition is valid even for those themes that don’t require activation at the back-end. This is necessary as WordPress needs to come to terms with the fact that this theme is an “option” and the variables and information has to be processed from the database. This makes the inclusion of a heading at the top of the style.css file all the more important. An illustrative example is included below:

Theme Name: Robust Mobile Theme Powered by jQuery Mobile
Theme URI:
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:
Version: 1.0
Tags: these, tags, are separated, by, commas, and, describe the, theme, functions

The inclusion of a heading completes the detailing of the style.css file. The styling for the page will be taken up from a separate jQuery style-sheet that is purposely designed to give the interface attributes a specialized look as and when the mobile library is used. This step is an optional one, but the users who have the need to customize the look and feel of their mobile site have the liability to duplicate the lonely jQuery styling classes for use in the style.css. To achieve this, you just have to make a change to the style-sheet meta tag. By doing this you will make the process more visible as the header.php template file is developed for the theme.

Step 3: Developing an Easy “Header.PHP” Template file to Integrate with the jQuery Mobile Library

Using and pouncing upon the advantages of the jQuery Mobile library, the website for mobile devices must be powered by HTML5. This might come as a surprise as there will be elements that will contain new classes and parameters. It might be confusing for some, whereas some will not be familiarized with the semantics and guidelines of HTML5. For such users there’s a respite as it is an upgraded from of XHTML and is similar to its implementation. Firstly, the page header template should identify the page as an HTML5 website before implementing the tag. Its application is much easier than the corresponding XTML doc type headings and has similarity to the example illustrated below:

<!DOCTYPE html>

Just after this , the immediate header.php template can be copied and used from the currently selected desktop theme, which the website makes use of. The data that is copied from this theme should make inclusion of the title tags, meta tags, and everything that is contained between the openingtag and the openingtag within the desktop header template. Once done, there are a few adjustments that are ought to be made to the code. These changes will permit the use of the jQuery style-sheet and they in-return will call the necessary mobile and desktop jQuery interface libraries for use throughout the template’s HTML5 code. The lines resemble the following example:

<script src=””></script>
<script src=””></script>
<link rel=”stylesheet”href=””/>

Now that the information is placed within the tag , the next step is to move to the page’s actual header that appears “static” across all pages. The jQuery library makes sure that the piece of code does not scroll with the page, thereby replicating the mobile application experience where a title bar is present at the top of the application throughout the functions and screens. The addition of this code is a relative simpler one, as the styling and programming is basically 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 data-role=”home-content”>

Using the “data-role” tags in combination with the “class” and “ID” elements that are found in each of the tag, the jQuery library comes to know about the functions and animations that are supposed to be applied. After this the style-sheet furnishes a content visual appeal. The jQuery style-sheet can be copied into the style.css file for a customized look. Similarly, a WordPress designer can freely change the “class” and “ID” elements to something that is generic and specific in terms of the website’s design and functions, for the use of a customized style-sheet.

 Step 4: Developing the Two Files that Display the Content of the Mobile Website

Looking at the standard desktop designs, they display a sequential list of entries in reverse order. This list contains the entire content of every post on the index page. Computers with quad-core processors and home broadband connections can easily process them, but the going gets tough for single-core mobile devices. More data is required and the load-time gets more when he technique is used on the homepage of a mobile site. The tutorial is thus split into two entities and caters to the homepage list of entry titles and a series of standalone pages that make use of the entire content. This gives liberty to the user to select the content they wish to read and makes sure that their phone processes and downloads only the data that a user wishes to access.

The first portion that will be created in the entire single.php template will display the entire entry to the mobile reader. The template is easy and simple and makes use of the WordPress Loop to come out with an entry title and content. The same “static” header is used which is discussed above and contains just a few lines of code. Below is the example depicting the way in which the “single.php” file for mobile users is 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 ?>
Six lines of code and you have a fluid mobile experience and proves the efficiency of the jQuery library and HTML5. The standalone pages get loaded easily on the mobile devices and even the website requires a low-impact data usage.

Let’s turn to developing the index.php template that will provide a link to these standalone entry pages. Even this page requires a few lines of code to produce a great and simple jQuery driven user-experience. The example given below illustrates:

The developing stage of both the templates is over and thus they can be saved and uploaded to the server. The procedures required to display the content are over and thus the development process moves further.

This includes creation of a header which makes the inclusion of copyright information as well as a suitable link that makes users scroll to the top of the current page’s content. While this feature is normally present on the top of the screen, but providing a button is normally the criteria. The last few lines for the code are illustrated below:

Step 5: The Basics Re-evaluated with an Easy, Functional jQuery-Enabled Footer Template

The footer.php templates have become more complex and have begun serving as a second sidebar consisting of dynamic content and links. However, this is not the approach that one should take for developing a mobile site as this will require the website to be streamlined and quick to load. The header will not contain essential information, but on the other hand will bring it back to the web design roots as a place to store copyright information and make the user return to the top of the page at their wish. The footer will also bring an end to theandtags, thereby completing the loading process and causing the theme to be considered valid by the W3C organization. There are eight lines that compile to make 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>

This brings to an end to the development process of a jQuery-based mobile WordPress in terms of coding and file development. You should save the footer.php template and upload it on the mobile theme’s folder. Then, close the FTP client and open the browser on any mobile device.

Step 6. Check the Validation of the Theme on More than One Mobile Devices

A theme that is developed keeping all the standards in mind should display the same across all browsers and on various mobile devices and OSs. This however should not be taken for granted. You should load the mobile theme by navigating the website’s homepage and should be activated via a user agent detection at that very time. After that, take a check of the entries, view a few of them on the standalone pages and ensure that they are being displayed properly. Take a check that all the buttons and the elements incorporated are functioning properly.

About author View all posts


Andrew Jhonson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and develpers with all new ideas through his blogs.

Leave a Reply

Your email address will not be published. Required fields are marked *