Going Mobile Part 2

A couple of weeks back I talked about adding a plugin to convert my blog to be viewable on mobile devices.

After I had activated the plugin, I checked the site using the page check at ready.mobi and found that the pages created by the plugin had some statements missing and some other errors. By using the helpful guidelines on the site, I was able to modify the Main Index Template (index.php) in the WordPress Mobile Edition Theme.

The original file contained:

<html>
<head>
<title><?php wp_title(‘|’); ?></title>
<meta name=”HandheldFriendly” value=”true” />
<style><!– @import url(<?php print(get_stylesheet_uri()); ?>); // –></style>
</head>

<body>

<h3><?php bloginfo(‘name’); ?></h3>

<hr />

<p>
<a href=”<?php bloginfo(‘home’); ?>”>Home</a> |
<a href=”#recent”>Recent Posts</a> |
<a href=”#pages”>Pages</a>
</p>

<hr />

<?php

$parent = 0;
$i = 0;

have_posts();

if (have_posts()) :
while (have_posts()) :
the_post();
if (is_single() || $wp_query->is_single || $wp_query->is_singular) {
if (!is_page()) {
?>
<p>« <?php next_post(‘%’, ‘Next: ‘, ‘yes’); ?> | <?php previous_post(‘%’, ‘Previous: ‘, ‘yes’); ?> »</p>
<?php
}
?>

<h1><?php the_title(); ?></h1>

<p><?php _e(‘Posted in: ‘); the_category(‘, ‘); ?></p>

<?php
the_content();
if ($wp_query->is_page && !is_home()) {
$parent = $post->ID;
?>

<p>Posted by <?php the_author(); ?><br /><?php the_time(‘F jS, Y @ g:i A’) ?></p>

<?php
}
comments_template();
if (!is_page()) {
?>
<p>« <?php next_post(‘%’, ‘Next: ‘, ‘yes’); ?> | <?php previous_post(‘%’, ‘Previous: ‘, ‘yes’); ?> »</p>
<?php
}
}
else {
if ($i == 0) {
if (is_category()) {
?>
<h1><?php _e(‘Posts in: ‘); ?><?php single_cat_title(”); ?></h1>
<?php
}
else if (is_day()) {
?>
<h1><?php _e(‘Posts on: ‘); ?><?php the_time(‘l, F jS, Y’); ?></h1>
<?php
}
else if (is_month()) {
?>
<h1><?php _e(‘Posts in: ‘); ?><?php the_time(‘F, Y’); ?></h1>
<?php
}
else if (is_year()) {
?>
<h1><?php _e(‘Posts in: ‘); ?><?php the_time(‘Y’); ?></h1>
<?php
}
else if (is_search()) {
?>
<h1><?php _e(‘Results for: ‘); ?><?php print(htmlspecialchars($s)); ?></h1>
<?php
}
print(‘<ul>’);
}
$i++;
?>
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a> <?php the_time(“Y-m-d”); ?></li>
<?php
if ($i == count($posts)) {
print(‘</ul>’);
}
}
endwhile;
endif;
?>

<hr />

<h2 id=”recent”><?php _e(‘Recent Posts’); ?></h2>

<?php ak_recent_posts(10); ?>

<hr />

<h2 id=”pages”><?php _e(‘Pages’); ?></h2>

<ul>
<?php
wp_list_pages(‘title_li=&depth=1&child_of=’.$parent);
?>
</ul>

<hr />

<p>
<a href=”<?php bloginfo(‘home’); ?>”>Home</a> |
<a href=”#recent”>Recent Posts</a> |
<a href=”#pages”>Pages</a>
</p>

<hr />

<p><a href=”<?php bloginfo(‘wpurl’); ?>/wp-admin/options-general.php?ak_action=reject_mobile”>Exit the Mobile Edition</a> (view the standard browser version).</p>

<hr />

<p>Powered by <a href=”http://wordpress.org”><strong>WordPress</strong></a>. <a href=”http://alexking.org/projects/wordpress”>WordPress Mobile Edition</a> available at alexking.org.</p>

</body>
</html>

by deleting a single element from the original and adding a few elements or modifying those already there, it now looks like this:

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.2//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd”>
<html>
<head>
<title><?php wp_title(‘|’); ?></title>

<meta http-equiv=”Cache-Control” content=”max-age=200″ />
<style type=”text/css”><!– @import url(<?php print(get_stylesheet_uri()); ?>); // –></style>
</head>

<body>

<h1><?php bloginfo(‘name’); ?></h1>

<hr />

<p>
<a href=”<?php bloginfo(‘home’); ?>”>Home</a> |
<a href=”#recent”>Recent Posts</a> |
<a href=”#pages”>Pages</a>
</p>

<hr />

<?php

$parent = 0;
$i = 0;

have_posts();

if (have_posts()) :
while (have_posts()) :
the_post();
if (is_single() || $wp_query->is_single || $wp_query->is_singular) {
if (!is_page()) {
?>
<p>« <?php next_post(‘%’, ‘Next: ‘, ‘yes’); ?> | <?php previous_post(‘%’, ‘Previous: ‘, ‘yes’); ?> »</p>
<?php
}
?>

<h2><?php the_title(); ?></h2>

<p><?php _e(‘Posted in: ‘); the_category(‘, ‘); ?></p>

<?php
the_content();
if ($wp_query->is_page && !is_home()) {
$parent = $post->ID;
?>

<p>Posted by <?php the_author(); ?><br /><?php the_time(‘F jS, Y @ g:i A’) ?></p>

<?php
}
comments_template();
if (!is_page()) {
?>
<p>« <?php next_post(‘%’, ‘Next: ‘, ‘yes’); ?> | <?php previous_post(‘%’, ‘Previous: ‘, ‘yes’); ?> »</p>
<?php
}
}
else {
if ($i == 0) {
if (is_category()) {
?>
<h1><?php _e(‘Posts in: ‘); ?><?php single_cat_title(”); ?></h1>
<?php
}
else if (is_day()) {
?>
<h1><?php _e(‘Posts on: ‘); ?><?php the_time(‘l, F jS, Y’); ?></h1>
<?php
}
else if (is_month()) {
?>
<h1><?php _e(‘Posts in: ‘); ?><?php the_time(‘F, Y’); ?></h1>
<?php
}
else if (is_year()) {
?>
<h1><?php _e(‘Posts in: ‘); ?><?php the_time(‘Y’); ?></h1>
<?php
}
else if (is_search()) {
?>
<h1><?php _e(‘Results for: ‘); ?><?php print(htmlspecialchars($s)); ?></h1>
<?php
}
print(‘<ul>’);
}
$i++;
?>
<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a> <?php the_time(“Y-m-d”); ?></li>
<?php
if ($i == count($posts)) {
print(‘</ul>’);
}
}
endwhile;
endif;
?>

<hr />

<h2 id=”recent”><?php _e(‘Recent Posts’); ?></h2>
<ul>
<?php ak_recent_posts(10); ?>
</ul>

<hr />

<h2 id=”pages”><?php _e(‘Pages’); ?></h2>

<ul>
<?php
wp_list_pages(‘title_li=&depth=1&child_of=’.$parent);
?>
</ul>

<hr />

<p>
<a href=”<?php bloginfo(‘home’); ?>”>Home</a> |
<a href=”#recent”>Recent Posts</a> |
<a href=”#pages”>Pages</a>
</p>

<hr />

<p><a href=”<?php bloginfo(‘wpurl’); ?>/index.php?ak_action=reject_mobile”>Exit the Mobile Edition</a> (view the standard browser version).</p>

<hr />

<p>Powered by <a href=”http://wordpress.org”><strong>WordPress</strong></a>. <a href=”http://alexking.org/projects/wordpress”>WordPress Mobile Edition</a> available at alexking.org.</p>

</body>
</html>

According to the ready.mobi site, this now produces pages which are good – ‘It will probably display very well on a mobile phone.’ Many tests performed by ready.mobi are defined by the W3C in the MobileOK Basic Tests 1.0 document.

To confirm the pages were valid, I tried using the W3C mobileOK Checker, but was getting:

Proxy Error

The proxy server received an invalid response from an upstream server.
The proxy server could not handle the request GETÂ /mobile/.

Reason: Error reading from remote server

I wondered if this was something to do with my ISP’s proxy server, but after testing various options, including trying from a different internet connection, I have concluded it must be an issue with the W3C mobileok validator site. I will have to try again at another time.