Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Mobile WordPress Theming: Day 1

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

This post is part of a series called Mobile WordPress Theming.
Mobile WordPress Theming: Day 2

In my last article introducing Sencha Touch, we discussed approaching mobile users through web apps instead of native apps and the distinct advantages and disadvantages of this approach. This is nice, but what about if you just want to push out simple content to users on their mobile devices and don’t need the sophistication of a regular “app” at all? This is where creating a mobile website comes in. In this series, we will create a powerful mobile Wordpress theme that anyone can apply to their blog to make their site easily accessible to mobile users.

Mobile Website vs. Web App

The line between mobile websites and web apps is one that is becoming more blended and blurred everyday. In many cases, it is hard to differentiate between the two. For the purpose of this tutorial, we will define a web app as something that requires more advanced functions while a mobile website’s purpose is to push the content of a regular site to mobile browsers in a more easily accessible fashion.

jqtouch

What We Want: Wordpress

I must confess, I am a Wordpress fanboy, but for good reason. Wordpress is a versatile solution for almost any CMS need. In this case, it is the perfect solution. We want a website that can handle both mobile and desktop browser users. Here are some of the advantages Wordpress can give us:

  • Keep content in one place, but have a separate theme for mobile and desktop users.
  • Easy to edit from either the computer or your phone (have you checked out the Wordpress app?)
  • Can easily reuse the same theme to all Wordpress sites you might have

What we also want: JQTouch

I know in my last article, I praised Sencha Touch saying, “Sencha Touch is probably one of the most powerful mobile web app frameworks out there.” This is completely true, but we’re not going to use it for this tutorial. Some might ask why. Well, the key is the “web app” part. Sencha Touch is much better suited for higher-level web apps. We don't need the rich feature set of Sencha Touch. We need to find something that is a little simpler to implement, but still very effective. We need jQTouch. What is jQTouch? From their site:

A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.

Interestingly enough, jQTouch is also part of Sencha Labs, so they share a lot of the same amazing functionality. However, jQTouch will always be licensed underneath the MIT license. In fact, David Kaneda was vital in developing both. The major difference between Sencha Touch and jQTouch is that while Sencha Touch is genius in its power and capabilities, jQTouch is genius in its simplicity and effectiveness.

Download jQTouch

We’re going to need the latest version of jQTouch so go to jqtouch.com and click download to grab a copy.

jqtouch

Download Wordpress

While we’re downloading, you might as well download the latest version of Wordpress (3.0 at the time of this post) over at wordpress.org. In the next tutorial, we will set Wordpress on a local testing server to test our theme out. But for now, just set it aside.

jqtouch

Playing With jQTouch

Now that you have jQTouch downloaded, open it up and we’ll explore the framework a little more in detail. In today’s tutorial, we will cover the basics of jQTouch. In the next segment we will actually create the theme.

For testing, I’ll be using the official Apple iPhone Simulator. In order to run the simulator, you will need to downloaded the iOS SDK at Apple’s developer center. Downloading the SDK requires that you register as an iPhone developer first (registration is free), and you will need a Mac running OS X Snow Leopard. Don't have a Mac or don't want to register as an iPhone developer? No worries, you can follow along with almost any other browser, but your results may be less accurate than mine (let's hope no one reading this is still running IE6).

Go ahead and open the iPhone Simulator or your browser of choice. If you have Xcode and the iOS SDK installed, you should be able to just search for "Simulator" in spotlight to find the application.

Now, open the jQTouch folder you downloaded earlier, and navigate to demos > main. Drag index.html into either the iPhone Simulator or another browser.

jqtouch
jqtouch

Play around with this sample app for a bit to familiarize yourself with the jQTouch interface.

Learning From the jQTouch Demo App

The demo we explored above is a great example of what jQTouch can do. The rest of this tutorial is dedicated to examining a few portions of the code in the demo, starting with the basic layout.

To create a basic layout, you need to define the home screen, or the part of the HTML that jQTouch should load as the primary home content, like so:

<div id="home" class="current">
    <!-- Here is where the main screen content goes -->
<div>
jqtouch

Toolbar

To add the toolbar that we see at the top, you would simply add the following lines:

<div id="home" class="current">
    <div class="toolbar">
        <h1>Wordpress Site</h1>
    </div>			
</div>
jqtouch

Creating Menus

If you want to create a menu set like the picture above, all you need to do is create an unordered list with the class of rounded. Here is the code:

<div id="home" class="current">
    <div class="toolbar">
        <h1>Wordpress Site</h1>
    </div>
    <ul class="rounded">
        <li class="arrow"><a href="#item1">Menu Item 1</a></li>
        <li class="arrow"><a href="#item2">Menu Item 2</a></li>
    </ul>
</div>
jqtouch

Each list item includes a link. In most cases the link will go to some other part of the same document like above.

Connecting Menus

If we want the menu to actually work, we need to create the places for the links to go. If we want to create a multilevel menu, we would do it like this:


<div id="home" class="current">
    <div class="toolbar">
        <h1>Wordpress Site</h1>
    </div>
			
    <ul class="rounded">
        <li class="arrow"><a href="#item1">Menu Item 1</a></li>
        <li class="arrow"><a href="#item2">Menu Item 2</a></li>
    </ul>	
</div>

<div id="item1">
    <div class="toolbar">
        <h1>Toolbar Title</h1>
        <a href="#" class="back">Back</a>
    </div>
    <ul class="rounded">
        <li class="arrow">Dead Menu Item</li>
        <li class="arrow">Dead Menu Item</li>
        <li class="arrow">Dead Menu Item</li>
        <li class="arrow">Dead Menu Item</li>            
    </ul>
</div>

<div id="item2">
    <div class="toolbar">
        <h1>Toolbar Title</h1>
        <a href="#" class="back">Back</a>
    </div>
    <ul class="rounded">
        <li class="arrow">Dead Menu Item</li>
        <li class="arrow">Dead Menu Item</li>
        <li class="arrow">Dead Menu Item</li>
        <li class="arrow">Dead Menu Item</li>            
    </ul>
</div>

Notice the Back Menu item that we also added in there. The class of back will automatically give the element the proper functionality.

jqtouch

Load an External Page via AJAX

jQTouch makes is super easy to load external pages just the same as if it was a part of the same document. Instead of the anchor tag linking to an element on the same page, you simply load an html page with the "href" attribute:


<ul class="rounded">
    <li class="arrow"><a href="ajax.html">AJAX</a></li>
</ul>

Review & Preview

In this tutorial, you have seen some of the fundamentals of JQTouch. In the next installment of this series, we will actually create the jQTouch theme, where we will implement the above principles and learn about some more specific concepts. Here's a preview:

jqtouch
Advertisement