Creating mobile version of wordpress pages using jQuery mobile

Some days ago I started reading about jQuery Mobile and I had this idea: ”What if we can make mobile versions of wordpress pages using jQuery Mobile and HTML5”. Turned out to be easier then I initially thought. You can take a look at jQuery Mobile site for Demos, documentation and some practical examples or just get started with the syntax. Some hours research later I decided it can easily be implemented in wordpress using Page Templates(previously mentioned here). So I made one new page template and for about 20-30 minutes I had mobile template for wordpress pages written entirely on jQuery Mobile. The coding of the whole thing is not different in any way from standard wordpress coding. You can see the code below. Of course this is just a prototype and I strongly advise you to use wp_enqueue_script and wp_enqueue_style to load js and css to your template.

<?php
/*
Template Name: MiniMe
*/
>

 <?php echo get_the_title(); ?><script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script></pre>
<div data-role="page">
<div data-role="header">
<h1></h1>
<a href="<a href=" data-icon="home" data-theme="b">Home</a></div>
<!-- /header -->
<div data-role="navbar"></div>
<!-- /navbar -->
<div data-role="content">
<div>
<div></div>
<?php
//Here you specify the ID of the POST which content you want to display
 $postid=62;
 $post = get_post($post--->ID); ?>
<div>
<div style="width: 220px;" data-role="collapsible" data-collapsed="true" data-theme="a">
<h3></h3>
<?php echo $post--->post_content; ?></div>
</div>
</div>
</div>
<!-- /content --></div>
<!-- /page -->

You can check how that looks on your mobile by scanning the post`s thumbnail with your Android/iOS device.

  • i really appreciate the kind of topics you post here. thanks for sharing us a great information that is actually helpful. good day!

    • I told my kids we’d play after I found what I neeedd. Damnit.

  • loved the website, keep up the work guys, i will be following you.

  • Great post at Creating mobile version of wordpress pages using jQuery mobile WordPress Blogs and Tutorials. I was checking continuously this blog and I am impressed! Very useful information specifically the last part 🙂 I care for such info a lot. I was looking for this certain information for a long time. Thank you and good luck.

  • Creating mobile version of wordpress pages using jQuery mobile WordPress Blogs and Tutorials I was recommended this blog by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my trouble. You’re amazing! Thanks! your article about Creating mobile version of wordpress pages using jQuery mobile WordPress Blogs and TutorialsBest Regards Nick

  • Creating mobile version of wordpress pages using jQuery mobile WordPress Blogs and Tutorials Very nice post. I just stumbled upon your blog and wished to say that I have really enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon!

  • Excellent post at Creating mobile version of wordpress pages using jQuery mobile WordPress Blogs and Tutorials. I was checking continuously this blog and I’m impressed! Extremely helpful info specially the last part 🙂 I care for such information much. I was looking for this particular info for a very long time. Thank you and good luck.

  • Hmm is anyone else encountering problems with the
    images on this blog loading? I’m trying to find out if its a problem on my end or if it’s the blog. Any responses would be greatly appreciated.

    • admin

      This is the second comment about loading problems I get I`ll spend my time moving to a CDN, so hopefully it will be fine by the next few days 🙂
      Thanks for commenting!

  • Oh my goodness! Amazing article dude! Thank you so much, However I am
    encountering troubles with your RSS. I don’t understand why I can’t join it. Is there anyone else getting the same RSS problems? Anybody who knows the solution will you kindly respond? Thanx!!

  • Thanks for this post!