Mobile WordPress theme Using jQuery Mobile

Posted on April 8th, 2011

Last month, jQuery Mobile was released. This tool allows you to easily create mobile websites and web apps.
Step 1: Getting files
Created theme from scratch, but there’s no need to reinvent the wheel when there’s tools that can help you save lots of time. The tool we’re going to use is called Blank Theme. It is a functional WordPress theme, but without any styling. That way, it can be used as a starting point for creating your own themes.
Step 2: Header and Footer files
Open the header.php file from the Theme directory, and insert the following code to link to jQuery Mobile, within the and tags:


Once done, the required jQuery files are now linked to our theme. But we’re not done yet with header.php. As jQuery Mobile uses HTML5, we have to modify the doctype. Replace the first 6 lines of the file with:


We just dove in jQuery Mobile with the code above. jQuery Mobile doesn’t need you to write any JavaScript. It only needs some

tags with the proper data-role attribute.
Now, save header.php and open footer.php. Replace it by:

        

This code will insert a footer bar to theme
Step 3: The homepage
Replace the loop in the index with te following code.

  • <a href="">

The list is created by using the data-role=”listview” attribute on the unordered list.
Likewise the loop in all the templates can be replaced.
Step 4: Implementing search
The code for the search temple is

<form action="" id="searchform" method="get">