We do a lot of custom WordPress sites. In fact, I’d go so far as to say we sort of specialize in customizing WordPress for a variety of different uses. When you start out doing customized themes, often you start with some other theme as a “framework.” We did this for a long time, but the thing with using someone else’s code as a framework is…it’s someone else’s code. And everyone writes code differently, organizes things differently, lays the elements of a site out on the page differently. And eventually, using someone else’s theme as a framework just wasn’t cutting it anymore — we’d end up spending half the time ripping out the existing code and putting our own in. Lately we’ve been building WordPress themes from scratch — but if they all are going to have the same basic elements, it saves a lot of time to copy something from an old theme (and, chances are, you end up doing this anyway). So we decided that it was time to build our own, very basic, WordPress theme framework that could be adapted for just about anything.
What’s included in this framework?
Clean, simple code, for one. I know, I know, every developer thinks they have clean code, and the definition of “clean” varies depending on who you’re talking to. The CSS in our theme is structured more or less from the top down with separations between different parts of the site. So all the general stuff that applies to everything is together, all the stuff that applies to the header comes next, then the content, then the sidebars, and last, the footer. One thing that annoyed us using Kubrik, the default WordPress theme, was that the author, Michael Heilemann, grouped the typography styles together, and the structural styles separately. That may work for him, but for us, we would end up scrolling up and down and using CTRL+F to find what we were looking for only to end up duplicating styles anyway. And one thing that always bugged me was that Kubrik had some inline styles in the header.php that I would invariably forget about. With our method, we find it easier to navigate to where we want to go, and there’s no hidden inline css. But the CSS has been reduced to a bare minimum anyway, so that you can apply whatever styles you want when you use this for your site.
Part of how we get around separating the typography styles is by using BlueprintCSS as a framework behind the theme. BlueprintCSS is a CSS framework that just applies some basic browser resets and rudimentary styles and typography for the basic html and common CSS elements so you don’t have to worry about it. There’s some debate in the design community about using a CSS framework, but Blueprint’s intent is to create a stable framework so you spend less time hacking and more time designing, which is what we do. They even have an IE stylesheet that fixes most common IE compatibility issues so the sites you build with Blueprint come out compatible with IE6 without spending a lot of time futzing with conditional styles.
We’ve included the social bookmarking links we posted about last June on the single post template. You can copy the block over to the index.php or page.php if you want sharing options on the main blog or the page templates as well. The sidebars are entirely widgetized, and split into two unique sidebars, so you can easily turn a single-sidebar theme into a two-sidebar theme and back again. And we’ve built a unique 404 page with links to other areas of the site to help your wayfaring visitors back to content that matters.
Oh, and the navbar uses the wp_list_pages tag to create a menu powered by Son of Suckerfish, which is a cross-platform browser-tested javascript dropdown menu that is lightweight and works well. Also, we included the code necessary to create your own theme-based favicon, just save your favicon.ico in the /images folder.
There’s no fancy admin back panel, we really just wanted to build a very simple framework that could be used for anything, and will be used for everything we do, and since we did all the work in creating it, we figured we might as well let others benefit from it as well. We only ask that if you do use our framework for your theme you credit us somewhere — the theme’s style.css is good enough for us, but we wouldn’t refuse if you wanted to link to us, too!
Check out the AP-blueprint demo
Download AP-blueprint 210.4 kB
downloaded 8 times
Leave a Reply