Most people like to watch online video. Some business owner remain doubtful about the profit of incorporating online video into…
Building a Mobile Version of your Website with WordPress (CMS)
This guide on creating a mobile version of your wordpress powered website is for sites that primarily use WP as a content management system (CMS) for static pages. If your WP powered site is mainly a blog then are plenty of plugins already available for displaying a mobile friendly version of your post.
This is part 3 of our series on building mobile versions of a website for small businesses. Be sure to check out part 1 were we cover what you need to consider before designing your mobile pages. Part 2 covers how to code mobile pages in XHTML Basic, you should glance through that before you read this guide about doing the same in WordPress.
We are creating separate mobile specific pages here, not re-rendering your existing pages in a mobile friendly layout. Most the clients I work with are small businesses serving local areas. Their websites are mainly about the key pages that describe their services or products. If they happen to use a blog on the site it is for long-tail search traffic and link building, as well as publishing news and the like. The blog is secondary to those few static pages that say this is who we are and this is what we do, call us. It’s those key static pages we wish to mobify.
Creating the Mobile Page Template
WordPress lets you create page specific templates in your theme. We will build one just for use on your mobile pages. You can download a copy of a mobile template similar to what is explained below here.
Create a new php file and name it mobilepages.php. Start with this;
<?php /* Template Name: Mobile Page */
Removing the Excess Out of wp_head
WordPress adds a lot of junk to your header. Some of the plugins you use may add extra stuff there too. In the interest of minimization your pages for mobile browsers you want to omit most of that. Things like links to rss feeds, wordpress versions, parent post and adjacent post links, post archives, etc…. Bloaty, bloat, junk, junk.
In your current themes function.php file include these lines;
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
wp_generator shows the WP version number (why show this?), wlwmanifest_link is used for Window’s Live Writer (who uses that?) and rsd_link is for Real Simple Discovery, some sort of xml interface so you can blog from some other client software, besides using the WP dashboard (who uses that?). We add these the the functions.php file and they get applied to every page of your WP powered site. We don’t want them on the mobile pages, but they don’t need to be on your other pages either. Junk.
There are more actions we want to remove but just for our mobile pages. We’ll add those to the top of the template file, just below the template name, like this;
<?php
/*
Template Name: Mobile Page
*/
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action('wp_head', 'index_rel_link');
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link');
remove_action('wp_head', 'rel_canonical');
If you are using any plugins that add links to css files or java script files you may need to code a little function to exclude those. For example, the Sociable plugin will add a css file link to all your pages, even those you’ve not enabled sociable to show on. To remove that from the mobile pages I used this code;
add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
wp_deregister_style( 'sociable-front-css' );
}
If you have other plugins that do the same you’ll need to read the php file for that plugin and find the wp_print_styles hook to determine how they named it for that plugin.
Headers and Cache Control
Same as was shown in part 2, how to code a mobile website, we need to deliver some specific HTTP Headers. Add this;
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * 10;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
header('Content-type: application/xhtml+xml; charset=utf-8');
Document types and XML version declarations
Because our template file is a php script we’ll need to echo our xml declaration, else it will be mistaken for a shorthand opening php tag. So we add this;
echo "".'<?xml version="1.0" encoding="utf-8"?>'."n";
WordPress Stuff in the Head
We can add our dynamic title tag and the wp-head function.
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<?php wp_head(); ?>
The Rest of our Meta Tags and the CSS file
Now we add these;
<meta name = "viewport" content = "width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" /> <meta name="HandheldFriendly" content="True" /> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <link href="http://domain-name.com/path/to/mobile/style.css" rel="stylesheet" type="text/css" /> </head>
The Body and the WordPress Loop
Because our mobile pages are small, and there will not likely be a lot of them, nor a need for other mobile template variations, we can scrap creating separate header and footer template files that get injected with a php include(). We’ll just hard code them into the template. Our wordpress loop will sit inside our content div’s;
<body>
<div id="page">
<div id="header">
<a href="http://domain-name.com/m/">
<img scr="path/to/image/folder/logo.gif" alt="Business Name" width="xxx" height="yy" />
</a>
</div>
<div id="content">
<?php if(have_posts()) :
while(have_posts()) : the_post();
the_content(); ?>
<?php edit_post_link('Edit this page.', '<p>', '</p>'); ?>
<?php endwhile;
else : ?>
<?h2><?php _e('Not Found'); ?><?/h2>
<?php endif; ?>
</div>
<div id="menu">
<ul>
<li><a href="http://domain-name.com/m/">Home Page</a></li>
<li><a href="http://domain-name.com/m/page-1/">Page 1</a></li>
<li><a href="http://domain-name.com/m/page-2/">Page 2</a></li>
<li><a href="http://domain-name.com/m/page-3/">Page 3</a></li>
<li><a href="http://domain-name.com/m/page-4/">Page 3</a></li>
<li><a href="http://domain-name.com/m/contact/">Contact Us</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Non-mobile site <a href="http://domain-name.com">Business Name</a></p>
<p>Copyright 2010 Business Name, LLC.</p></div>
</body>
</html>
You may notice the dynamic <?h1> header tag is not included there. For these mobile pages I prefer to enter then directly into the text editor instead of relying on using the post title field. That way you can use your post title field to better differentiate you mobile pages from within your full list of pages in the WP dashboard. We are also re-editing the page file url slugs so you don’t need to rely on WP making a page file name using your full title text. We want brief short URLs.
A Back/Home link for Internal Pages
Your internal mobile pages should include a noticeable link back to the home page, since the mobile browser may not have a back button. The is_page() function in WordPress makes this easy. We’ll add an if statement that say’s “if this is not the home page, add this link” and place it in our header like this;
<div id="header">
<a href="http://domain-name.com/m/">
<img scr="path/to/image/folder/logo.gif" alt="Business Name" width="xxx" height="yy" />
</a>
<?php if (!is_page(m)) { ?>
<p><a href="http://domain-name.com/m/">Home</a></p>
<php? } ?>
</div>
I include a link to the home page in the logo at the top, by habit, but that may not be intuitive enough for most users, so the little home button does the job.
You could get more advanced and use referral agent strings to determine what the last page visited was and have the back button be an actual back button. But if you only have a handful of mobile pages and they go no deeper than 3 pages deep, a simple home button is good enough.
Upload your completed mobile page template into your current theme folder. As well its own stylesheet file.
Create Pages in Your m Folder
The Mobile Home page
I title this page the “Mobile Home Page” so I can get to it easily in the list of pages in the WP dashboard. Re-edit this page file name to be just m, instead of mobile-home-page as WP would want to do automatically. You are using pretty permalink URLs right?
In the page attribute section set this page to be a parent of the sites main home page, then select the mobile page template. Write your content and publish. You now have a mobile home page
Add the Rest of your Pages
Create the rest of your mobile pages the same way, except now select your mobile home page to be the page parent so that your internal pages all resided inside the m folder. Publish those pages and you now have a mobile website.
Redirecting Mobile Users
We want to redirect mobile users, who happen to land on the full version of the site, to our mobile pages. We also want to redirect them to the right pages and allow them to visit the full version if they choose to.
Like we did in part 2, coding a mobile web-page, we’ll use Andy Moore’s detect mobile browsers script. Buy it, download it, and save that to your current theme’s folder. Then at the top of your header.php file, in your theme, we’ll add something like this;
<?php
if (strpos($_SERVER[HTTP_REFERER],"domain-name.com")==0) {
require_once('mobile_device_detect.php');
if (is_page(2,3,4)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-1/',false);
} elseif (is_page(5)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-2/',false);
} elseif (is_page(6,7)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-3/',false);
} elseif (is_page(9,10,11,13)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/page-4/',false);
} elseif (is_page(18)) {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/contact/',false);
} else {
mobile_device_detect(true,false,true,true,true,true,true,'http://www.domain-name.com/m/',false);
}
}
?>
The strpos() function is checking our referral string in the HTTP header and if it is not coming from within our domain the mobile detection sniffer goes into action. We also take advantage of the WP is_page() function to set our redirects to specific pages. If your main site has a number of similar pages on one them, yet your mobile site only has the one page on that topic, we’ll redirect all those themed pages to the one mobile page, using a series of if, elseif statements. Inside your dashboard Page edit screen you’ll be able to get the post number codes for your page you want to redirect. Just go to the edit screen for that page and view the url, or while in your dashboard view that lists all you pages just mouse over the link to edit a page and you’ll see the post id number in the url. It should look like this;
http://www.domain-name.com/wp-admin/page.php?action=edit&post=2
The post=2 part is your post number. You can enter multiple pages at once into the one function by separating them with commas.
The final else statement simply redirects every other page of the site, except those we’ve explicitly created a re-direct for, to our mobile home page.
If you wanted mobile users to be able to still read your blog posts you may want to use some sort of mobile friendly blog posts plugin then adjust the above redirects to exclude your blog pages.
Contact HeyGoTo at (702) 475-4227 or go to www.HeyGoTo.com today to find out how we can help you! To read more industry information go to the HeyGoTo Blog at http://heygoto.com/wordpress/
The following two tabs change content below.
My Mission is to Motivate & Empower others to Genuinely Succeed with Online Marketing through Training & Mentoring!
Latest posts by David Moceri (see all)
- - August 12, 2023
- Internet Marketing – The Art of Capturing Market Share - May 20, 2017
- Top 3 Social Media Mistakes Online Marketers Need to Avoid - December 31, 2016
This post was written by David Moceri
