Advertisement
Mobile Web Apps

Mobile WordPress Theming: Day 4

by

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.

Thumbnail

 

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.

Permalinks

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.

Plugin

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;
	}
Blog Post

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; ?>
Blog Comments

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>
Blog Links

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; ?>

Blog Comment Write

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 -->
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>


Page

What Now?

wp-mobile

 

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!

Related Posts
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Code
    WordPress
    Mastering WordPress Meta Data: Working With LoopsMetadata
    In the first two parts of this series, we covered what meta data is in WordPress and how to work with the arrays that are typically returned. Now that you've learned to do the detective work necessary to find the structure of an array, it's time to learn to use loops to automate the process of outputting an array. Once you learn this important skill you will never have to write repetitive HTML markup again.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Adding a LoopCreating wordpress theme from html 400
    In the first three parts of this series, you learned how to prepare static HTML for WordPress and to create a theme by splitting your HTML file into a set of template files and editing the stylesheet. You then uploaded your theme to WordPress and activated it. The theme still isn't displaying any content you add via the WordPress admin however; to do that you need to add a loop to your template files.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…