Hello there. I am Terry and I am a full-time undergraduate based in Singapore. I take photos, write a blog and design websites.

And no, I'm not a teddy bear.

WP theme: teddy-risation Theta

teddy-risation Theta released!

teddy-risation Theta released!

So here we have, the eight teddy-risation WP theme in it’s fully glory. Just like the other write-ups that I do for my previous themes, I will be doing one for this one as well, no exceptions. Not only does this entry helps to catalogue my list of themes and my insights of designing them (I have goldfish memory, so a backup medium for my cranial storage is needed), but I hope it will also inspire others as well.

teddy-risation Theta is coupled with the tiny rebranding movement I’ve embarked on, to ditch the funky (and not very impressive) capitalised letters in the site name and my nick as well. Known by the pseudonym ‘teddY’ in the past, I am now changing back to ‘Teddy’ or as simple as it gets, my real name, Terry. You can address me with both names now, I really don’t mind, no worries!

This theme took the longest to design – the date of its conception was actually somewhere during and after my first year final semester examinations. Ideas always have to came at the wrongest of all wrong times, don’t they? I did a simple sketch on what I wanted on paper, and moved on to my studies. When the exams ended, I immediately started materialising the layout in Photoshop, starting from the header section.

Theme Hybrid

Theta is actually a child theme of Theme Hybrid. It is a free WP theme and you can modify it in anyway you want, or even create your own child themes that rely on the Hybrid framework. I did modify a few core files on the Hybrid theme, but other than that, all the styling and customisation you see here leaves the original Hybrid files completely untouched. That means that I can easily update my theme when Hybrid issues one, without breaking my child theme.

In the past I’ve always used Sandbox. However, I’ve decided to try out other new WP themes because sadly, the Sandbox creators have paused the development of the theme and the future is rather bleak. I have to say that I really loved working on Sandbox, Andy and Scott – I really appreciate the support and help you’ve rendered to users of your theme and your dedicated effort. Because of that reason, I realised that I have to start learning how to work on other WP themes – out of the many available options like Thematic, WP Framework, Whiteboard and The Buffet Framework, I’ve chose Hybrid… for just one reason – the main colour scheme is greyish blue. What a biased choice, isn’t it?

Hybrid was a little hard to tame at first, I find myself constantly referring to different files in the library for hooks, filters and etc. The styling was a little more challenging to do, because unlike Sandbox that came in plain and simple, Hybrid has a basic stylesheet built into it and it takes time to figure things out. One thing I really love about Hybrid is that it has wonderful typography – while I have inherited the font family from the previous theme, the spacings and arrangement of text-based elements are all inherited wholely from the 22px stylesheet. Hybrid comes with a few different stylehsheets – 18px, 20px and etc, indicating the line height. I wanted my text to be more spaced out, so I picked 22px.

Randomity, and the essence of it

This theme incorporated some interesting randomity in it – the gallery images in the gallery window changes everytime you load it – not only does the array of images displayed changes, their arrangement is also jumbled up upon each reload. I’ve combined several shuffling and randomising techniques to achieve that, maybe I’ll blog about it later :) if you want it, just tell me.

Another one is the Twitter users that I follow – I have their avatars displayed in the sidebar. I have a lot of them, but I only randomly display 14 of them while the rest is hidden so that I do not clutter the sidebar up. It’s a lot of PHP stuff that I had to do, but it was fun! I spent one whole day just doing the PHP part for the Twitter widget. Tedious, but very fun and enlightening.

Fonts and sIFR

The main typeface I use for the headers and the introductory paragraph is Alte Haas Grotesk by designer Yann le Coroller. The fontw as featured in the previous week’s Fonty Friday feature, which I run on a weekly basis. For the logo, I used Colaborate Regular by Ralph Oliver du Carrois.

Since not everyone has Alte Haas Grotesk installed in their computers and that the CSS support for @font-face is rather patchy, font replacement methods, whether is it by flash or by images, are preferred. I did a little research and decide to settle for sIFR – Scalable Inman Flash Replacement. I’ve made sIFR to only replace post and page titles, so that I won’t overload your computer and make performance sluggish – anyway, it’s really, really not recommended that you use sIFR for a big chuck of text! Keep it to headers only :)

Javascript-powered feautures that gracefully degrades

One feature that I put in a lot of effort struggling to make sure that it gets incorporated into the theme is gracefully-degrading javascript-powered features when javascript is not available or disabled. As you know, many sites nowadays are powered by javascript and many of them actually breaks when JS is disabled – a good example will be YouTube – try disabling JS in your browser and see what happens.

Most of the effects you see here are powered by jQuery, a very light-weight javascript library that helps you to achieve many things that requires advance knowledge of javascript in the past. Simple actions like the toggle effect in the comment form (try clicking on the labels and see what happen) and in the Twitter section on the sidebar (visible on main page only) are easily achieved by knowing just a little bit of jQuery. Lovely, isn’t it?

jQuery also allows me to select last-child of a parent element – the :last-child pseudo-class is not very well supported in every single browser (hint hint, IE6) and so we can actually use jQuery to insert a class to the last-child. If JS is disabled, the visual impact is not too obvious to be seen while in most JS-enabled visitors, it helps to achieve a uniform, consistent appearance of list items and etc.

jQuery is also used to create the fading effect of the header navigation links, as well as the Next and Prev buttons of the gallery window in the header. I might be writing a little more about how that is achieved in the future, but I shall not bore you to death in this entry.

I’m still learning how to use jQuery, so in this theme’s functions.js file, I’ve also added annotations and urls to useful websites for first-time jQuery learners. They are excellent resources where one can start learning jQuery, with little prior knowledge of any programming languages.

The 404 page

For this theme, I’ve also designed a cute little 404 page that people will land on if they’ve followed a broken link (it can be any, but I ‘m giving you this for convenience’s sake). Check it out!

Improved gallery

Last, but not least, the Gallery page has been improved upon too. Without the obstruction of the sidebar, there’s now more space for photos, heh!

That’s all!

I guess I shall keep this post short. If you have any questions, feel free to shoot! Anyway, I have a question for anyone who’s reading this: what WP themes do you use for your theme framework? Do you create a theme completely from groundup, or modify existing themes (like me) ?

Be Sociable, Share!

Burn after reading » Now you're done reading. What's next?

Related

Related posts that might interest you:

Popular

Posts that are popular among visitors: