1. Code
  2. Mobile Web Apps

Mobile WordPress Theming: Day 2

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

Last week we explored, jQTouch, the framework we would be using to create our mobile wordpress theme. This week, we will pick up where we left off and apply what we learned to create the theme files that we will use to integrate with a WordPress theme. Let’s get to it!

Starting Off

To begin with, we will use a default installation of jQTouch that we downloaded last week. To keep things simple, we are going to use as much of the default jQTouch functionality as possible.

First, copy the main demo directory’s contents (demos/main) and paste it into the jQTouch main folder:

Copy Main Directory

Since our blog layout will function very similarly to this demo, it makes sense to start from that point. After you’ve done this, you will need to update some of the links to the JS and CSS files. The first 60 lines you don’t really need to worry about beyond this. They are basically what makes jQTouch work the way it does. Replace the beginning of the file with this:

After the end script tag, you should see a style tag. This is where you know you can stop.

The Index Page

We aren't integrating with Wordpress in this part of the tutorial. Rather, we are creating the theme in ordinary HTML, and then skinning it to a theme in the next tutorial. That being said, we need to replace the default index content, with realistic blog content. Select all content between the body tags and delete it. Now we will fill it back with content. Last week, we covered all of the fundamentals of jQTouch, so everything below should be a review:

Main Index Page

As you can see, we've added some menus, title bars, and even an AJAX loaded blog.html page. But everything above should be review. If you find any of it confusing, please reread last week's post.

The Blog Page

With jQTouch, we tried to keep as much as possible on the initial page. As you can see, we've done that for the most part above. But for a blog, this is not very realistic because a blog will be constantly updated and, in almost all cases, it would be very innefficient to load all blog posts into one page as well. That is why for the blog menu item, we did not link to an anchor item on the same page, but rather a new HTML file. However, jQTouch will then seamlessly load this into the site.

This blog page will be a listing of all recent blog articles. So what do we want on this page?

  • A blog description
  • Post titles
  • Post author
  • Post excerpt
  • Post date

So pretty much the basics. We are going to wrap each post in an unordered list and then a list item. To make the site a little more colorful and graphically appealing, we will also format the date to look like the calendar date trend. If you don't know what I'm talking about, look below or at the preview from last week's post. We will also need to add a little custom styling, so we'll add some classes. Like this:

Unstyled Blog Excerpt


It's not the most semantic use of lists, but it will make more sense in a second. In designing this theme, we have a dilemma. We have limited screen space, so we can either compress blog posts so users can see more, or we can expand them like above and give readers a better idea of what the post is about. Or we could make it simple, and do both. In this theme, we will show 5 expanded posts like above, and then we will show 5 post titles only below. We can achieve this with a simple menu:

Post Title List


Putting the blog page together

Now, we just need to put the two pieces above together and put it in a jQTouch page. We don't need to link to JS files or CSS in the blog page. Think of the blog page as a PHP include if you're familiar with PHP. Otherwise, think of jQTouch as getting the content and then inserting it right into the main index page. This is the entire blog.html file:

Custom Styling

Now, I mentioned earlier that we would need to add some custom CSS to format the blog page. This tutorial is not focused on the basics of CSS, so I am assuming you know the fundamentals. That being said, I will cover any CSS3 that we use, which is disappointingly very little. Only border radius, which is pretty self-explanatory. We use border-[top/bottom]-[left/right]-radius to give the calendar round corners:

Styled Blog Excerpt

Test It Out

If everything went smoothly, you should have a working site! We covered testing as well in the last tutorial, but as a review 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.

We're done for today!

Now that we have created the HTML for the theme, all we have to do is skin it to a wordpress theme, and we've got a finished mobile theme! Feel free to play around with the demo files and customize what we've done today for your own site.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.