Bringing responsive web design to P2

The P2 WordPress theme has had over a 280,000 downloads from the theme directory, is used on over 40,000 wordpress.com blogs and changed how Automattic communicates internally.

Reading the WordPress development blog, which uses P2, I noticed that it was serving a iPhone specific stylesheet but wasn’t responsive. Since I use WordPress so much myself and for clients I thought a good way to contribute to the community that makes such lovely open-source software would be to spend some time making P2 responsive.

The layout of P2 isn’t that complicated and the theme files are fairly logical so it didn’t take too long. Most of the adjustments were made with CSS, but there were a few things that needed moving around in the markup so they displayed well on small screens.

Today I’m making my work available as a child theme on GitHub. There’s one small Gotcha, which is the iPhone stylesheet. P2 serves the stylesheet using some code in the functions file in such a way as it can’t be overridden from a child theme, so you’ll need to comment out or delete lines 443-453 in p2/functions.php. It will work without this modification to the parent theme, but may appear incorrectly on iPhone’s.

Unfortunately I was only able to test it on the few devices I own, so I’d love to hear from anyone on an Android tablet or phone. But it should work fine in all modern browsers and iOS devices.

I’ve submitted my work to the Automattic theme team so hopefully in not too long a while the changes will be merged into the parent theme. In the meantime you can try out a demo of the theme or download a copy from GitHub.

Update – 16/1/2014v1.1.0 is now out which removes the need to modify the parent theme.