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.

Thank you so much, for your work to made P2 Theme finally responsive. I like it and i will use it for one of my blogs. Hope that Automattic will use your changes in the future within the original parent Theme.

Sorry for the double post, but i have one more question.

Do you know a way to add Quicktags, like in the backend of WordPress, to the P2 Postbox? I tried to include the Quicktags generated by the “Comments Form Quicktags by Regen” into it, but that don’t work at all.

I like the Quicktags, they are very useful for quick editing a post with made words BOLD or add a link. Without those quicktags it is like pain in the ass, by manual insert the right lines of code for BOLD, LINK or something else.

Any idea?

Thanks for your great work on this. I’ve tried it with OperaMini on Android and it rocks!

You might know there’s a responsive alternative to P2 called PulsePress, which adds some functionality to it’s use, like a top tabmenu.

The downsize is you can’t use all those cool P2 enhancement plugins you can in a child-theme like yours (though I’m aving some trouble with Ryan Imel’s P2 Check In).

Keep up the good work.

It looks like the iPhone stuff in the functions file has moved to lines 533-537 and 547-557.

Thanks so much for doing this! I hope they incorporate your work into the theme.

How do you install this? i have tried many time to replace the files you have given with the ones in the p2 theme, however it never works? You say to delete the lines in the function file but I only have 89 lines? pleas help, I can seem to get it to look any good when displayed on a mobile?

How do you install this? i have tried many time to replace the files you have given with the ones in the p2 theme, however it never works? You say to delete the lines in the function file but I only have 89 lines? pleas help, I can seem to get it to look any good when displayed on a mobile?

Awesome! This should be part of the P2 Core. P2 is one of the most amazing themes out there, I wish the team would take better care of developing it.

Thanks for such an awesome job 😉

@Josh
The process with child themes is that you install the parent theme (in this case, P2), then install the child theme (in this case, P2 Responsive), and then you just activate the child theme. WordPress will take care of the rest.

@Jono
May I include your code in one of my P2 child themes? I’ve got a P2 child theme on GitHub that adds category posting, would love to make it responsive if I may 😉 https://github.com/versluis/P2-Categories

whoah this blog is magnificent i like studying your articles.
Stay up the good work! You know, lots of people are hunting around for this info,
you could help them greatly.