After experimenting with jQuery Mobile for the mobile version of this web site, I decided I’d work on a generic version for public release. Keep in mind that today (2011-03-30), jQuery Mobile is still in alpha version (3) and that the WordPress Mobile Theme I have made do have some limitations, so it is not a complete or final product. Use it if you like it, change it, build on it, it’s all good :-).
You can still use it as is if it fits your needs, or you can improve it or adapt it until you like it.
IMPORTANT: Do NOT activate this theme after installing it unless you plan to publish a mobile-only website! THE CORRECT WAY TO USE THIS THEME IS BY USING A MOBILE DETECTION PLUGIN.
Download Link (updated on 2011-03-31 with Alpha 4)
Installation
Extract the downloaded archive into /wp-content/themes/ of your WordPress installation and select the theme “Generic jQuery Mobile Theme” from the mobile detector plugin that you are using.
Demo web site
- Here you can view what it looks like with the “a” theme assigned.
- Blogomobile.com is using a slightly adapted version (to load with your smartphone)
Some information regarding this theme
- This theme uses jQuery Mobile Alpha 3, a javascript framework optimized for mobile applications. You can find more information at http://jquerymobile.com/
- To use this theme, you must be using a WordPress plugin that will allow you to detect your mobile visitors. Here are two plugins that can do such a thing:“WP Mobile Detector” and “WPtap Mobile Detector”. There are others of course. Make sure you fully test locally the one you choose so you don’t get any bad surprises.
- This theme uses the WordPress native gallery with the “attachment page”. Whenever you change orientation when looking at an attachment (picture from your gallery), it will automatically be resizes to almost fit the width of the mobile screen. No test have been done with gallery plugins such as NextGen, PhotoSmash, etc.
- This theme uses the “Featured Image” defined in posts. If you are using them (optional), their thumbnail will be used on the left of each item in the post list.
- This theme will resize YouTube videos that are iFramed (not embedded) to a mobile width. The “Full Screen” button still allows you to view the video full screen which is nice.
- You can choose to deregister scripts by setting the correct names in the inc/preferences.php file by setting the $deregister_scripts variable (array needed). After those predefined deregistrations are done, the following scripts are registered:
- - jquery ( http://code.jquery.com/jquery-1.5.1.min.js )
- - fr-mobile-wp-scripts ( get_bloginfo(‘template_url’).”/scripts/fr-mobile-wp.js” )
- - jquerymobile ( http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js )
- You can choose to deregister styles by setting the correct names in the inc/preferences.php file by setting the $deregister_styles variable (needs an array).
- This theme was built only for front-end public use, not administrative use.
- Currently NOT supporting subpages in the top menu, so only the top-level pages are shown.
Theme Options
jQuery Mobile has a default theming system which can be used and customized easily with this theme. In the inc/preferences.php file of this theme, you will find the “Theme Settings” lines at the top. Change the letters assigned to those variables to your liking. Basically, “a” is dark, “b” is a mix of blue and gray, “c” is all gray, “d” is gray and white and “e” is yellow. Please refer to the jQuery Mobile official web site for more theming information.
Still in the inc/preferences.php file, you can choose which basic widget you want to show by setting the $jqtheme_sidebar_items variable (array needed). The current available widgets are ‘archives’,'pages’,'links’,'categories’. Feel free to check how they are implemented and add your own.
What’s next…
For now I don’t know if I will keep working or not on this theme. It will mostly depend on my work schedule, it’s possible. I’m also working on my own mobile detection plugin for WordPress, that I will also publish, as soon as I fixed some bugs. I hope that you will appreciate the release of this theme which can be an excellent starting point for further development.
52 Comments
Thanks for sharing your theme.
I dont suggest to waste your time for mobile detection. w3 total cache plugin can detect and directly use your theme for mobile users.
Did you try to build an iphone apps with jquery mobile?
Hi and thanks for commenting.
I have already programmed my own mobile detection plugins since those I have tried were always missing a feature that I needed. I’m testing them a bit more before release.
One of them does the automatic detection and redirect to a selected mobile theme, and allows to switch from mobile to desktop, and desktop to mobile, by displaying a stylable button (optional). I’m using this one right now at http://blogomobile.com/
The other one was programmed so I could redirect to a specific theme based on the domain name loaded. I often have to deal with multilingual websites and sometimes, instead of having domain names like en.example.com and fr.example.com, they will want thisismyexample.com for english and ceciestmonexemple.com for french. So this plugin can be used for this as well as for mobile phones: m.example.com…
I just went to the w3 total cache plugin page and people seem to complain a lot about it, a lot of users are reporting it broken?
I have not tried building any native application so far. I’ve read that Phonegap combined with jQueryMobile is very nice, but didn’t have the time to test that out yet…
am i missing something? when i enter http://blogomobile.com/ from iphone, its not redirecting to any other sub folder or sub domain.. it basically changes http://blogomobile.com/ theme directly right? this is main problem with jquery mobile and wordpress imo. There must be a “switch to original site” button which is not seems possible if we dont redirect users to different sub domain or sub folder..
i tried that plugin:
http://wordpress.org/extend/plugins/virtual-theme/
i have no idea why but it didnt work. But this plugins description is what i need. I am trying to understand how can i build an iphone application and mobile theme for http://kremim.com a wordpress site with custom taxonomy and post types. I tried your theme and like it. But i need to modify its working style for supporting custom post type and taxonomies.
As for iphone application, i understand that i can use json for my site only and i tried http://wordpress.org/extend/plugins/json-api/ But still i need to modify this plugin too for supporting custom post type and taxonomies :-/
You did not miss anything, Blogomobile is just not using the optional “Switch Theme” button. But it’s there as an option in the plugin I have made and it uses cookies to store which theme was selected. Would you like to test it? I can send it to you if you want.
Well after enough long search, i think my real solution will be json, not a theme atm. Because i want to create iphone/android applications too.. and facebook fan page can be json too actually. Thanks a lot for your replies :)
Hi Francis
Thanks for this great theme. I would like to hear if you could tell me where i can change the data-transition mode for the menu and pages from the standart to lets say “pop”. I’m relatively new to php and jQuery and do not know a lot, so i would really appreciate your help.
Thanks for any help and you time in advanced.
Greetings Nils
Hi Nils!
You should be able to change the default transition in the /scripts/fr-mobile-wp.js file, by adding:
$(‘a’).attr(‘data-transition’,'pop’);
right after:
$(‘body > div’).live(‘pagebeforecreate’,function(event){
You could also try to specify the transition to the first div of the header.php file:
by adding data-transition=”pop” in there, but I have not tried it. It sure would be better than having to change every link in a page.Thanks for writing :-)
Make sure you rewrite the “quote” ( ‘ ) characters properly, WordPress seems to change them and a copy paste of the line I wrote will probably not work…
Hi Francis
Thanks for your time helping, answering my questions, and the code snippets.
I have tried them both, but they don’t seem to work. Adding the data-transition to the first div in the header didn’t help, i tried also all the other divs in the head, but no luck.
Adding:
$(‘a’).attr(‘data-transition’,’pop’);
right after:
$(‘body > div’).live(‘pagebeforecreate’,function(event){
Didn’t help either, i made sure to have no spacings ore other code between the two code snippets.
If you have more idear’s for a solution i really would like to hear them, if not, is that also ok, the standard data transition will also do.
Greetings Nils
Hi Nils, that’s weird, I just tried it locally and the swipe effect is gone, at least, but I don’t see any real ‘pop’ effect. Maybe it renders too quickly I don’t know, but it looks like there is no transition effect when I add that line in there.
Ok I just checked your file (from the url you put with your name) and you put a dot (.) between data-transition and pop, and it should be a comma (,). Try that, it should work. :-)
$('a').attr('data-transition','pop');Hi Francis
That did the trick, it was just a typing error. You made my day, and again, thanks a lot for your help.
Greetings Nils
at first – i LOVE your theme! it is soo cool!
i try to add a Sticky footer to the theme…(on my iphone) like the fixed tool bar
(like this: http://bit.ly/9Zgj34 – watch it on idevice)
ore this
http://code.google.com/p/jqtscroll/ (demo video: http://bit.ly/bJmrf1) but it dosnt work.
please can you help me! i will use it as a full screen web app. i save the page to my home screen and everything works great but not the sticky footer :(
i hope you can help me.
and sorry for my bad english.
thanks from germany!!!
Hi Benjamin,
Unfortunately, all you can get for now it seems is what you get at the following page:
http://jquerymobile.com/test/#/test/docs/toolbars/bars-fixed.html
So everytime you do an action, the footer bar will disappear while the action occurs and reappear right after. If that’s enough for you then you can just open the footer.php file and change this line:
for this
The id=”myfooter” part is optional, it’s there only if you want the footer bar state to be persistent.
thank you!!! you are ma man
works great. thanks for your help
ok…
i had setup a new blog and it works but now i can scroll a little to the right side. you can see it here? same at my iphone….
http://img4.imagehyper.com/img/7631531-033np358-cbca44a4ab4d91710eaae6448422dc06.jpg
Thanks for your help!
Hi Benjamin, found a fix for the scroll problem on iPhones.
Add the following lines on your style.css file and it should be ok:
.ui-footer { width:auto; } #footer_btn { padding-right:0; }Hi Francis
i have the same problem with the sticky footer like benjamin.
after i replace the code the i can scroll to the right. see it here: http://imageshack.us/photo/my-images/845/foto2qn.png
please can you help me?
thanks
Hi Steve and Benjamin,
It seems to do that only on the iPhone, with or without the fixed footer bar (it’s not related). I just loaded my demo site again (jqm1.frobert.com) and it does scroll to the right with the iPhone but not with Android.
I’d have to Google for that, but I think I remember Todd Parker from jQM (or someone else in a forum) reporting the same problem and that it was going to be fixed eventually. But I’m not sure about that. Wish I could help more but that’s all I can do right now, until I get some time to search for a solution.
Thanks for you answer.
But on http://jquerymobile.com/test/#/test/docs/toolbars/bars-fixed.html it works perfekt on my iphone…!?
Thanks Steve, I guess I’ll have to examine my CSS file and compare it to see what’s wrong.
I found the CSS problem and fixed it. Thanks all! You can verify with the demo theme at http://jqm1.frobert.com/
It appears ok on my iPod Touch.
You can redownload the whole theme but it might be easier to just add the following lines at the end of the main style.css file, especially if you already modified it:
.ui-footer { width:auto; } #footer_btn { padding-right:0; }Hey Francis,
This is far the best jquery mobile wordpress theme i have played with to date, really well put together and very clean. Seriously good work man.
Could you possibly help us out with something, in the ‘single.php’, do you know how I can make the (previous and next) post navigation at the bottom, to navigate only through the same category posts as the current post category. Instead of navigating through all post categorys.
And another one, but only if you got time to explain, navigate through the posts alphabetically, not chronologically, within the ‘single.php’ navigation.
Would be awesome if you could help.
Thanks
Hi and thanks for the kind words :-)
To remain in the same category, look for this line in the single.php file:
and change the first parameter to “true”, so that you get:
Then do the same for the $next_post line (first parameter set to true).
For the second request, I think it can be done by changing the query, or otherwise by programming a custom get_adjacent_post function. With more time (which I don’t really have right now) I would find it. Sorry I can’t do more right now :-)
Hi Francis
That worked perfect, thank you for help. Appreciate it!
Thats cool about the second bit, was just curious if you had something up your sleeve. Maybe in your next version ;-)0
Josh
Hi Francis, new topic you may be interested in.
I’ve recently this morning tried using google-ui-map with your wordpress theme.
Very strange tho, it does work. Ive zipped up the code here http://wtrns.fr/kofz6KyRuSmiyp for you to look at.
It’s only 18K download – http://wtrns.fr/kofz6KyRuSmiyp
The ‘mobile-map-works.html’ file I’ve stripped out all the unnecessary code and you can open it locally off your desktop. Works Perfect.
The ‘mobile-map-wordpress-not-working.html’ are all the snippets that you need to put into your theme.
The css folder is just for the ‘mobile-map-works.html’ local example.
I am intrigued in how you can get it to work with your mobile wordpress theme. I’m sure you will get the same errors as me.
Many Thanks or if any one else can figure it out.
Josh
Hi Francis,
Don’t suppose you got a chance to look, I’m very lost.
I can get it work on its own but not with the wordpress theme.
I’m getting an error on line 318 of the jquery-ui-map.js
This is where I’m getting the source from, http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-mobile-example.html
Any one else got ideas.
Thanks
Hello Josh
I am getting the same error as you. I looked at your download, the source works, but does not seem to like wordpress. Must be conflicting with the theme or wordpress itself, which is not cool.
I even put data-ajax=”false” on the link to my map page because I thought you may have forgot that bit. But still not working. It’s a shame but you might have to load the script some other way perhaps, I’m not to sure.
Cjx
Ooops, It doesnt work… not does
he francis, thanks for your help. now the sticky fooder works perfekt.
but i think there is another bug.
the post images only works on the front page (index.php), not in categorys ore on the single page?
Would be awesome if you could help.
Thanks
Hi Steve,
If you check again on the demo site (jqm.frobert.com), the post thumbnails are displayed in the category and archive pages. Just make sure you select an archive page that contains posts that contains thumbnails though, otherwise you will not see any. For example, March 2011 is the only archive page that contains thumbnails, the other 3 months do not have thumbnails associated to their posts.
Those “featured image”s are most often used in special cases and special format. If you want the same image to appear in your post page (single.php), you can either place it directly in your article or you can modify the single.php file to add:
if ( has_post_thumbnail() ) { the_post_thumbnail(); }right before:
That should work…
Francis
Thanks for your great help!
yes it works perfect, i tested on mac (safari) and there was some problems but on mobile devices it works great.
my last question: how can i use a “white-style” like http://jquerymobile.com/demos/1.0a4.1/ ?
Thanks Steve
Hi Steve,
Yes, find the file “inc/preferences.php” and at the top of it (Theme settings), use the letter “c” instead of the other letters. Overall you can use a,b,c,d and e.
You can also make your own if you want by cloning one of the existing styles (look for them in the jquerymobile framework css files).
Bravo… Ça fait juste une semaine que je me prenais la tête pour trouver la bon thème JS pour mobile… et je tombe sur ton travail! un cadeau tombé du ciel…
J’installe le thème avec enthousiasme… et là… grande déception… il ne marche pas et je ne comprend pas pourquoi… le problème est que lorsque je sélectionne un poste pour le consulter, il me dirige vers une page blanche… Y’a t’il une solution?
(Tu peux le tester directement sur nessradio.net)
Autres points:
#1 – j’ai un menu personnalisé que j’ai créé avec la fonction “menu” de wordpress… or il ne tient compte uniquement que du menu par défaut… y’aurait-il un moyen pour qu’il affiche mon menu personnalisé?
#2 – je dois installer dans le thème un player Js pour diffuser ma Radio… connaitrais tu, par le plus grand des hasards, un player qui pourrait faire l’affaire?
J’espère que tu répondras à mon message… quoiqu’il en soit je te félicite pour ce thème et pour nous l’avoir rendu accessible!
Bon ok… je viens de me mettre une gifle à m’en éclater une dent!
Le problème vient des permaliens que j’avais modifié pour faciliter mes redirections…
(tu peux rajouter sur les infos de ton thèmes de laisser les permaliens par défauts)
Sinon pour les “autres points” c toujours d’actualité… en espérant que tu me répondes
Merci encore!
Mmmm en fait… nan… ya un soucie de conflit Java entre le thème mobile et le thème par défaut… Le souci vient de jquery.mobile… j’ai dû downgrader à la version jquery.mobile-1.0a1 pour le faire marcher… et malgré ça j’ai toujours un conflit… là je suis incapable de trouver la solution… :/
Si tu as une idée? j’espère encore… je me rêve ce thème…
Ok dernier message de ma part :)
Mais je pense qu’il est important de prévenir la communauté.
Il y a un conflit entre jquery.jplayer et jquery.mobile !!!
Voila la solution:
https://groups.google.com/group/jplayer/browse_thread/thread/478598ec79fdbee4
Tout est désormais rentré dans l’ordre…
Pour ce qui est du player ne Html5 je suis toujours preneur ;)
Merci
Hello à toi,
Je ne sais pas ou tu en es… moi j’ai utilisé jPlayer (http://www.jplayer.org/) avec le framework jQuery mobile pour ce site : http://topchretien.jesus.net/ (ce site n’est pas sous un framework, mais développé à l’ancienne) avec donc ce lecteur audio.
Thank you so much for putting this together!
I had a few issues getting it going with the custom permalink structure, but after disabling ajax (per your code comments) its running nice(was inserting hashes in URL).
The only thing I can’t figure out is why your img reszing code is not working for me. The thumbnails are fine, but the images within a post are the same size as original which is 800px. I have tested on an Android, iPhone and some simulators with the same result.
Any ideas?
Thanks!
Hello dude,
How do you derigister styles and scripts? I have not tried scripts yet but I cant get the styles to deregister using your array system in the prefrences.
It say display as an array, but what do I have to array?
I’ve tried all of this…
$deregister_styles = array(‘gravityforms’);
$deregister_styles = array(‘forms.css’);
$deregister_styles = array(‘forms.css?ver=1.5.2.8′);
neither de-register anything.. any ideas?
Many thanks Cj
I am using this theme but it is preventing people from loggin in and registering. When clicking the buttons it does absolutely nothing. In order to get into the dashboard I have to use FTP to change the theme folder names and then change them back. Any reason why this would be happening?
Example: http://sampleapp.comuf.com/?page_id=2
Hi Nick, yes this theme was done and tested only as a secondary theme, displayed via a mobile detection plugin for example. It’s still not a complete stand-alone theme mainly because of that conflict, which is probably caused by the different jquery file called by the theme so that jquery mobile works correctly.
I’ll try to release an update this month so that it uses the freshly released jquerymobile beta 2, as well as some fixes like the one you mentionned, to get access to login and registering functions.
I think it has to do with adding a hash tag to every link which would prevent it from redirecting to the correct site or something. I have seen similar problems with a different jquery mobile theme but that prevented from redirecting to the commentid after leaving a comment.
If you can fix this issue I would be willing to pay about $20 for for the fix.
Thank you much. I love your theme.
Hi Francis,
do you have a tip for me how to get a contact form to work in WordPress if I have your theme installed? “Contact Form 7″ doesn´t seem to work properly with jquery mobile and I can´t find anything on the Net. I´m helpless …
Great theme. Thank you.
I see from comments that you did some updates after 2011-03-31. Could You please give us a link to the updated version of the theme.
Regards
Hi, the link you see up there is the one from that date. It’s still Alpha 4. It really needs an update but work has been eating up my life lately!
Merci pour cet ressource ! juste une petite question SEO. Le fait de créer un site mobile avec jquery mobile n’entraine t-il pas de la duplication de contenu ?
Hi,
nice work, but on my WordPress Blog with WPTab Mobile Detector doesn’t work your theme. The Page is blank.
I have a similar issue. When I remove transitions all is well. When I leave them in the links don’t work. Looks at frobert.com, I can see that e.g. frobert.com/#?p=468 resolves fine.
I am also using such permalinks. However, on my site domain.com/#?p=123 will not resolve. Anyone with any suggestions? Want to keep the nice transitions if possible.
bonjour Francis,
ce petit mot juste pour vous dire que votre site mobile fonctionne très bien sur HTC wildfire et Android 2.2.1, même en edge; c’est bien normal du reste, vu qu’il est simple d’accès et clair comme de l’eau de roche, tout comme l’ergonomie.
ça me fait plaisir de lire votre site plein d’un bon esprit et d’infos utiles pour un entrepreneur qui fait tout tout seul ( en fin qui essaye ). et en français ( tellement plus reposant! )
bonne continuation
olivier
Hi there. Great work on this theme, I’d really love to use it on my WordPress site, but when ever I activate it, my site goes blank. Any idea what this could be?
I love this theme, and I also encounter the same problem as some other guy mentioned before, for some reason the pictures are not being resized in the single posts, instead they are being cropped. Looking at the stylesheet I found a small error,
div.attachment-picture img { min-height:320px; min-width:500px;In that line height should be 500px and width 320px. After editing that line all the images showed up with the right size.
Nevermind, it just happen that some of the images were resized properly, but in general they stay in their original size and look cropped on the portrait view.
I really have no idea why embedded videos or other flash media gets resizes properly, but no the pictures, that’s really weird.