Mobile WordPress Theming: Day 4

Welcome to the final installment of our Mobile WordPress Theming series! In this tutorial, we will be loading posts and pages dynamically into our mobile web application. By the end, we will have a usable mobile WordPress theme! Let’s jump right in!

Changing The Theme Thumbnail

First off, as we package this theme we will need to change the theme thumbnail eventually to replace the thumbnail that came with the original naked theme. For this I just fit a screenshot of the theme into the 300 X 225 canvas. I also finally gave the theme an official name: MyTouch. It might not be the most creative, but, hey, it works. The file name is screenshot.png and is located in the root directory of any theme.

Changing Permalink Stucture

This is the one sloppy part of this series. In order to get jQTouch’s AJAX capabilities to load individual blog posts we need to modify the permalink structure of the blog. This is because out of the box, jQTouch can only load static files. However, WordPress is anything but static-it’s dynamic to the extreme. So we’re going to trick jQTouch, by creating "virtual static" pages. This is actually quite simple with WordPress. Just go to Settings > Permalinks and choose Custom Structure. Then use the following:

/%category%/%postname%.html

The important part here is the .html that we added. Everything before that is up to you.

Changing Page Permalinks

Unfortunately, pages work a little differently with permalinks. In order to get a .html extension for pages, we need to install a plugin called .html on Pages. This will append .html after all pages, and make jQTouch work again for pages.

Load Posts

Remove <section> tags

First, we need to remove the section tags that wrap the blog posts. This allows jQTouch to be able to understand the structure of the page, which will make loading the blog posts a lot easier and quicker. Now, the blog section of index.php should look like this:

<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>
<?php
  if (have_posts()):  ?>
	<?php
	    while (have_posts()) : the_post(); ?>
		<ul class="rounded">
	      <li><a class="blog-title" href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
		<div class="month"><?php the_time('M') ?></div>
		<div class="date"><?php the_time('j') ?></div>
		<p class="post-author">By: <i><?php the_author(); ?></i></p>
		<p class="post-description"><?php the_content(__('<span class="readmore">Read More</span>')); ?></p></li>
		</ul>
	    <?php endwhile; ?>
<?php else: ?>
  <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php
  endif;
  ?>
  <?php if (will_paginate()): ?>
<nav>
    <ul id="pagination">
      <li class="previous"><?php posts_nav_link('','','« Previous Entries') ?></li>
      <li class="future"><?php posts_nav_link('','Next Entries »','') ?></li>
    </ul>
</nav>
  <?php endif; ?>
</div><!-- End blog-->

Single.php

Single.php is the file that is used to view an individual post. We need to modify this, so that it is only a div section that we can easily target and load using AJAX. First, we need to check that there are posts to display. Then, we will start a while loop to display the post’s content. We have already covered almost all of the WordPress template functions below, so they should all be pretty self-explanatory:

<?php
  /**
  *@desc A single blog post See page.php is for a page layout.
  */
  if (have_posts()) : while (have_posts()) : the_post();
  ?>
<div class="post" id="post-<?php the_ID(); ?>">
	<div class="toolbar">
        <h1>Blog Post</h1>
        <a class="back" href="#">Blog</a>
    </div>
	<ul class="rounded">
      <li>
		<div class="month-small"><?php the_time('M') ?></div>
		<div class="date-small"><?php the_time('j') ?></div>
		<a class="blog-title" href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
	<p class="post-author-text">By: <i><?php the_author(); ?></i></p>
	<p class="post-text"><?php the_content_rss(); ?></p></li>
	</ul>
	<?php
  comments_template();
  endwhile; else: ?>
		<p>Sorry, no posts matched your criteria.</p>
<?php
  endif;
?>
</div>

The only thing that really is new is comments_template(). This basically inserts the comment template, which we will talk about in a bit.

Styling

We will also need to add a little bit more styling to style.css to make this look good:

.month-small{
			position: absolute;
			width: 35px;
			text-align: center;
			background: #aa3939;
			color: #f5f2f2;
			line-height: 14px;
			padding-top: 2px;
			padding-bottom: 3px;
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			font-size: 12px;
			margin-top: -8px;
			right: 15px;
	}
	.date-small{
		position: absolute;
		width: 35px;
		margin-top: 11px;
		font-size: 18px;
		text-align: center;
		background: #f5f2f2;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		right: 15px;
	}
	.post-author-text, .post-text{
		font-size: 13px;
		color: #fff;
		margin-bottom: 5px;
		text-align: justify;
		line-height: 18px;
	}
	.avatar-32{
		float: right;
		margin-right: 35px;
		margin-top: -4px;
	}
	h3{
		margin-left: 5px;
	}

Comments

I mentioned the comments template in the last step. Now we need to define that. To do so, open up comments.php.

Security and Title

We need to keep in mind that this is a template. And as such, we need to be flexible. Not all blogs will want comments enabled. Some will only want private comments. You get the idea. This first part is pretty standard to many templates, but we need to check if comments are open, what type of post this is, and then insert the comment area title. We do so with the following code:

<?php
  /**
  *@desc Included at the bottom of post.php and single.php, deals with all comment layout
  */
  if ( !empty($post->post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) :
?>
<p><?php _e('Enter your password to view comments.'); ?></p>
<?php return; endif; ?>
<h2 id="comments"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>
<?php if ( comments_open() ) : ?>
<?php endif; ?>
</h2>

Display Comments

Now we need to display comments. First, we need to check if we have comments on the post. Then we will start a foreach loop and print out each comment:

<?php if ( $comments ) : ?>
	<?php foreach ($comments as $comment) : ?>
		<ul class="rounded" id="comment-<?php comment_ID() ?>">
	      <li>
			<?php echo get_avatar( $comment, 32 ); ?>
			<div class="month-small"><?php comment_time('M') ?></div>
			<div class="date-small"><?php comment_time('j') ?></div>
			<a class="blog-title" target="_blank" href="<?php comment_author_url(); ?>"><?php comment_author(); ?></a>
			<br />
		<p class="comment-text"><?php comment_text() ?><?php edit_comment_link(__("<br /><hr />Edit This"), ''); ?></p></li>
		</ul>
	<?php endforeach; ?>
<?php else : // If there are no comments yet ?>
	<p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>

Comment RSS Feed/Trackback URL

Another pretty standard theme feature is including an RSS feed for every post’s comments as well as a trackback URL. We need to specifically target a new window for jQTouch to work properly. This complicates the Comments RSS a bit, because there isn’t an out of the box WordPress theme function that we can use that we can specify a blank target. Luckily, WordPress’ convention is basically just post url/feed. Therefore, we can create our own:

<ul class="rounded">
      <li class="forward"><a href="<?php the_permalink() ?>/feed" target="_blank">Post Comments RSS</a></li>
<?php if ( pings_open() ) : ?>
	<li class="forward"><a href="<?php trackback_url() ?>" target="_blank">Trackback URL</a></li>
	<?php endif; ?>
</ul>

Leave A Comment

Now we’re going to add the capability to add a comment. First, you need to check if comments are open (There’s a function for that). Then add a title letting the user know they can. Then we need to check if anyone can leave a comment or if you need to be registered. Then we open the form. Then we create a form in jQTouch’s style. Then we close everything up. It should make more sense below:

<?php if ( comments_open() ) : ?>
<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p><?php printf(__('You must be <a href="%s">logged in</a> to post a comment.'), get_option('siteurl')."/wp-login.php?redirect_to=".urlencode(get_permalink()));?></p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform" class="form">
<ul class="edit rounded">
<?php if ( $user_ID ) : ?>
<p><?php printf(__('Logged in as %s.'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>"><?php _e('Logout »'); ?></a></p>
<?php else : ?>
<li><input type="text" name="author" id="author" placeholder="Name" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /></li>
<li><input type="text" name="email" id="email" placeholder="Email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /></li>
<li><input type="text" name="url" id="url" placeholder="URL" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /></li>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> <?php printf(__('You can use these tags: %s'), allowed_tags()); ?></small></p>-->
<li><textarea name="comment" id="comment" placeholder="Comment Here" ></textarea></li>
</ul>
<h3>Your comment will appear after approved.</h3>
<input name="submit" type="submit" id="submit" tabindex="5" value="<?php echo attribute_escape(__('Submit Comment')); ?>" style="margin:0 10px;color:rgba(0,0,0,.9)" class="submit whiteButton" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>

Pages

We also need to make sure that we cover pages in this theme. Within index.php, we need to list out all pages in a menu. Then we can link to the actual pages content like we did with blog posts. It is very simple to list pages in WordPress. We will add one parameter though. By default the template function will add a title list item. We will fix this below:

<div id="pages">
  <div class="toolbar">
      <h1>Site Pages</h1>
      <a class="back" href="#">Home</a>
  </div>
  <h2>Pages</h2>
  <ul class="rounded">
		<?php wp_list_pages('title_li='); ?>
  </ul>
</div><!-- End #pages -->

Page.php

Page.php is the page’s version of the post’s single.php. That being said, it will be a very similar file too.

<?php
  /**
  *@desc A single blog post See page.php is for a page layout.
  */
  if (have_posts()) : while (have_posts()) : the_post();
  ?>
<div class="post" id="post-<?php the_ID(); ?>">
	<div class="toolbar">
        <h1>Blog Post</h1>
        <a class="back" href="#">Pages</a>
    </div>
	<ul class="rounded">
      <li>
		<div class="month-small"><?php the_time('M') ?></div>
		<div class="date-small"><?php the_time('j') ?></div>
		<a class="blog-title" href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
	<p class="post-author-text">By: <i><?php the_author(); ?></i></p>
	<p class="post-text"><?php the_content_rss(); ?></p></li>
	</ul>
	<?php
  comments_template();
  endwhile; else: ?>
		<p>Sorry, no pages matched your criteria.</p>
<?php
  endif;
?>
</div>

What Now?

Now we have a usable WordPress theme that anyone can use to reach mobile audiences from their desktop WordPress blog. But what now? There’s still a lot of room for improvement on this theme (There might be a tutorial on adding search functionality, or there might not be, who knows ;] -leave a comment if you’d like to see one), and that is why I am releasing it as open source to the community to use and improve upon. You can download and access the project over at http://code.google.com/p/wp-mobile/. I encourage everyone to use it and make it their own. I’d love to see some people using this, so make sure to email me a link! Let me know your thoughts!