Site news

I had two things on the go… I’d gotten around to adding Modernizr to detect older browsers’ lack of @fontface? support and set it up so I can set my theme to use Google fonts if the visitor can see them or fall back to a standard sans-serif font if not, and I’ve been figuring how to use revision control? software, Git to be precise. There was another Admired theme update, so I saw an opportunity to practice using Git. I got all prepared to fix up .../wp-content/themes/admired/header.php after running the update, as I had to last time in order to support Modernizr, my Help pop-ups and other such features I’ve added since I installed the stock theme. In Git, first I made sure I “added” the version of header.php I’d modified to the files whose versions I’m “tracking” and “committed” the “branch.” Then I ran the theme update from the WordPress dashboard and then downloaded the new header.php, overwriting my custom one containing my changes. Typing git status confirmed the file had changed, then git diff—and this is the true magic of revision control—showed me the actual differences between the new file and the one it had overwritten. My plan had been to try git merge, but here I noticed a more significant change than I’d expected. In the updated header.php the entire section where previously Admired checked the author’s Superfish preference and conditionally enabled jQuery was entirely gone. What’s more the call to wp_enqueue_script('jquery') no longer appears anywhere in the header file! I feared I’d have to search through includes or risk a conflict, but I decided before I did anything my first step would be to view source and see if the developers left any clues as to where they moved it.

I breathed a sigh of relief when I saw not only that the theme now has the latest version of jQuery loading without my help, but it’s now got Modernizr too! It’s loading from the js/ directory inside the theme’s folder, it definitely arrived with the update. Alas it’s a customized version 2.0.6 that doesn’t have @fontface included in the detection. The way to tell this is to View Source; in Firefox and some other browsers you can actually click the link in the source file and it will show you the source of the javascript or css document itself. Modernizr has a custom build tool that lets you build a file no bigger than you need, and it lists your choices in the top of the file it generates. To keep from messing up the upgrade I just need to add @fontface to the ones already there, which I did on the Modernizr site. The required checkbox for three of the names in the custom source were not instantly recognizable on the build tool: iepp is now html5shiv v3.3 w/ printshiv, mq is Media Queries. The remaining entries, “teststyles-testprop-testallprops-prefixes-domprefixes,” have no checkboxes as they are entered automatically.

The one remaining experiment had to do with this updated file’s name. The original was modernizr-2.0.6.js, so by all rights this one should be modernizr-2.5.3.js, but will the theme recognize that file without a change somewhere, in a file I haven’t identified yet? Apparently not. The short-term solution is simply to save the new file with the old name. Checking in Firebug’s HTML tab you see that fontface now appears in the classes of the HTML element, because I’m using a browser that Modernizr has detected as supporting the embedded fonts feature. If it were an older browser Modernizr would add a class no-fontface. You may recall that the Admired theme has its own custom CSS input screen in its control panel. To that I simply added…

html.no-fontface {
font-face: Arial, Helvetica, sans-serif;
}

And of course after this unexpected detour I mustn’t forget to do what I came to do in the first place, add in my own myBlog.js after the call to wp_head(); and before the closing </head> tag to suport my help popups.

wp_enqueue_script('myBlog','../../../../../js/myBlog.js');

I intend to find out which php file the Modernizr script is being called from so I can set its version properly. The largest worry is that the change from iepp to printshiv between 2.0.6 and 2.5.x affects something IE users will notice. But for tonight, let them use Firefox!

§

Leave a Reply

Your email address will not be published. Required fields are marked *