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.
Warning: Declaration of Social_Walker_Comment::start_lvl(&$output, $depth, $args) should be compatible with Walker_Comment::start_lvl(&$output, $depth = 0, $args = Array) in /homepages/9/d69875426/htdocs/ianblog_wp/wp-content/plugins/social/lib/social/walker/comment.php on line 18
Warning: Declaration of Social_Walker_Comment::end_lvl(&$output, $depth, $args) should be compatible with Walker_Comment::end_lvl(&$output, $depth = 0, $args = Array) in /homepages/9/d69875426/htdocs/ianblog_wp/wp-content/plugins/social/lib/social/walker/comment.php on line 42
hi Ian,
congratulation, your blog is mobile friendly due to ready dot mobi score.
with W3C mobileOK, I got 91/100, but it detects my desktop version, not mobile version, just like ready dot mobi did.
Thanks Dani,
I have revisited my choices between WordPress Mobile Edition and WordPress Mobile on my test blog and may be changing over to the later. The problem I had with the W3C MobileOK checker was due to the WordPress Mobile Edition plugin.
Congratulations on your high score with W3C mobileOK
Regards,
Ian