Mobile WordPress Theming: Day 4


This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.

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

Welcome to the final installment of our Mobile WordPress Theming series! In this tutorial, we will be loading posts and pages dynamically into our mobile web application. By the end, we will have a usable mobile WordPress theme! Let's jump right in!

Changing The Theme Thumbnail

First off, as we package this theme we will need to change the theme thumbnail eventually to replace the thumbnail that came with the original naked theme. For this I just fit a screenshot of the theme into the 300 X 225 canvas. I also finally gave the theme an official name: MyTouch. It might not be the most creative, but, hey, it works. The file name is screenshot.png and is located in the root directory of any theme.



Changing Permalink Stucture

This is the one sloppy part of this series. In order to get jQTouch's AJAX capabilities to load individual blog posts we need to modify the permalink structure of the blog. This is because out of the box, jQTouch can only load static files. However, WordPress is anything but static-it's dynamic to the extreme. So we're going to trick jQTouch, by creating "virtual static" pages. This is actually quite simple with WordPress. Just go to Settings > Permalinks and choose Custom Structure. Then use the following:

The important part here is the .html that we added. Everything before that is up to you.


Changing Page Permalinks

Unfortunately, pages work a little differently with permalinks. In order to get a .html extension for pages, we need to install a plugin called .html on Pages. This will append .html after all pages, and make jQTouch work again for pages.


Load Posts

Remove <section> tags

First, we need to remove the section tags that wrap the blog posts. This allows jQTouch to be able to understand the structure of the page, which will make loading the blog posts a lot easier and quicker. Now, the blog section of index.php should look like this:


Single.php is the file that is used to view an individual post. We need to modify this, so that it is only a div section that we can easily target and load using AJAX. First, we need to check that there are posts to display. Then, we will start a while loop to display the post's content. We have already covered almost all of the WordPress template functions below, so they should all be pretty self-explanatory:

The only thing that really is new is comments_template(). This basically inserts the comment template, which we will talk about in a bit.


We will also need to add a little bit more styling to style.css to make this look good:

Blog Post


I mentioned the comments template in the last step. Now we need to define that. To do so, open up comments.php.

Security and Title

We need to keep in mind that this is a template. And as such, we need to be flexible. Not all blogs will want comments enabled. Some will only want private comments. You get the idea. This first part is pretty standard to many templates, but we need to check if comments are open, what type of post this is, and then insert the comment area title. We do so with the following code:

Display Comments

Now we need to display comments. First, we need to check if we have comments on the post. Then we will start a foreach loop and print out each comment:

Blog Comments

Comment RSS Feed/Trackback URL

Another pretty standard theme feature is including an RSS feed for every post's comments as well as a trackback URL. We need to specifically target a new window for jQTouch to work properly. This complicates the Comments RSS a bit, because there isn't an out of the box WordPress theme function that we can use that we can specify a blank target. Luckily, WordPress' convention is basically just post url/feed. Therefore, we can create our own:

Blog Links

Leave A Comment

Now we're going to add the capability to add a comment. First, you need to check if comments are open (There's a function for that). Then add a title letting the user know they can. Then we need to check if anyone can leave a comment or if you need to be registered. Then we open the form. Then we create a form in jQTouch's style. Then we close everything up. It should make more sense below:

Blog Comment Write


We also need to make sure that we cover pages in this theme. Within index.php, we need to list out all pages in a menu. Then we can link to the actual pages content like we did with blog posts. It is very simple to list pages in WordPress. We will add one parameter though. By default the template function will add a title list item. We will fix this below:



Page.php is the page's version of the post's single.php. That being said, it will be a very similar file too.


What Now?



Now we have a usable WordPress theme that anyone can use to reach mobile audiences from their desktop WordPress blog. But what now? There's still a lot of room for improvement on this theme (There might be a tutorial on adding search functionality, or there might not be, who knows ;] -leave a comment if you'd like to see one), and that is why I am releasing it as open source to the community to use and improve upon. You can download and access the project over at I encourage everyone to use it and make it their own. I'd love to see some people using this, so make sure to email me a link! Let me know your thoughts!