Creating a Mobile WordPress Theme with jQuery Mobile

jQuery Mobile lets you create web apps like a WordPress theme. Jean-Baptiste Jung displays a useful tutorial on how you can do that.

Here are the following steps:

1. Getting the files. With tools like Blank Theme, a WordPress theme without stylings, in use, you can save some time creating a theme from scratch. Simly grab Blank Theme and open style.css file and customize to your own preference.

2. Header and footer files. Open header.php file from the Blank Theme directory. Insert code below within and tags.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

Then replace first 6 lines of file with the following

<!DOCTYPE html>
<html>
<head>

Scroll down and search <body> tag. Replace everything from the <body> tag until the end of the file with this code:

<body <?php body_class(); ?>>

    <div data-role="page" data-theme="b" id="jqm-home">
        <div data-role="header">
            <h1><?php bloginfo('name'); ?></h1>
                    </div>
        <div data-role="content">

Save header.php and open footer.php. and replace the content with this code:

</div><!-- data role content-->

        <div data-role="footer">
            <a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div>
        <?php wp_footer(); ?>
    </div><!-- data role content-->
</body>

3. Homepage. Open the index.php file, search the loop and change it with this:

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
    <?php endwhile;endif ?>
</ul>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

Customize loops of search.php and archive.php files similar to what you did with the index.php

4. Post and pages file. Open comments.php and locate line 15. Insert this:

<div data-role="collapsible" data-state="collapsed">

Go to line 31, insert a closing </div> just before the else statement. Save file. If you want the comments shown by default, remove data-state="collapsed" attribute.

5. Search. To have access search bar, open searchform.php file, change the content with:

 <form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">

    <div data-role="fieldcontain">
                        <input type="search" name="s" id="search" value="" />
                    </div>
</form>

After saving the file, reopen index.php, include search form between get_header() function and unordered list.

<?php include('searchform.php'); ?>

6. Final touches. To make search field wide, paste the code below in style.css:

.ui-input-search{
    width:96% !important;
}

You can check out the full tutorial by clicking on the image.

See the DEMO and DOWNLOAD the finished theme.

Incoming search terms for the article:

Comments
Trackbacks

1 Comment

Pete

08.29.2012

Hey, great advice. I am going to look at this. If I run into trouble I assume you have a fee schedule for helping me. I haven’t looked before writing this. I know that the company I work for has had real issues with the mobile applications that resulted in a lot of complaints. Our business serves people on the move and in a big need, often not aware of us until they need us. Phone optimization has increased our visibility and the number of people to our local site

There are no trackbacks to display at this time.