Creating a Responsive Header in WordPress 3.4

Among all the new features and improvements that the recent WordPress 3.4 release has introduced, there is a hidden gem. The Custom Header Image feature has been supported by WordPress for some time, however previously its fixed dimensions made it too immobile to be of much use in the age of responsive design. The new release makes it flexible and introduces easier and cleaner code for this popular option. As theme developers you can now go further, taking into consideration the need to optimize for mobile visitors.

Previously the dimensions of a header image were predefined and managed with the HEADER_IMAGE_HEIGHT and HEADER_IMAGE_WIDTH constants and the uploaded file was cropped to fit these constraints. But since version 3.4 the custom header image supports flexible widths and heights and frees you from these ugly constants. Sounds intriguing, doesn’t it? Let’s see how it can be done. First of all you should decide which of the available (and widely discussed) responsive image techniques will suit you. You can afford yourselves any custom markup for this image, taking into consideration its importance for the site’s branding and at the same time its independence from a post’s structure or markup. From this point of view, the “noscript” technique looks really promising.