Mobile Theme Generator for WordPress and Tumblr

A few months ago, I downloaded a mobile theme for WordPress in order to create a mobile site for GrasshopperPebbles. While updating the template, I thought about automating the development process so that future releases would be easier. So I decided to create an open source project – the mobile theme generator. The generator displays mobile sites using jQuery Mobile. In fact, the generator itself was developed using Django and jQuery Mobile (the original theme used jQuery Mobile). I did think that it an odd solution to create PHP files using Python, but it turned out to be a great solution.

Before I finished the mobile generator for WordPress, I decided to create a theme generator for Tumblr and Blogger, but after the Tumblr theme generator was complete, I nixed the Blogger generator. Scope creep. I do plan to create mobile generators for other blogging platforms in the future (starting with Blogger), but after I heard Sheryl Sandberg (COO of Facebook) say on the radio, “Finished is better than Perfect”, I decided to release the generator now, and add more features in the future.

phone-template-wp

The Mobile Theme Generator

The theme generator allows the user to select from jQuery Mobile’s 5 default themes.

a (default black)
b (default blue)
c (default white)
d (default gray)
e (default yellow)

When a user selects one of the themes, the generator assigns the letter value (a, b, c, etc.) to jQuery Mobile’s data-theme attribute for the relevant element.

data-theme=”b”

And because the data-theme value controls the color , you can use jQuery Mobile ThemeRoller to create different color schemes for each letter. For instance, you can change the blue color scheme of date theme “b” to red or green.

Theme Options

The options for theme generation are segmented into sections (header, background, etc) and are displayed using a Collapsible List.

theme-options-collapsible

Because space is limited on mobile devices, a menu icon is created in the header of the theme (it is displayed on the top-right on WordPress themes and top-left for Tumblr themes). This menu can be used to display additional links such as your Facebook and Twitter profile links. When a user clicks on the menu icon, the menu items display above the content. The menu icon itself is not part of jQuery Mobile. Although it uses the same data-theme framework, it is actually a 15-color sprite that I created using Inkscape.

Each theme can be saved an edited. Once you log in, you will see a table of all the themes that you have created.

The WordPress Theme on a Sub-domain

When creating the mobile theme for WordPress, I knew that some (like myself) may want to serve the mobile view from a sub-domain. So the generator adds code to the functions.php file so that the sub-domain can share the same content as the primary domain. There are few extra steps needed in order to share database content (these are are not built into the generator). For more information, read my post, “WordPress: Sharing database content between primary and sub-domains”.

To view an example of the WordPress theme that was created by MobilePebbles, view the mobile version of GrasshopperPebbles.com. To view an example of the Tumblr theme, go to lesgreen.tumblr.com.

To start generating your mobile WordPress or Tumblr theme, go to Mobile Theme Generator.

Enjoy.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks