Adam Oliver’s Blog » Blog Archive » iPhone / iPod Touch Interface for Wordpress

iPhone / iPod Touch Interface for Wordpress

January 25th, 2009

With the increasing number of iPhone’s and iPod Touch’s out there it’s a nice idea to create an interface especially for those users. Following Apple’s interface guidelines we will be creating an alternative interface for those users who decide to select that interface rather than detecting whether the user agent is an iPhone or iPod and forcing them to see the interface.

Requirements

Wordpress

Demo

Before we start let’s have a look at the interface we’ll be creating.

The interface fits nicely with the default theme in the iPhone and iPod and it’s functionality is how you would expect the iPhone to behave. When the user clicks on a post title the page scrolls off to the side to display the post.

wordpress iphone interface

The Basic Page Structure

We’re going to create this interface without the use o a plugin. We are simply going to get stuck into the code and create an alternative version of our site in a new directory. I you would like to see this as a plugin let me know. We’ll start by creating the basic HTML structure and including the wp-blog-header.php file. For this project I’ve created a directory at http://www.adamoliver.net/iphone/ which will display the latest 10 blog posts. The install of Wordpress is at http://www.adamoliver.net/blog.

<?php require_once("../blog/wp-blog-header.php"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <title>adamoliver.net</title>
 <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
 <link rel="stylesheet" href="iui/iui.css" type="text/css" media="screen" />
 <script type="application/x-javascript" src="iui/iui.js"></script>
 <link rel="apple-touch-icon" href="iui/adamIphone.png">
</head>
<body>
</body>
</html>

As you can see I have included a javascript file which will allow us to create a funky interface an a css file which contains all the style needed for you to customise the interface as you wish.

<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

The above line is used by iPhone’s and iPod Touch’s only and sets the size and scale properties for the page.

<link rel="apple-touch-icon" href="iui/adamIphone.png" />

The other line I have included in the head of the document allows the document to have a special icon which can be used if the user saves the page to the home screen on an iPhone or iPod Touch.

The Page Header

To display the header of the page we shall use the following HTML. The h1 text will be dynamically created from javascript. I have also included a back button which will allow users to go back to the previous page.

<div class="toolbar">
	<h1 id="pageTitle"></h1>
	<a id="backButton" class="button" href="#"></a>
</div>

The Post Titles Page

Now we get to the Wordpress stuff. I am going to create a list of the recent posts first of all which all link to a div with the unique post id which we will add later.

<ul style="background-color: #ffffff;color: #000000" title="adamoliver.net" selected="true">
 
 <?php $postslist = get_posts('numberposts=10&order=DESC&orderby=post_date');
 foreach ($postslist as $post) :
 setup_postdata($post); ?>
 <li class="error"><a href="#?p=<?php the_ID(); ?>"><?php the_title(); ?></a></li>
 <?php endforeach; ?>
 
 </ul>

The above loop will get the latest 10 posts and display the title of each post linking to the relevant div as shown below. When the user clicks on the link the page will scroll across to the content.

The posts content

The actual content of the posts are initially loaded to the page but hidden from view until the user clicks on the page title. To get the posts content we use the following code:

<?php 
 // Declare global $more, before the loop.
 global $more;
 ?>

 <?php $postslist = get_posts('numberposts=10&order=DESC&orderby=post_date');
      foreach ($postslist as $post) :
      setup_postdata($post); ?>
     <div id="?p=<?php the_ID(); ?>" title="<?php the_title(); ?>" class="panel">
 <h2><?php the_title(); ?></h2>
 
 <?php
 // Display all content, including text below more
 $more = 1;
 the_content();
 ?>
 
 </div>
 <?php endforeach; ?>

Since we want to show all of the post including everything after the <!–more–> tag, if used, we will declare the global $more and before displaying the_content() we will set more equal to 1. Within the loop we want to create a div with the id of each post. The title used is the post title. Note that in this example I have used an image replacement technique in the CSS to show a logo in the heading. in the actual HTML the title of the div is used to create a page title. This is created dynamically from javascript. Then within the div simply display the post title and content using the_title() and the_content() respectively.

Download jQuery image gallery

This entry was posted on Sunday, January 25th, 2009 at 5:06 pm and is filed under Tutorials, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

AndySowards.com Says:
January 27th, 2009 at 1:10 am

AWESOME iPhone/iPod Touch Interface for Wordpress!!

How To: Create a Slick iPhone Interface for WordPress Says:
February 2nd, 2009 at 8:00 am

[...] the next part, we’re going to be using some code made by Adam Oliver. Hop over to his site and download the source files and unzip them. All that is left to do is [...]

Rendimo il nostro blog compatibile al 100% con iPhone e iPodTouch! « Marco e Massimiliano’s Weblog Says:
February 11th, 2009 at 6:02 pm

[...] volta caricare il plugin, passate a scaricare il tema di Adam Oliver. Questo tema (anteprima nella foto sopra) ha uno stile identico a quello dell’iPhone. Scaricato [...]