Steps to formulate a Mobile WordPress Website With jQuery Mobile Library
In today’s day and age, it can be clearly said that WordPress is one the most popular and frequently used CMS platforms for creating themes. WordPress has further enriched the user experience through their use of jQuery.
As developers, it is a must that we realize that there is a difference between a mobile website and a complete mobile experience. The question is, what helps determine this difference? JQuery. JQuery aids you in the transformation process of a simple mobile website into an entity that caters more closely to experience provided by mobile applications. And this is not accompanied by excruciating expenses or additional efforts.
jQuery Mobile Library for WordPress
JQuery is the lone acceptable form of mobile websites and it provides the users with a distinct advantage. Instead of waiting for the loading of each page, it allows pre loading of the webpages, saving user data. It also helps users navigate in an easier and more efficient manner. It also keeps the viewer captivated as the page content and data keep loading. This helps the user at times of network congestion or when their device is slow.
Here are a few steps as to how you can use jQuery library to make your website mobile friendly. And in doing so it helps you enrich user experience. Let’s go through them now:
#1 ALLOTTING THEME FILES AND ARRANGING jQuery
The designing of the theme for wholesome mobile experience requires the addition of certain principal files. You have to create them as blank PHP files and then upload them to the server. Now, after uploading them, you can use an FTP client or inbuilt utilities to edit them, in a quite simple fashion. Note that files such as style.css, footer.php, page.php, header.php need to be created in a plain text editor.
This theme is like the WordPress desktop theme that everyone is using. This also helps you attain a quicker page loading speed. This is the simplest WordPress theme that one can address.
#2 IDENTIFYING THE THEME
Themes created for the purpose of use with WordPress tend to have a style sheet heading. Style sheet headings mark the theme’s presence on the dashboard; additionally it makes it visible by the control panel software.
It is necessary as WordPress needs to understand that this theme is an “option” and the information and the variables are to be processed from the database. Therefore, this condition is made effective even for the themes that don’t require activation at the back end. This highlights the importance of adding a heading at the top of the style.css file. We can have a look at the following example to make things more clear.
/* 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 */
The detailing of the style.css is rounded up by the addition of the heading. A distinct jQuery stylesheet is used for the styling of the page. Now, this new jQuery style sheet is specifically designed to give the interface attributes a personalized look. This sets into motion whenever the mobile library is put to use.
If any user seeks to touch up on the look and feel of the mobile website they have the option to duplicate the lonely jQuery styling classes for use in the style.css. This is not necessary, but just an optional provision. You can attain this by making changes in the style sheet Meta data. This develops the header.php file for the theme.
#3 DEVELOPING THE HEADER.PHP FILES
JQuery mobile library provides you certain advantages. Also, a website for mobile devices has to be powered by HTML5. This concept may seem contradictory and confusing. What might put you in a miff is the introduction of new classes and parameters. Or you might find this challenging if you’re not so well versed with the semantics and guidelines for HTML5.
If you’re worried, here’s some relief for you, HTML5 is simply an up grade from XHTML. That means, its implementation is like that of XHTML.
First things first, before we get to implementation, the page header must recognize it as an HTML5 page. Its implementation is similar to the example shown here:
<!DOCTYPE html> <html> <head>
Once through with this, go to the presently selected desktop theme and copy and use the header.php template. When you copy this theme, ascertain that the data includes title tag, Meta tag etc.
After this, the code has to be changed a bit here and there. Such alterations will allow the use of the jQuery style sheet, thereby calling the essential mobile and desktop jQuery. Here’s an illustration that resembles the scenario:
<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”/>
Once we’ve put the info within the tags, we will now focus on the static appearing header of the page. The head appears static across all pages. The meta tags stylize and program these codes. This means that adding these is comparatively simpler than the previous ones.
<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”><?phpbloginfo(‘name’); ?></h1> </div> <div data-role=”home-content”>
The jQuery library gets the knowledge of the animation and functions that are to be applied by making use of data role tags in combination with ID and class elements found in each tag. To attain a personalized look you can copy the jQuery style sheet into a style.css file. Now the style sheet will deliver a content, visual appeal.
#4 CONTENT DISPLAY FILE DEVELOPMENT
Talking about standard desktop designs, they show a sequential list of entries. But this sequential list displays the entries in reverse order. The complete content of each and every post on the index page is held by this list.
Now, let’s talk about the processing speed. Quad core processors or home broadband connections can process them quite easily if I might say. But for single core mobile devices, it’s an up-hill task. Excessive data gets eaten into. Also, if you adopt the same technique for a mobile site’s homepage, it’s obvious that the loading time will appreciate multi-fold.
So we split this section into two parts. On one hand, we address the homepage list of entry titles. And on the other hand, we look into those pages that are utilizing the entire content.
The first half will display the entire entry to the mobile reader. This will be entirely conceived in the single.php template. Making use of the WordPress loop, the template comes up with the content and the entry title.
The whole template is rather easy and isn’t complex. Using the static header we spoke about earlier, we add to it a few lines of code. Following is an example that addresses how to come up with a single.php file for mobile viewers:
<div data-role=”post” data-inset=”true”> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <h2 class=”standalone-title”><?phpthe_title(); ?></h2> <span id=”the-content”><? phpthe_content(); ?></span> <?phpendwhile ?> </div>
Moving on, we pay attention to the index.php template. Now this template provides a link to standalone pages.
Same as above, we use a limited amount of lines of code to come up with a smooth and efficient jQuery user experience.
#5 FOOTER TEMPLATES
As time has passed, more and more people see footer.php as a sidebar that contains dynamic links, content and so on. This requires that your website be quick to load and efficient. I suggest you pass on this approach when developing your mobile website.
The footer will help you put a full stop to the tags, hence helping the theme be seen as valid by W3C organization and at the same time finishing off the loading process.
Here’s how you come up with a mobile, jQuery enabled footer:
<div data-role=”page-footer” class=”top” id=”top”> <?phpwp_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>
As far as coding and file development is concerned, this is where we round up the development process of the jQuery based mobile WordPress. Save and upload the footer.php template in the mobile theme’s folder.
#6 VERIFY THE WORKING ON MULTIPLE DEVICES
When developing a theme, there are certain standards that you aspire to match. Your theme should be seamless, without any glitches and must maintain a sense of uniformity across all browsers and mobile devices. This is the final part, where you validate your theme. Try loading the theme by navigating the website’s home page.
Now you may want to run a check through all the entries, run a couple of them through the standalone pages just to make sure that they are displayed perfectly without any issues. Also, go through all the buttons and menus and make sure that there is no wrong doing in their functionality.
Conclusion
These have been a few steps to formulate a WordPress website. We hope that you find these helpful, and that they aid you in some way.
Can you add any further information to these tips? Have you implemented these tips successfully in your theme? Please share your links and opinions with us in the comments section below.
