I’ve had quite a few questions and requests for examples in regards to my experience with responsive web design and WordPress themes. I’ve worked with WordPress frequently over the last 10 years, and I wanted to do a quick example for those asking about my experience and figured I’d just release it free. There are lots of easy UI frameworks like Bootstrap where you can whip together responsive design with virtually no knowledge of HTML5, CSS3, media queries, etc but I wanted to create a project that showed I have the knowledge to build a responsive website design from scratch without using any UI frameworks, jQuery plugins, or similar technologies – just pure HTML5 and CSS3. I also wanted to demonstrate my knowledge of coding themes from scratch into WordPress, so I broke this project down into two sections.

The Mock-Up
So to start this project, I needed to put together a mock-up in just HTML and CSS. You can see that mock-up live here. I have started with the most basic necessities for a WordPress theme: a header, 2 columns (a posts/content column & a widgets column), and a footer. I coded this from scratch using CSS3 media queries to make it responsive. The most complicated part of the design was the responsive menu – I needed the dropdowns to go at least 3 tiers deep in preparation for WordPress. The nav menu is mostly composed of CSS, but eventually I had to add a little Javascript for toggling the dropdowns on smaller screens. You can download a zip of the mockup here.

Coding to WordPress
Coding to WordPress is fairly straight-forward. Their documentation is long-standing and the API hasn’t really changed drastically over the years. Went smoothly, wrote several things in PHP using several action hooks and even a filter. I integrated WP Customization API so you can change the logo, header image, background color, header text colors, menus, etc via the WordPress Customizer in the admin panel. After I was finished, I did quick testing using Theme Unit Test provided by WordPress and also the Theme Check plugin recommended by the WordPress Theme Developer reference.

Overall, this serves as a quick example that I was able to throw together in some spare time over the weekend. I will most likely be following up with updates to CrankedBlue; and maybe a sister theme based on Bootstrap and/or some jQuery plugins, and maybe some WordPress custom plugins as well, just because to broaden my portfolio.

Live Demo & Download
Live demo is available here. I am submitting to the WordPress theme database, however apparently after searching, it appears the wait on review can be 6+ months. In the meantime, CrankedBlue is available for download and is licenced under GPL.