Make Wordpress Mobile Friendly
July 15, 2008 – 3:01 pmFollowing on my theme for this week, here are the steps to make Wordpress mobile friendly. This assumes you are using a separate URL for your mobile friendly wordpress (such as sitename.mobi):
1 – Buy your domain and park it on your current Wordpress site, so sitename.com and sitename.mobi are generating the same content
2 – Add (or modify) the file /wp-content/themes/yourtheme/functions.php and add the following lines:
<?php
remove_action(‘template_redirect’, ‘redirect_canonical’);
function elixir_urlrewrite( $url ) {
if ( strpos( $url, get_bloginfo(“url”,”raw”) ) === false )
return $url ;
$urlparts = parse_url($url) ;
$url = str_replace( $urlparts[scheme] . “://” . $urlparts[host] , “” , $url ) ;
if ( strlen( $url ) == 0 )
$url = “/” ;
return $url ;
}
add_action(‘day_link’, ‘elixir_urlrewrite’);
add_action(‘feed_link’, ‘elixir_urlrewrite’);
add_action(‘month_link’, ‘elixir_urlrewrite’);
add_action(‘page_link’, ‘elixir_urlrewrite’);
add_action(‘post_link’, ‘elixir_urlrewrite’);
add_action(‘the_permalink’, ‘elixir_urlrewrite’);
add_action(‘year_link’, ‘elixir_urlrewrite’);
add_action(‘category_link’, ‘elixir_urlrewrite’);
add_action(‘bloginfo_url’, ‘elixir_urlrewrite’);
?>
This will cause your wordpress installation to rewrite all links to remove sitename.com from them – this stops a mobile visitor always being redirected to the .com site
3 – Modify your .htaccess file and add the following lines (replacing sitename with your site name as applicable):
Options All -Indexes
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^sitename\.com$
RewriteRule ^(.*)$ http://www.sitename.com/$1 [R=301,L]
RewriteCond %{HTTP_HOST} ^sitename\.mobi$
RewriteRule ^(.*)$ http://www.sitename.mobi/$1 [R=301,L]
</IfModule>
This replaces the built in ‘redirect_canonical’ so that it handles .com and .mobi correctly.
4 – modify your template so that it changes the doctype for a mobile device. Modify your header.php fie and replace the current ‘doctype’ line as follows:
<?php
function checkmobile(){
// Always mobile enabled on .mobi
if ( strpos( strtolower( $_SERVER['HTTP_HOST'] ) , “.mobi” ) !== false )
return true ;
if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;
if(preg_match(“/wap\.|\.wap/i”,$_SERVER["HTTP_ACCEPT"])) return true;
if(isset($_SERVER["HTTP_USER_AGENT"])){
$uamatches = array(“midp”, “j2me”, “avantg”, “docomo”, “novarra”, “palmos”, “palmsource”, “240×320″, “opwv”, “chtml”, “pda”, “windows\ ce”, “mmp\/”, “blackberry”, “mib\/”, “symbian”, “wireless”, “nokia”, “hand”, “mobi”, “phone”, “cdm”, “up\.b”, “audio”, “SIE\-”, “SEC\-”, “samsung”, “HTC”, “mot\-”, “mitsu”, “sagem”, “sony”, “alcatel”, “lg”, “eric”, “vx”, “NEC”, “philips”, “mmm”, “xx”, “panasonic”, “sharp”, “wap”, “sch”, “rover”, “pocket”, “benq”, “java”, “pt”, “pg”, “vox”, “amoi”, “bird”, “compal”, “kg”, “voda”, “sany”, “kdd”, “dbt”, “sendo”, “sgh”, “gradi”, “jb”, “\d\d\di”, “moto”);
foreach($uamatches as $uastring){
if(preg_match(“/”.$uastring.”/i”,$_SERVER["HTTP_USER_AGENT"])) return true;
}
}
return false;
}
if ( checkmobile() == true &&
strcmp( strtolower( $_SERVER['HTTP_HOST'] ) , “www.sitename.mobi” ) != 0 &&
strcmp( strtolower( $_SERVER['REQUEST_METHOD'] ) , “get” ) == 0 &&
$_SERVER['SERVER_PORT'] == 80 )
{
header(“HTTP/1.1 301 Moved Permanently”);
header(“Location: http://www.sitename.mobi” . $_SERVER['REQUEST_URI']);
exit();
}
if ( checkmobile() == true )
{ ?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.openmobilealliance.org/tech/DTD/xhtml-mobile10.dtd“>
<?php
}
else
{ ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<?php
}
?>
5 – view with a mobile device. This is when you will need to change your CSS and page layout to take into account the limitations of the mobile environment. THis was covered in previous posts:
Making Your Site Mobile Friendly – CSS
To see this in action visit http://www.fionndownhill.mobi/
Related posts:
- Making Your Site Mobile Friendly Setting up CSS for mobile phones is easy enough...
- Making Your Site Mobile Friendly – CSS CSS is vitally important in making your site mobile...
- Search Engine Friendly 301 Redirect in PHP If you are finding that the www.sitename.com and sitename.com...
- Search Engine Friendly 301 Redirect in CFM Coldfusion If you are finding that the www.sitename.com and sitename.com...
- Search Engine Friendly 301 Redirect in ASP If you are finding that the www.sitename.com and sitename.com...
9 Responses to “Make Wordpress Mobile Friendly”
Brillant Dylan thank you
By Fiona Doyle on Jul 15, 2008
Nice article. I can and probably will do what you have suggested when I can scrape together for some .mobis. But what about people who don’t have the wherewithall to do this? What do you think about those sites like mofuse?
By Colleen Dick on Jul 15, 2008
I haven’t tried it. I decided to give it a whirl and set up http://topsemtips.mofuse.mobi/.
For those who haven’t used mofuse.mobi its an application that reads the RSS feed for a site and allows a visitor to read your posts.
It looks like you can customize your feed with logos, colors, links, etc. You can even monetize your mofused site.
Personally I’m such a geek I like doing this stuff. If you’re not technically capable of doing the work (or can’t afford .mobi’s) then this might be an option.
By Dylan on Jul 15, 2008
It was nice, but I have checked wordpress have ready plug-in available, you just need to configure and it will be ready for mobile you same web site.
is there any difference between two?
I like .htaccess modification which will help a lot if you have two different domains.
Good luck
and Happy mobiling.
By Chirag on Jul 17, 2008
This code was primarily for two different domains (site.com and site.mobi), I’ve written previous posts about making your site look good for mobiles on just one domain, though that wasn’t written from a Wordpress POV.
I installed the Wordpress Mobile plug in http://www.andymoore.info/wordpress-mobile-plugin/#install and it looks good. If you don’t mind not having your own look and feel on the mobile friendly site this is an option. In fact I’ll leave it enabled on this blog which will save me re-writing my theme to be mobile friendly – saves me an hour. (see update at end of post).
For the http://www.fionndownhill.mobi site I wanted to have her face and the blog title at the top as I wanted to brand the site. The site also uses the CSS file from http://www.elixirinteractive.com to ensure the corporate site and the blog site stay similar look and feel wise.
Update:
I was casually perusing the code and noticed the following on line 582 (spaces added by me to stop the hyperlinking of the link):
a href=”http :// www . web2txt . co .uk/ wap /v2/order.php?product=’.$web2txt_id.’”>’.$web2txt_anchor.’ Ringtone
Turns out there some spam in the code though it looks like its only enabled if you don’t pay for the code, and don’t share ad revenue.
And there’s a whole host of code that’s labeled ‘we don’t want this going to validators or the w3′.
Guess you get what you pay for. I’ve now turned off the package, its easier to modify my site to be mobile friendly than to work through the code looking for gotchas.
By Dylan on Jul 17, 2008
Are there not wordpress plugins to handle all this???
By touch on Feb 7, 2009
Following wordpress plugin also working fine. Just install and activate. Now your blog is mobile ready. No need to configure anything
http://timewasteblog.com/2009/08/22/web-project-to-make-wordpress-blog-mobile-friendly/
By Rav on Aug 23, 2009
Hi,
Whilst that solution would work for some phones, it wouldn’t work for a load of others. And having 2 domains, one for web and one for mobile is not really something that is practical.
The good news though is that I’ve created a mobile plugin for wordpress that works for all devices and allows you to have one single domain!
It’s called the Wapple Architect Mobile Plugin for WordPress and it mobilizes your blog. It works for every single device, from a WML phone to a brand new swanky phone with XHTML. Images are dynamically resized and you get the option to really customize your blog any way you want.
In addition, you can upload mobile logos and style your site so the mobile version matches the website and you retain your brand identity. You also get better and more control over your SEO than other mobile plugins.
If you fancy giving it a go, the URL is http://wordpress.org/extend/plugins/wapple-architect/ – it’d be great to hear your feedback!
By Rich Gubby on Aug 27, 2009