Web Developer Blog


Mobile Device Redirect for Your Website

Friday, January 13th, 2012

I will start this post the way I start all my developer posts, I am not a master coder and am still learning. I spent several hours working on this, so I’m posting to save others’ valuable time. There are probably many easier/better ways to do it, but this definitely works. If you have found a better way, please post it in the comments section.

Feel free to use this solution on any of your projects, but please leave the credits in there and provide for me here. Thanks.

The Situation
I created a mirror site for the main website that was optimized for mobile devices. Each page on the mirror site had the same filename as it’s counterpart on the main site, but the mobile optimized files were in a subdomain like http://mobile.thesiteimtalkingabout.com. What I wanted to do was have the website automatically detect whether the visitor was using a mobile device to view the site and if so, redirect them to the same page on the mobile optimized site. For example, if someone using a mobile device tried to go to http://thesiteimtalkingabout.com/aboutus.php, they woul automatically be redirected to http://mobile.thesiteimtalkingabout.com/aboutus.php.

The Problem
I looked high and low and found a solution here that required editing the .htaccess file for the site (which I tried to no avail) and others that would redirect to the index page of the mobile optimized site regardless of which page the visitor on the mobile device was trying to visit.

The Solution
I ended up combining a couple of the solutions that I found along with some customization to get the job done. Here is what I ended up with (The comments in the code give credit to the sites that helped out).

<?php

// This code borrowed from 9 Lessons at http://www.9lessons.info/2010/09/redirect-mobile-devices-with-php.html

ob_start();
echo $_SERVER['HTTP_USER_AGENT'];
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],"webOS");
$berry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

// This code borrowed from http://www.webcheatsheet.com/PHP/get_current_page_url.php

function curPageURL()
{
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80")
{
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else
{
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}

$url = curPageURL(); // Gives the function a temporary variable
$mobile = str_replace('http://yoursitenamehere.com', 'http://mobile.yoursitenamehere.com', $url); // Allows the returned url from curPageURL to be replaced with the redirect URL for mobile devices but still maintains the separate page file names

// This code also borrowed from 9 Lessons at http://www.9lessons.info/2010/09/redirect-mobile-devices-with-php.html

if ($iphone || $android || $palmpre || $ipod || $berry == true)
{
header('Location:' . $mobile);
//OR
echo "<script>window.location='" . $mobile . "'</script>";
} else
{
ob_end_clean();
}

?>

Be sure to:
1.) Make sure you have your mobile optimized mirror site built and setup at either a subdomain or subdirectory on your website.
2.) Paste the code above at the top of all of your webpages. NOTE: This must be the first thing in your website files. So, it must be placed before the DOCTYPE declaration.
3.) Change the URL above from yoursitename.com to whatever your website URL is (on line 31 of the code snippet above).

If you want to make your code a bit cleaner, save the above code with your URL changes to a separate file (i.e., redirect-mobile-devices.php) and save it to the root of your website. Then, add the code 

<?php include ('redirect-mobile-devices.php') ?>

 on the first line of all your website files.

Share

WordPress query pages (not posts) using custom fields

Monday, December 5th, 2011

First off, let me say that I am not a master coder and am still learning. Also, I spent many a precious hour trying to find a solution for this. There are probably many easier/better ways to do it, but this definitely works. If you have found a better way, please post it in the comments section.

The Situation
Now, let me explain what it was that I wanted to do. I had several WordPress pages (not posts) with custom fields already set up. I wanted to have only those pages with a particular custom field name appear on a certain page. So, I wanted to create a custom query that would return only those pages with the custom field name.

The Problem
The problem was that most every query that I tried would not return any of the pages. Each one would only return posts (not pages) with that custom field.

I originally started working with query_posts, but I kept running into a problem with the query returning pages that did not have the custom field and also returning multiple instances of the results (probably an issue with where I had placed the wp_reset_query). I also tried this solution with no luck.

The Solution
Many thanks to Ben at Binary Moon for this article and also to this thread on the WordPress forums that helped me quite a bit.

<?php
$pages = array(
'post_type' => 'page',
'meta_key' => 'your_custom_field_name',
'order' => 'asc'
);
$queryObject = new WP_Query($pages);
?>

<?php if ( $queryObject->have_posts() )
while (
$queryObject->have_posts() ) :
$queryObject->the_post();
?>

<!-- Loop or custom code goes here -->

<?php endwhile; ?>

Be sure to:
1.) Set the custom field on your pages, and publish the pages.
2.) Paste the code above into your loop/page template file/wherever you want the results to appear.
3.) Change the bit with your_custom_field_name to the custom field that you have set up on the pages that you want to query.

For more ways to customize and use the information from the custom fields, check out Part I and Part II at the Perishable Press.

Share