Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Mobile WordPress Theming: Day 2

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

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

Last week we explored, jQTouch, the framework we would be using to create our mobile wordpress theme. This week, we will pick up where we left off and apply what we learned to create the theme files that we will use to integrate with a WordPress theme. Let’s get to it!

Starting Off

To begin with, we will use a default installation of jQTouch that we downloaded last week. To keep things simple, we are going to use as much of the default jQTouch functionality as possible.

First, copy the main demo directory’s contents (demos/main) and paste it into the jQTouch main folder:

Copy Main Directory

Since our blog layout will function very similarly to this demo, it makes sense to start from that point. After you’ve done this, you will need to update some of the links to the JS and CSS files. The first 60 lines you don’t really need to worry about beyond this. They are basically what makes jQTouch work the way it does. Replace the beginning of the file with this:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>jQTouch β</title>
        <style type="text/css" media="screen">@import "../jqtouch/jqtouch.min.css";</style>
        <style type="text/css" media="screen">@import "../themes/jqt/theme.min.css";</style>
        <script src="../jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                preloadImages: [
                    '../themes/jqt/img/back_button.png',
                    '../themes/jqt/img/back_button_clicked.png',
                    '../themes/jqt/img/button_clicked.png',
                    '../themes/jqt/img/grayButton.png',
                    '../themes/jqt/img/whiteButton.png',
                    '../themes/jqt/img/loading.gif'
                    ]
            });
            // Some sample Javascript functions:
            $(function(){
                // Show a swipe event on swipe test
                $('#swipeme').swipe(function(evt, data) {
                    $(this).html('You swiped <strong>' + data.direction + '</strong>!');
                });
                $('a[target="_blank"]').click(function() {
                    if (confirm('This link opens in a new window.')) {
                        return true;
                    } else {
                        $(this).removeClass('active');
                        return false;
                    }
                });
                // Page animation callback events
                $('#pageevents').
                    bind('pageAnimationStart', function(e, info){
                        $(this).find('.info').append('Started animating ' + info.direction + '… ');
                    }).
                    bind('pageAnimationEnd', function(e, info){
                        $(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
                    });
                // Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
                $('#callback').bind('pageAnimationEnd', function(e, info){
                    if (!$(this).data('loaded')) {                      // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
                        $(this).append($('<div>Loading</div>').         // Append a placeholder in case the remote HTML takes its sweet time making it back
                            load('ajax.html .info', function() {        // Overwrite the "Loading" placeholder text with the remote HTML
                                $(this).parent().data('loaded', true);  // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends
                            }));
                    }
                });
                // Orientation callback event
                $('body').bind('turn', function(e, data){
                    $('#orient').html('Orientation: ' + data.orientation);
                });
            });
        </script>

After the end script tag, you should see a style tag. This is where you know you can stop.

The Index Page

We aren't integrating with Wordpress in this part of the tutorial. Rather, we are creating the theme in ordinary HTML, and then skinning it to a theme in the next tutorial. That being said, we need to replace the default index content, with realistic blog content. Select all content between the body tags and delete it. Now we will fill it back with content. Last week, we covered all of the fundamentals of jQTouch, so everything below should be a review:

	<div id="home" class="current">
        <div class="toolbar">
            <h1>Wordpress Site</h1>
            <a class="button slideup" id="infoButton" href="#about">About</a>
        </div>
		<ul class="rounded">
			<form>
				<li><input type="text" name="search" placeholder="Search" id="some_name" /></li>					
			</form>
		</ul>
		
        <ul class="rounded">
            <li class="arrow"><a href="blog.html">Blog Articles</a> <small class="counter">12</small></li>
            <li class="arrow"><a href="#pages">Pages</a> <small class="counter">2</small></li>	
        </ul>
		<h2>External Links</h2>
        <ul class="rounded">
            <li class="forward"><a href="http://feedproxy.com" target="_blank">Subscribe</a></li>
            <li class="forward"><a href="http://twitter.com/connorzwick" target="_blank">Twitter</a></li>
            <li class="forward"><a href="http://wordpress.com" target="_blank">Desktop Page</a></li>
        </ul>
      
        <ul class="individual">
            <li><a href="mailto:dk@morfunk.com" target="_blank">Email</a></li>
            <li><a href="http://tinyurl.com/supportcz" target="_blank">Donate</a></li>
        </ul>
        <div class="info">
            <p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
        </div>
    </div>

<!-- End home -->

    <div id="about" class="selectable">
            <p><img src="jqtouch.png" /></p>
            <p><strong>Mobile Theme</strong><br />Version 0.1 beta<br />
                <a href="http://www.connorzwick.com">By Connor Zwick</a></p>
            <p><em>Push your content across more boundaries to all internet connected mobile devices<br /> using the world famous Wordpress CMS and JQTouch.</em></p>
            <p>
                <a href="http://twitter.com/connorzwick" target="_blank">@connorzwick on Twitter</a>
            </p>
            <p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
    </div>

<!-- end about -->



 <div id="pages">
        <div class="toolbar">
            <h1>Site Pages</h1>
            <a class="back" href="#">Home</a>
        </div>

        <h2>Pages</h2>
        <ul class="rounded">
            <li class="arrow"><a href="#about">About</a></li>
            <li class="arrow"><a href="#history">History</a></li>
        </ul>
</div><!-- End #pages -->


	 <div id="about">
            <div class="toolbar">
                <h1>Site Pages</h1>
                <a class="back" href="#">Home</a>
            </div>

            <h2>Pages</h2>
            <ul class="rounded">
                <li class="arrow"><a href="#edge">About</a></li>
                <li class="arrow"><a href="#plastic">History</a></li>
            </ul>
    </div><!-- End #about -->


	 <div id="history">
            <div class="toolbar">
                <h1>Site Pages</h1>
                <a class="back" href="#">Home</a>
            </div>

            <ul class="rounded">
		        <li><span class="blog-title">Post Title</span><br />
			
			<p class="page-author">By: <i>Connor Zwick</i></p>
			<p class="post">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>
			</ul>
    </div><!-- End #history -->
Main Index Page
Pages

As you can see, we've added some menus, title bars, and even an AJAX loaded blog.html page. But everything above should be review. If you find any of it confusing, please reread last week's post.

The Blog Page

With jQTouch, we tried to keep as much as possible on the initial page. As you can see, we've done that for the most part above. But for a blog, this is not very realistic because a blog will be constantly updated and, in almost all cases, it would be very innefficient to load all blog posts into one page as well. That is why for the blog menu item, we did not link to an anchor item on the same page, but rather a new HTML file. However, jQTouch will then seamlessly load this into the site.

This blog page will be a listing of all recent blog articles. So what do we want on this page?

  • A blog description
  • Post titles
  • Post author
  • Post excerpt
  • Post date

So pretty much the basics. We are going to wrap each post in an unordered list and then a list item. To make the site a little more colorful and graphically appealing, we will also format the date to look like the calendar date trend. If you don't know what I'm talking about, look below or at the preview from last week's post. We will also need to add a little custom styling, so we'll add some classes. Like this:

<ul class="rounded">
    <li><a class="blog-title" href="#livetest">Post Title</a><br />
    <div class="month">Jun</div>
    <div class="date">30</div>
    <p class="post-author">By: <i>Connor Zwick</i></p>
    <p class="post-description">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>
</ul>
Unstyled Blog Excerpt

 

It's not the most semantic use of lists, but it will make more sense in a second. In designing this theme, we have a dilemma. We have limited screen space, so we can either compress blog posts so users can see more, or we can expand them like above and give readers a better idea of what the post is about. Or we could make it simple, and do both. In this theme, we will show 5 expanded posts like above, and then we will show 5 post titles only below. We can achieve this with a simple menu:

<h1>More Posts:</h1>
<ul class="rounded">
    <li><a href="#livetest">Post Title</a></li>
    <li><a href="#livetest">Post Title</a></li>
    <li><a href="#livetest">Post Title</a></li>
    <li><a href="#livetest">Post Title</a></li>
    <li><a href="#livetest">Post Title</a></li>
</ul>
Post Title List

 

Putting the blog page together

Now, we just need to put the two pieces above together and put it in a jQTouch page. We don't need to link to JS files or CSS in the blog page. Think of the blog page as a PHP include if you're familiar with PHP. Otherwise, think of jQTouch as getting the content and then inserting it right into the main index page. This is the entire blog.html file:

<div id="blog">
    <div class="toolbar">
        <h1>Blog</h1>
        <a class="back" href="#">Home</a>
    </div>
    <div class="info">
        This is a short description of blog. Here you describe the purpose.
    </div>
    <ul class="rounded">
        <li><a class="blog-title" href="#livetest">Post Title</a><br />
	<div class="month">Jun</div>
	<div class="date">30</div>
	<p class="post-author">By: <i>Connor Zwick</i></p>
	<p class="post-description">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>
	</ul>
	
	<ul class="rounded">
        <li><a class="blog-title" href="#livetest">Post Title</a><br />
	<div class="month">Jun</div>
	<div class="date">30</div>
	<p class="post-author">By: <i>Connor Zwick</i></p>
	<p class="post-description">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>
	</ul>
	
	<ul class="rounded">
        <li><a class="blog-title" href="#livetest">Post Title</a><br />
	<div class="month">Jun</div>
	<div class="date">30</div>
	<p class="post-author">By: <i>Connor Zwick</i></p>
	<p class="post-description">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>
	</ul>
	
	<ul class="rounded">
        <li><a class="blog-title" href="#livetest">Post Title</a><br />
	<div class="month">Jun</div>
	<div class="date">30</div>
	<p class="post-author">By: <i>Connor Zwick</i></p>
	<p class="post-description">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>
	</ul>
	
	<ul class="rounded">
        <li><a class="blog-title" href="#livetest">Post Title</a><br />
	<div class="month">Jun</div>
	<div class="date">30</div>
	<p class="post-author">By: <i>Connor Zwick</i></p>
	<p class="post-description">This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.</p></li>
	</ul>
	<h1>More Posts:</h1>
	<ul class="rounded">
		<li><a href="#livetest">Post Title</a></li>
		<li><a href="#livetest">Post Title</a></li>
		<li><a href="#livetest">Post Title</a></li>
		<li><a href="#livetest">Post Title</a></li>
		<li><a href="#livetest">Post Title</a></li>
    </ul>
</div>
<div id="livetest">
    <div class="toolbar">
        <h1>Events test</h1>
        <a class="back" href="#">AJAX</a>
        <a class="button goback" href="#home">Home</a>
    </div>
    <div class="info">
        This would be where the post would go. 
    </div>
</div>

Custom Styling

Now, I mentioned earlier that we would need to add some custom CSS to format the blog page. This tutorial is not focused on the basics of CSS, so I am assuming you know the fundamentals. That being said, I will cover any CSS3 that we use, which is disappointingly very little. Only border radius, which is pretty self-explanatory. We use border-[top/bottom]-[left/right]-radius to give the calendar round corners:

.blog-title{
    border-bottom: 1px solid #333333;
}
span.blog-title{
    color: #fff;
    width: 100%;
    display: block;
    padding-bottom: 10px;
}
.post-description, .post-author{
    font-size: 12px;
    margin-left: 75px;
}
.post-author{
    margin-bottom: 3px;
}
.post, .page-author{
    font-size: 13px;
    color: #fff;
    margin-bottom: 5px;
}
#blog .rounded li{
    position: relative;
}
.month{
    position: absolute;
    width: 70px;
    text-align: center;
    background: #aa3939;
    color: #f5f2f2;
    line-height: 28px;
    padding-bottom: 5px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.date{
    position: absolute;
    width: 70px;
    margin-top: 25px;
    font-size: 40px;
    text-align: center;
    background: #f5f2f2;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
Styled Blog Excerpt

Test It Out

If everything went smoothly, you should have a working site! We covered testing as well in the last tutorial, but as a review I'll be using the official Apple iPhone Simulator. In order to run the simulator, you will need to downloaded the iOS SDK at Apple's developer center. Downloading the SDK requires that you register as an iPhone developer first (registration is free), and you will need a Mac running OS X Snow Leopard. Don't have a Mac or don't want to register as an iPhone developer? No worries, you can follow along with almost any other browser, but your results may be less accurate than mine (let's hope no one reading this is still running IE6).

Go ahead and open the iPhone Simulator or your browser of choice. If you have Xcode and the iOS SDK installed, you should be able to just search for "Simulator" in spotlight to find the application.

We're done for today!

Now that we have created the HTML for the theme, all we have to do is skin it to a wordpress theme, and we've got a finished mobile theme! Feel free to play around with the demo files and customize what we've done today for your own site.

Advertisement