whump.com | More Like This WebLog

Update: I’ve created a separate entry for the iPhone meta viewport tag plugin. And yes, before you jump on me in the comments, an iPhone specific plugin is probably a little too specific (or twee for that matter.)

I spent iPhoneDevCamp poking around inside of WordPress, instead of joining one of the development teams since I wasn’t able to stay all day Saturday.

My goal was to come up with a iPhone-friendly theme using Sandbox as a base.

I wasn’t surprised to learn that someone else had done that. ContentRobot released an iWPhone theme and plugin. At Chris Messina’s suggestion, I took ContentRobot’s theme, and Alex King’s wp-mobile theme and plugin, and wrote a patch for wp-mobile.php which routes to the iWPhone theme if it has been installed and the client claims to be iPhone Safari, and defaults to the wp-mobile theme if not.

ContentRobot put thought and effort into their theme, but I wasn’t happy with it, so I wrote a simple plugin, intended for use with Sandbox, that adds a viewport meta tag to each page. The viewport is the ‘holy-grail’ rule which keeps font-size stable in portrait and landscape mode.

The plugin also adds a CSS rule for the iPhone:

  <style media="only screen and (max-device-width: 480px)" type="text/css">
  /* <![CDATA[ */
      div#content { margin: 0pt; }
  /* ]]> */
  </style>

Update: I’ve modified Sandbox so that it tests for iPhone, and skips sending the sidebars, using the weh_is_iPhone() function defined in my plugin. Testing for a mobile browser before sending those bytes would be good to add to Sandbox.

The plugin and CSS rules are not fully baked and were written specific for More Like This.

I’ll be doing more WordPress/iPhone hacking at WordCamp 2007, so if you’re interested in making more iPhone themes, please join in.