Originally published on Netskills voices

While Chris and Hanna have been working hard to write the posts for this blog, I’ve been doing my usual faffing about behind the scenes with the WordPress theme. In an attempt to redress the balance, they’ve asked me to blog about what I’ve been doing. As payback, once I’ve written this, I’m going to ask them to move the logo 3px to the left ūüėČ

Child of Twenty Twelve

By using a child theme, we start with a well-designed base theme that we can adapt by selectively over-riding bits of the design and functionality. The advantage of this over just using a standalone theme is that when Twenty Twelve is updated, so is our child theme, but our changes remain.

Responsivity built in

A key design¬†feature that led us to choose Twenty Twelve was its “responsiveness“.¬†That is, the design adapts to the size of the¬†display it is being viewed in.¬†So for example, as screen width reduces, images, embeds and headings resize¬†proportionally, the sidebar goes to bottom of the page to give single column, selected elements become centered…

View Netskills Voices responsive layouts in The Responsinator!

This responsive design¬†is based on the use of CSS media queries to apply different styles at different display sizes. As media queries aren’t natively supported in Internet Explorer <IE8, making responsive design work in these browsers¬†requires some JavaScript. I used the¬†respond.js¬†library for this as it is small, quick to load and has a¬†WordPress plugin.

While in theory, this theme should just work out of the box, it’s always worth testing – especially given the ever-increasing range of devices, platforms and browsers. I used browser tools like mobile emulators (Ripple extension for chrome), “View Responsive¬†layouts” in the excellent¬†web developer¬†extension,¬†screenfly¬†and The Responsinator.

Twenty twelve design tweaks

I say “tweaks” as when making changes to a¬†carefully crafted theme I am always conscious of the risk of messing up the design that made us choose it in the first place. I know from experience how what seem like small changes can ruin a good theme.

I started with simple changes such as¬†minor tweaks to formatting to better match the design we wanted. More obvious visually was the change to use post “excerpts” (summaries), rather than the full¬†post, with featured images on the homepage and other multi-post pages.

Nothing is miscellaneous

A little more challenging change was to include different banners for each category. The aim was to give consistent experience of feeling you’re “in”¬†a category when viewing posts in it (rather than defaulting to the¬†homepage banner.)¬†I looked at creating¬†separate¬†templates for each¬†category, but that felt a little messy, so after some coffee, Googling and head scratching, I came up with a single function to handle this.

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/<?php $category =
get_the_category();echo $category[0]->slug;?>

Sadly, this could be the best code I’ve ever written :-/

Wrapped inside an If/else statement (e.g. if is_category) in the theme header, this finds the category each post is in and displays the appropriate banner image (whose file name matches the category name/slug.)

In your Font Face!

Probably the most (unexpectedly) challenging to implement was our corporate font. We use a custom font called FS Joey from Fontdeck which looks quite similar to the Google Open Sans font that ships with Twenty Twelve. However, trying to work with both or swap them over caused problems.

Simply inserting a link to the FS Joey stylesheet (which calls the font) to the theme header should have been enough. This is what we do on our main site. However, this resulted in a “Flash of unstyled text” where our fallback font (Tahoma)¬†is displayed briefly until the custom font has loaded. Like the good old days of animated GIFs.

Using a webfont loader lets you hide content using CSS until the font is available. This works by programmatically adding a custom class to the HTML element, which is removed when the custom font is available. It works, but might not be ideal in some circumstances (on slow connections, non CSS clients).

Further investigations showed that in this case the problem was actually related to WordPress Рand so was the solution. By using a function to dequeue the Open Sans font call, then enqueue the FS Joey CSS, the problem went away. I may have been the only person who celebrated at this point, but it was really bugging me, so was delighted to get it off my ToDo list.

Branding

Adding the Netskills logo to the header was also more challenging than I expected. I started by trying a ‘content:before’ CSS rule to add the image only at >600px, so that it didn’t load at¬†all¬†on small screen device. However, while I was congratulating myself on getting that to work it was pointed out that the logo is a pretty important design element, so instead I went for a positioned CSS background-image. This displays at all screen sizes, but gets smaller as the screen does. I don’t think this is too disruptive to reading on a¬†phone – do you?

I also made a few custom templates, such as for search and 404s, which link back to our main website if people don’t find what they expected here.

Unbranding

A reason for setting up “voices” was to give us a place where we could write in our authentic voices, so we wanted the design to reflect this and remain personal, not too corporate. So, we moved the author photo and profile to the top of the post, set this to use the first name only and show a bit of slimmed down metadata about the post.

So,¬†that’s it for my first post here. Took me almost as long to write this as it did to make the theme in the first place. Maybe I’ll look at moving that logo myself and leave the writing to Chris and Hanna.

Hope you enjoy the design of Netskills Voices as well as the content.

Related posts: