WordPress Responsiveness

Posted on: September 29th, 2011

Making a static site responsive isn’t too difficult thanks to advancements in media queries, but getting WordPress to bend to the will of all devices is another story.

This is a custom WordPress theme based on Chris Coyier’s BLANK-Theme, the basic framework I use on pretty much every custom WordPress theme I make. The main page layout is standard XHTML/CSS, but the responsiveness is where I had some fun.

Responsive WordPress Images

After reading “Responsive Web Design” by Ethan Marcotte, I realized this site needed to be responsive. As I worked with the media queries I found issues in making a WordPress theme responsive. Thumbnail images would not respond to my sorcery. That’s when I realized that WordPress tells your images what size they should be. At least until I found this snazzy piece of code.

// Override Custom Post Image Size (Leave empty to use default theme settings)
$imgheight = '';
$imgwidth = '';

After sticking this into the pages where I add images, the image width defaults to whatever you have put in the CSS. I’ve found that this can be a bit finicky, so if you can find a better way to successfully make image sizes null, let me know in the comments below.

Fitvid.js To The Rescue

Another issue was making videos responsive. Thankfully as I was about to use a lightbox for all videos, I came across fitvid.js.

Fitvid.js takes the if out of iframe video support. Not literally, but using this juicy slice of JavaScript prevents you from having to wonder if your videos will resize properly. You should check out the main site, but For reference here is the main JavaScript snippet needed to get the videos to resize properly.

So that’s a little taste of what makes this site work. I’ll most likely write more as I tweak my site and trim off some of the fat.

Until then check out ‘Don’t Be a Jerk‘ and ‘Rejection Can Be Fun‘.

Tags: , ,

previous post: ICPC Site Development next post: Code Explosion – Week 1