Shabadoo v.01: A Thematic Child-Theme

Posted by on July 10, 2010 in General, Wordpress | Comments Off

Shabadoo v.01: A Thematic Child-Theme

While I could call it a “work in progress”, the truth is, I’ve learned so much while building Shabadoo that I’ve taken what I’ve learned and moved on to other projects. As a Thematic child-theme development toddler, I’m hoping that Shabadoo will be of some use to a child-theme development infant.

Here’s the story…

To those who know Thematic, they’ll immediately recognize what Shabadoo really is. It’s Ian Stewart’s Feature Site theme, just wearing a pretty dress and some lipstick. I converted Feature Site from it’s original 988px grid layout to Thematic’s more standard 960grid 2 column right-sidebar layout. Working in the 960grid was easier on me for graphics work.

I shoved in a featured content slideshow using Niall Doherty’s Coda Slider. While I’m not in love with it, as it needs some work, it does do a decent job of pulling posts from a theme-option’s specified category and displaying them. I had to use Justin Tadlock’s Get-The-Image plugin to get the images pulled correctly, as I hadn’t yet figured out how to get TimThumb working on a WordPressMU site.

More than anything, Shabadoo was an experiment. An experiment in jquery implementation, things like Cufon fonts and little eye-candy add-ons, in creating theme-options to make the theme more user-friendly to customization, and also regarding Thematic filters, in order to get the blog, category, and archive pages displayed the way I wanted.

At the sake of being a broken record, remember, its an experiment, and an incomplete one. Some area’s, like the footer, haven’t been touched from the Thematic core. The code is 99% WC3 valid, there’s just a couple bugs that are easy (i was too lazy) to quash. However, the biggest issue is with the content slider. For some reason I can’t seem to get the coda slider to operate properly when calling the jquery from wp_head. I had to call it from thematic_before, and that isn’t all that great. It works, and I’ve tested it against quite a few plug-ins, but I have a funny feeling about it. I may return to the project and implement a different slideshow, most likely jquery_cycle, incorporating timthumb to help make certain the thumbnail’s get cropped properly.

All-in-all, however, I think its a great launch-point for someone just getting their hands dirty in Thematic child-theme development. It gives some good insight into how to implement Hooks and Filters, and how to go about taking the sample theme-options page, so graciously provided by Ian and the Automattic team, and putting it to work.

Lastly, I’d like to give credit again to Ian Stewart for, well, everything. He’s the primary reason I’ve come as far as I have in theme development. I’d also like to thank Cristian Antohe over at Cozmo labs. I completely ripped off his totally awesome theme-option code for adding a custom logo to a Thematic child-theme. Don’t worry Cristian, I left your comments and credit intact! Thanks!

You can download the Theme here. The zip includes the theme, a layered Fireworks .png (sorry photoshoppers), all the plugins (all one of them), and all the images from the sample site.

You can view the sample site here.

Instructions for use

This thing is running on the latest Thematic development release, which you can download from here if you’re not already using it. The latest and greatest adds WordPress 3.0 support, which you’ll need since I’ve added 3.0 menu functionality.

You’ll first need to create a page called “Home” and give it the “front-page” template. You’ll want to set this as your front page in the WordPress Reading options, and create a new page for use as the main blog index.

Next, create your new custom menu so you can navigate around You can have as much sub-page navigation as you desire for the main menu. You’ll want to create a second page navigation menu, and be sure not to have any child pages, keep all pages on the same level, this menu can be used for side-bar page navigation, which you can add via a widget. I formatted the ul structure in the sidebar in such a way that if you have sub-pages (li li), you’re gonna have some sidebar style issues.

I’ve tried to make the Shabadoo theme options pretty straight forward, time will tell, however…I’ve supplied all the images used on the sample site, which should give a pretty good idea of what goes where, and how.

With a little work, this could become a working site, but I think it works better as a learning demo. There are so many things that can be done better, cleaner, and prettier. I use this site as a hooks and actions reference, hopefully you’ll be able to do the same.

468 ad