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.
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.