Create iPhone-optimized themes in WordPress

Jul 16, '07 07:30:01AM

Contributed by: Anonymous

If you have your own install of WordPress, it's easy to make an iPhone-optimized theme for your blog -- without changing anything for non-iPhone users. This info might be useful for anyone building web sites with other tools as well. Here are the quickie instructions:

  1. Make a unique stylesheet, styles-iphone.css, ditching the stuff you don't need, and setting div widths to 320.
  2. Add this to the header.php file in your theme:

    <?php
      $iphone_stylesheet = str_replace(".css", "_iphone.css", get_bloginfo('stylesheet_url'));
    ?>
    <link media="only screen and (max-device-width: 480px)" href="<?php echo $iphone_stylesheet; ?>" type="text/css" rel="stylesheet" />
    <?php
      if (strstr($_SERVER['HTTP_USER_AGENT'], "iPhone"))
      {
        echo ‘<meta name="viewport" content="width = 320″ />';
      }
    ?>
This tells the iPhone to use the new stylesheet, and the viewport tells it to zoom right in on your content. There's a bit more info in my blog post, if you need more help.

Comments (1)


Mac OS X Hints
http://hints.macworld.com/article.php?story=20070709102837827