Preferred Platform:

Create a different look or layout on any of your pages by using the Per Menu Item Configuration. Colors, layouts or features can be changed for any menu item. Find out more...

Home DocumentationWordPressTutorialsCreating an IE6 Unsupported Page

Creating an IE6 Unsupported Page

This tutorial will take you through the steps needed to create an IE6 unsupported page functionality as used here on gantry-framework.org. You can see what this looks like by pointing your browser to: http://www.gantry-framework.org/?tmpl=unsupported. IE6 users are automatically taken to this page whenever they try to access a page on gantry-framework.org.

Unsupported Browser

Step 1: IE6 Redirect Gizmo

The logic for this IE6 Unsupported page is powered by a custom gizmo that we've called ie6redirect.php in this instance. This is a custom gizmo that we create and drop into the theme's gizmos/ folder. The code is very simple as you can see below: 

<?php
/**
 * @version   1.10-SNAPSHOT December 28, 2010
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2010 RocketTheme, LLC
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */

defined('GANTRY_VERSION') or die();

gantry_import('core.gantrygizmo');
/**
 * @package     gantry
 * @subpackage  features
 */
class GantryGizmoIE6Redirect extends GantryGizmo {
    var $_name = 'ie6redirect';

    function isEnabled(){
        return true;
    }

	function query_parsed_init() {
        global $gantry;

		$request = basename($_SERVER['REQUEST_URI']);
		
		if ($request != 'unsupported.php' && $gantry->browser->name == 'ie' && $gantry->browser->shortversion == '6') {           
            header("Location: ".$gantry->baseUrl.'unsupported.php');
        }

    }
    
}

The gizmo is actually very simple, but let's break it down into parts so you can get a feel for how it works:

isEnabled()

The isEnabled() method is set to true because we are effectively forcing this feature to be enabled. We don't need any user interaction to toggle this functionality although that could easily be added by adding a simple bit of XML in the templateDetails.xml if needed.

query_parsed_init()

This is where the logic actually happens. There is just a simple if statement to ensure that we are not already on the unsupported page, the viewing browser is ie, and the short version is 6. This ensure that only IE6 browsers will enter the if statement, and redirect the browser to the unsupported.php.

Step 2: Unsupported file

As you saw at the end of Step 1, we've redirected IE6 users to unsupported.php file, but what does this mean? We are going to place our unsupported.php file in the root of your WordPress installation and set our gizmo to redirect user to http://your-wordpress-site.com/unsupported.php each time it detects the unsupported browser.

Please note that there are two extra PHP lines just below the top commented copyright area :

define('WP_USE_THEMES', false);
require_once('./wp-blog-header.php');

These two lines are telling WordPress that it should use its mechanisms (initialise plugins etc.) on that particular php file, even if it's outside of the theme you're currently using. Please make sure that the second line with require_once function is pointing to the right location of the wp-blog-header.php file which is present in every WordPress root directory.

The unsupported.php is basically a stripped down version of our existing index.php file as you can see below:

<?php
/**
 * @version   1.10 December 28, 2010
 * @author    RocketTheme http://www.rockettheme.com
 * @copyright Copyright (C) 2007 - 2010 RocketTheme, LLC
 * @license   http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 */
define('WP_USE_THEMES', false);
require_once('./wp-blog-header.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $gantry->language; ?>" lang="<?php echo $gantry->language;?>" >
<head>
	<?php
		$gantry->displayHead();
		$gantry->addStyles(array('template.css','wordpress.css','unsupported.css'));
	?>
</head>
	<body <?php echo $gantry->displayBodyTag(); ?>>
		<div id="rt-header-surround">
	      <div id="rt-header">
	        <div class="rt-ruler-top">
	          <div class="rt-container">
	            <div class="rt-grid-12 rt-alpha">
	              <div class="rt-block">
	                <a href="/" id="rt-logo" name="rt-logo"></a>
	              </div>
	            </div>
	            <div class="clear"></div>
	          </div>
	        </div>
	      </div>
	    </div>
	    <div id="rt-main-surround">
	      <div id="rt-main-overlay">
	        <div id="rt-main" class="sa3-mb9">
	                  <div class="rt-container">
	            <div class="rt-grid-8 rt-push-2">
	              <div class="rt-block">
	                <h1>Unsupported Browser</h1>
	                    <p>
	                  You are using a browser that is not supported by this website.  That probably means your browser is woefully out of date, insecure, and just generally lacking in standards.  Luckily for you there are literally 10s of modern, standards compatible browsers available to you at no cost.  All you need to do is simply take the time to install one. </p>
	                <p>
	                We suggest installing the latest version of <a href="http://www.mozilla.com/en-US/firefox/firefox.html">Firefox</a>, <a href="http://www.google.com/chrome">Google Chrome</a>, <a href="http://www.apple.com/safari/download/">Safari</a>, heck, even <a href="http://www.opera.com/">Opera</a> would be a better option.  
	                </p>
	                
	                <p class="note">NOTE: Even though Internet Explorer 8 is an improvement on version 6 and 7, we cannot in good conscience recommend it.  It's a pretty poor browser, with many rendering bugs, and poor JavaScript performance.</p>
	              </div>
	            </div>
	            <div class="clear"></div>
	          </div>
	        </div>
	        </div>
	      </div>
	    
	    <div id="rt-footer">
	      <div class="rt-container">
	        <div class="rt-grid-12 rt-alpha rt-omega">
	          <div class="rt-block">
	            <a href="http://www.rockettheme.com" class="created-by-rockettheme"></a>
	            <div class="rt-copyright-text">Copyright © 2009-2010 RocketTheme, LLC - All Rights Reserved<br />
	              <a href="/documentation/wordpress/basics/license-and-usage">License & Terms of Service</a>
	            </div>
	            
	            <a href="http://www.gantry-framework.org" class="powered-by-gantry"></a>
	          </div>
	        </div>
	        <div class="clear"></div>
	      </div>
	    </div>
	    
	    <div id="rt-footer-shadow"></div>
		<?php $gantry->displayFooter(); ?>
	</body>
</html>
<?php
$gantry->finalize();
?>

Basically we've removed all the extraneous widget position calls, and left the page in a basic hard-coded state. You could of course keep some of the widget positions if needed, but we opted for the simple approach and kept the output as basic as possible while still offering the feel of the regular gantry-framework.org site.

Step 3: Tweaking and Testing

At this point you should have a fully functional gizmo. To test it out in your regular browser, you can just point it to http://YOUR_SITE/unsupported.php, and it should show you the new page based on the unsupported.php file you created. You should tweak and optimize this output to suit your needs. We kept ours pretty similar to our regular page, and even included our regular template.css and wordpress.css files, but we also added a new unsupported.css file that has some styling that is only needed on this page. You can see these in the addStyles() method in the unsupported.php file listed above.

After you are pretty happy with the way this looks the last step is to actually test and fix it so that it looks correct in IE6. You should be able to point your IE6 browser directly at your site: http://YOUR_SITE and it should redirect you automatically to the unsupported page you have been working on. Just tweak and adjust your css as needed to ensure that things look correct in IE6, as this is the only browser that really sees the page.

That's it! Pretty easy right?