Category Archives: html

WordPress Theme TwentyTwelve

Ah, now for some analysis, and discovery 🙂  Each year, the brilliant minds that contribute to WordPress come up with a new theme, and I always tear it apart to do a little reverse engineering so I can get a better sense of some of the new features in the framework.

i usually start looking in a theme’s functions.php file just to get a sense of the functionality, since my bent is more toward the engineering side of things, but definitely dig into the style.css files and any other things I find.

Keep in mind, this is by no means a thorough review of the twentytwelve theme.  It’s really a review of stuff that I think is neat or applies to me in the way I make use of wordpress.

Here’s some of the fun new stuff in WordPress’ theme, TwentyTwelve:

A mobile ready navigation!  Whoot!  I’ve got my own solutions, and this little one is pretty nice.  You’ll find some of the particulars in /js/navigation.js and the rest is in the media queries of the style sheet.  You’ll also notice that the navigation is no longer in the #access element.  It’s been renamed #site-navigation and is referenced in the style sheet under .main-navigation.

There is a function in there, twentytwelve_body_class(), that defines the body class element a bit more than the last version. It’s a nice way to handle identifying different page templates.  I’ve got my own version that adds it in on the fly from within the custom templates that I’ve created, but this is a nice separation of functionality.

There seems to be new features for customizing themes.  I stumbled across the action ‘customize_register’, which led me to this page, http://codex.wordpress.org/Plugin_API/Action_Reference/customize_register.  There I can see that the management of a theme customization page has been built into the framework since 3.4 or thereabouts.  Nice.

Oh baby…the style sheet!  The revamp of the stylesheet is a great!  It’s like I’ve been developing for the WordPress team this past year as they’ve incorporated all the practices I’ve put into place in my own theme.  Yowsa.

First thing I notice right away is the switch to ‘rem’ as a unit.  Based on the addition of the ‘rem’ unit in CSS standards a while ago, I’d already switched over to the use of that unit as my base.  It seems that the WP team has gone for it full hog and implemented the ‘rem’ unit with a ‘px’ fall back.  Thanks guys!  They leave the base at what seams to be 14px, by leaving it to 87.5% of the base font size of browsers.  I always reset mine to a 10px base so that the math is easier for me.  This way, no matter where I’m at in the style sheet, I know that 1rem is 10px.  Plus, I try to set my base font size to 16px because I’m an old fart and it’s easier for me to read 🙂

There are a few added directories, /inc and /page-templates, where it seems that they’ve decided to do a little bit of file storage architecture, or also known as cleaning up the file structures 🙂  Again, pretty nice, as I’ve always incorporated an /inc directory for functionality and style files like php scripts, javascript files and fonts.

That’s all for now 🙂

Just a quick note about WordPress Optimization

I’ve been struggling with a clients site for a few weeks now that has an enormous lag on all page loads.  8 – 10 seconds…yeah, right?  Turns out the real issue is a conflict between the PHP and PHP cURL versions and…wait for it…I’m sure you’d never guess…a…plugin. I know you are stunned at that news.  That’s not why I’ve brought you here today.

I discovered that if you add a trailing slash ‘/’ after the URL to any given page in wordpress, you can avoid a 301 redirect.  For example, http://www.example.com/test-page, really gets redirecteed to http://www.example.com/test-page/.

Depending upon your server situation, you can save up to a second or two just by eliminating those redirects.

🙂