An Idea for a New Default Theme for WordPress—Introducing Kirby

In 2010 WordPress will get a new Default Theme, replacing the beloved/hated Kubrick Theme with a new Theme called 2010. I’ve got opinions on the matter. Oh, do I have opinions. I’ve even gone so far as to create a working idea for a new Default WordPress Theme. Read on to find out more.

Principles for a WordPress Default Theme

I’ve set myself some principles for designing a Default Theme.

It should look like a really nice blog theme with a “WordPress” feel

It should be easy to modify and tweak by directly editing template files

It should be easy to Child Theme without directly editing template files

These 3 principles sound pretty simple, right? Well, not really. If you’re just talking about them, yeah maybe. But talking about a WordPress Theme doesn’t make one. Are they so simple when you actually try and make a WordPress Theme that follows these principles?

No. Not really.

First of all, it’s relatively easy to design a WordPress Theme knowing it will only be used by people who have a specific purpose for it. You only download a WordPress Theme if you want to use it, right? Well, how do you design a WordPress Theme that will be forced on people? Most especially, forced on people who are new to WordPress? People who may take one look at the Default Theme and slap their monitors in horror lest they look on something so hideous, so, so limiting ever again?

Plus, who says a Default Theme should look like a “blog” Theme?

And, while knowing that most people start their WordPress-theming with the Default Theme and, increasingly, their web designing with the Default Theme—knowing and suffering under that awful pressure and responsibility—how do you make it easy to tweak simply and make it easy to Child Theme—without turning it into a Framework Theme.

Trust me here. While people may be asking for a Framework as the Default Theme they’re not all asking for the same thing. Something as robust as Thematic will have people running screaming away from it. People that want Framework Themes can download Framework Themes. I’m not so sure every new user should have one forced on them.

Introducing The Kirby Theme

So I made the Kirby Theme. Actions speak louder than words, right? In the same way, code speaks louder than ideas. What better way to show off your ideas for a new Default Theme than to actually code one up? I get a fun project and you get a new Theme.

Will all my ideas for a new Theme be good? Nope. That’s awesome though. Let’s get some of the bad ideas out in the open before we’re stuck with them.

Will some of my ideas be good? I hope so! Download the Theme; read this long rambling post; leave some comments; argue with me. I’ll probably listen to your ideas and might just figure out how to make Kirby better. And your ideas just might help whatever Theme becomes the new Default Theme get better too.

Important note: I’ve never been a fan of my own design work (I’m my worst critic) so I won’t try and sell you too much on what I’ve done here except to say that I’ve kept things intentionally simple. But I will ask that if the design is holding you back please, please look at the structure of this thing. It’s super flexible and easy to modify and I’d hate to see it ignored because of any failings I’ve made visually.

The Layout of The Kirby Theme

Anyone want to argue about fixed-width designs versus fluid layouts? Sigh. I don’t. I’ve had the argument long enough with myself. Once I decided on including a changeable header image I decided I was creating a fixed-width layout.

But while the design is fixed width the markup isn’t. Kirby could look like anything you want it to be if you’re tweaking it. Or modifying it with a Child Theme. Which, frankly, is a great idea (once it gets a little more stable, design-wise, that is). Regardless, however you want to modify it, I’ve included some sample layouts—in kirby/layouts/—that you can use to get you started.

If you’re just tweaking Kirby directly you can choose a new layout simply by editing one line in style.css—@import url('layouts/2c-r.css');—and selecting a new file to import. Why not make a setting where you can choose your layout from a drop down menu? I don’t know. That’s always been a Theme setting that rubbed me the wrong way and I think it adds another level of weirdness when you’re Child Theming. You’ll have to convince me this is a good idea.

And If you didn’t notice, I’m ripping off Kubrick. That default header image is essentially Kubrick’s (only Kirby’s is squared off) and the color scheme is almost identical (Kirby is more contrast-ey). In my opinion there’s no sense in throwing out everything. Like it or not, the big blue header, gray background, and 2-column layout look like WordPress.

The point: A Default Theme can have a fixed width. But don’t worry. With the right markup it can look like anything—even a fluid width site. If the Default Theme was somewhat reminiscent of what’s come before that might not be so bad.

The Header

Like I said, I’ve included a changeable header that you can update via the WordPress backend. Something people new to blogging with WordPress always want. But we also want to have Kirby work great for Child Themes, right? Even ones that aren’t as wide as Kirby. How about we filter those header constants?

The idea here is that anything simple in a Default Theme that can’t be altered with CSS needs to be filtered. That goes for avatars too. It’s such a simple thing and goes a long way towards making a Default Theme usable by people looking to use Child Themes. And if it’s used in a Default Theme it’ll spread out into other Themes and make them more usable too.

Also the Title and Description have been largely left alone. A Default Theme needs to accommodate ridiculously long titles and descriptions. Something I hope Kirby does.

The point: A changeable header is a good idea. Filtering image sizes is probably a good idea too. And you can’t get too fancy with the design.

Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.

Blogs should be about the content, content that’s easy to read. And a WordPress Default Theme should be a blog theme (yes, even though WordPress is a CMS—which it is, if you didn’t know). That’s all I have to say about that.

Further to the general blogginess of the Kirby Theme, if you fill out your Bio in your user profile you get a nice little About The Author section at the bottom of your posts. Bonus!

The point: WordPress is first and foremost a blogging tool and the Default Theme should still look like a Blog Theme. Readability is important.

The Sidebars

Kirby has 2 sidebars. Even though it looks like there’s only one. Which could be … annoying—if it weren’t awesome. Let me explain.

This is something I learned from the now famous Sandbox Theme and like to think I improved on slightly with the Thematic Theme and now Kirby. Even if your basic Theme look is a 2-column one, having 2 sidebars with a particular HTML structure will allow you to duplicate almost any blog or site layout. 1-column, 2-column, 3-column, or something different. Have you seen all the different Thematic Child Themes? There’s a reason they can all look so different and in most cases it’s not “hooks and filters”—it’s the HTML structure.

If you markup any Theme just so, there are very few layouts you can’t accomplish with a few simple CSS tweaks.

The point: Structure, structure, structure. 2 sidebars are still needed if we want a Default Theme to be flexible—even if it looks like there’s only one sidebar.

The Footer

The footer has four little widget areas for those that long for the fattest of fat footers. Which is kinda cool. Using is_active_sidebar() the markup only appears if you’re actually using them. Again, kinda cool but not the coolest.

Cooler still is the editable footer message imported from Thematic. It’s all shortcoded up for you too so you can do things like easily add a copyright date or a link back to the Theme landing page—or not. It’s editable. You can take all that stuff out of there without worrying about editing theme files.

Why no widget area here? Because I don’t want to encourage anyone to put The Calendar Widget where the design really needs a bit of text. Sometimes limitations are good.

Ooh! I also added a fancier link to WordPress itself, using the lovely description “Semantic Personal Publishing Platform” as the title text. I love that description. Also the simple CSS image replacement is a working example for people looking to replace their site titles with a logo.

The point: People like to edit the stuff in their footers without touching code. Let them. Simple CSS is its own tutorial.

Other Cool Stuff

This Theme should have other cool stuff, shouldn’t it? I’m working on it (I’ve got a Kirby to-do list).

Right now it has a Feature Template that makes the content full-width and moves the sidebars into 2 columns underneath. You could do a lot of stuff with this template. Using The Section Widget Plugin and Query Posts Widget Plugin you could even make your home page look sorta like a magazine. But I’m not sure if this is the best way to go about this sorta thing.

Which brings me to the big problem with designing something intended to be a Default Theme. Where do you start and where do you end with the cool stuff? Originally I intended on adding Thumbnail support (and may yet change my mind on this again) but, well, that’s not really a default thing is it? But, then, what is the default mode of a WordPress blog?

What does a Default Theme have to do? A big question. And, besides being one that needs to be answered, is sure to generate an answer that will annoy as many people as it does please.

In other words, a fun project! WordPress Themers, have a go at it yourself. You might contribute some cool ideas to the next WordPress Default Theme and at the very least you’ll have a new Theme to contribute back to the WordPress ecosystem. No small thing at all.

The point: You can’t just go putting everything in a Default Theme. But it’s worth thinking about and more Themers should give it a shot.

And Remember …

The Kirby Theme: What sucks? What’s awesome? Where have I gone off the rails in my pursuit of a Default Theme? Let me know in the comments. Don’t be shy.

Besides the Pages Widget, no, there isn’t a way to navigate to child pages. But there IS a Pages widget. 🙂

I do plan on sweetening up the sidebar a little more though but I would be surprised if fooling around with widgets wasn’t one of the first things new WordPress users did. Needs more thought on my part for sure though.

I guess if people hadn’t gotten far enough as to figure out how to install WordPress on their own, they might play with widgets, but if they’ve never used them before, They won’t know any of that exists. You’d be surprised how “cool” my clients think it is that they can change their blog sidebar themselves. “Wow, look at that, just drag and drop! Cool!”

Out-of-the-box the default contents of the sidebar should be menus that will probably be hard or too obscure to navigate any other way. These menus are the usual: Categories, Archives, probably Pages too although we already have it on the header area as well, Meta, and so on. This is just in case the users won’t be fooling around with Widget areas.

The second advantage is that for preview/demo purposes on sites where you can’t tweak your own Widget areas *cough*the Theme Directory*cough*, the theme’s sidebar will at least show some content and not be empty.

One of the things I was thinking of was an info block that said something like “This is 1 of several widgetized areas using [a list of default widgets]—go crazy on the widgets page and change things up.”

I’m a fan. I like that you decided to go with a 16px font-size. I have tried to implement that into some project at work and they got shot down. A lot of people are still under the misconception that type on the web should be small. But I hope to see that dissolve more this year.

Kirby doesn’t look half bad either. You’re too hard on yourself…After setting up a handful of sites using Thematic it will also be extremely nice to be able to add descriptions to the different widget areas.

While I would personally love to see Thematic as the default theme for WordPress I will agree with you it is likely too complicated for the average end user. Thanks for your work on Kirby so far. Hope it makes the cut as the new default WP theme for 3.0.

I think you have done a great job so far, and I’m excited to see what’ll be the final outcome. It’s good to have a bit of a “academic approach” to the theme, meaning that you think before you theme, so to speak. I will be testing out the Kirb myself a bit, I’ll be sure to let you know if I find something smelling strange. Doubt i will.

Although I have worked with WP and have customized themes in the past, I downloaded Kirby and am playing with it from the perspective of someone I know, a non-techie small business owner who has been forced to learn HTML/CSS against his will so he can make some changes with the look of his WP site. So far I think he would approve of Kirby and the ease with which you can make changes without having to tweak the CSS or template files.

One of his biggest wish is to have a theme where he can easily move the sidebars, or add a second sidebar & change his site from 2 columns to 3. Is there a way to do this with Kirby without touching code? I couldn’t find that easily. I do like that you’ve provided a bunch of widget areas.

From a designer’s perspective (i.e. mine), I really like the look & feel of Kirby. It’s much more 2010 than Kubrick – personally, I think rounded corners are overrated. Although, I think the gravatar seems out of place, might be better floating left.

Overall I think it’s great! Good luck! I hope it makes it as the new default theme!

No, but seriously though I think most end users of WordPress (who don’t know I a jot about code) would only end up having more problems. EG. Why isn’t my sidebar lining up now? What does “float left” mean? What if I want a FOUR column design? Basically I think it gives the average Joe/Jane too much power.

I think it’s best to have the default WordPress theme allow end users a couple of simple changes (custom header and possibly custom colors) but leave most of the significant design choices to the coders (us).

I haven’t heard anyone refer to CSS as “markup” before, that’s normally what HTML is referred to as.

I don’t think this is suitable as a default theme as it is too complex under the hood. You could create exactly the same design without all the extra PHP in there. If someone wants a framework they should download Thematic, Hybrid etc. I don’t see much point in including that sort of functionality into a default theme.

It should be as easy as possible to use, not complicated by a bunch of extra coding junk that they’re unlikely to use or care about. Kubrick suffers from the same problems IMO.

Oh, well, that’s a tough one then. I imagine heads would explode if the new Default Theme was that bare bones. For Kirby, it could at least be better commented with soothing PHPDoc comment sections and just generally cleaned up.

If the new default theme has absolutely no potential for true customization then people will just end up doing the same thing they do now—switching immediately to a new theme to begin their own design; which means we might as well stick with Kubrick.

I get the impression that a lot of people want a superhtml5css3megaoptionframework Theme (which isn’t what I was attempting with Kirby, at all). Anyway, I would like to see a bit more in functions.php than registering 1 widget area (maybe registering a widget). A lot of people have no idea what functions.php is for.

Most end users don’t even touch the code of WordPress themes anyway. Kirby is setup to work out of the box. It’s far from a theme framework. Kubrick makes things crazy complicated. There’s no comparison between it and lil Kirby. Just try and remove the header code for Kubrick and add an additional sidebar. It’s a nightmare!

Kirby is (relatively) simple and it just works, but if someone wants the extra power of the custom code within Kirby it’s there—and it’s just a matter of changing a couple of lines of code.

@Ian – actually, it depends on how the user changes the font size. The fonts on Kirby do not scale at all in Firefox when changing the values under Tools -> Options -> Content -> Font and Colors -> Size. You must remember that pressing control with +, – or 0 in Firefox will only scale the page while using the options affects only the font size.

I’m thinking the number of people with vision issues who know about text resizing and are not using a browser that can take care of their needs is incredibly small. That said, there’s no harm in making the textual CSS perfect. I can pull my hair out and revert to ems (I started with em-based text sizing). If it’s better, it’s better. Thanks for the heads up.

@Ian – No problem. The main reason that I pointed this out in the first place is that I believe use of pixels for font sizes to be a step backwards from Kubrick – which uses em sizes. I’m stoked that you are considering the adoption of this practice!

Using em’s is good practice. In reality it’s not really anymore useful than using pixels in real world situations, but in CSS circles the use of px’s for sizing text is definitely frowned upon except in very specific situations (eg: in headers, or logos where the text needs to match the height of a certain block for styling purposes).

em’s were set to behave like px’s by Gecko, Opera and Webkit as a way to improve accessibility due to too many web developers hacking things into position with measurements in px’s. However that was never their intended purpose, they were always intended to render at the exact dimensions you specify. By using px’s for font-sizing you are merely reinforcing the problem with the browser vendors.

I believe the last browser to render font-size correctly when using px’s was Internet Explorer 6. I find it rather scary to think that IE6 actually does ANYTHING better than the current batch of browsers, but it actually does.

I like what you are doing with Kirby and I think that, whatever happens with the new default theme and independently of where that discussion eventually takes us, you should keep working on Kirby and develop it into a refined, simple, no-frills theme, to offer alongside Thematic.

I enjoyed reading your post about what a new WP default theme should be. You’ve obviously spent a great deal of time thinking about it and even more obvious is that you wrote a really long post to explain your thinking. Your points were all very convincing to me… except maybe that a default WP theme should be a Blog theme.

My overall impression is positive. You’ve covered the bases and delivered an attractive, functional theme that can stand on its own or await the tweaks of someone looking to pump it up.

As someone else has stated, please keep this going whether or not it becomes -the- default theme for WordPress.

Really good looking professional WordPress theme. Justin (I think he’s confusing me here with Justin Tadlock. Oops!–Ian) you did it again, always is nice to be updated with you great work and service. Also Kirby is good name, means lot to me personally so I am hooked up here.

English is not my first language, so I must find free time to translate this WP theme and get familiar with the code, and show your work here with my people.

Today is our Orthodox Christmas, here in Serbia, it is nice to have this gift from you. Things are really powered by God. 10x MAN.

Excellent article, theme, and tips — well done. I vote for Kirby as the new WP default theme.

We use your Thematic framework quite a lot, and it will be interesting to do some work with Kirby. What’s great about the strategic philosophy behind these themes is that they can “morph” to deliver any design that meets a clients web mission. That’s what most miss in the rush to deploy a design in a finished theme, I think. Often then, the mission must be adapted to the existing design — not the other way around.

I met Kirby this morning and I’m already a fan… I have a total noob question, though … How, O how, do I get the content under the header to line up with the left edge (and right edge) of the header? … I notice that content is indented on both sides in the wide version of Kirby… but I can’t for the life of me find where that margin/padding/indent-thing is coming from on the left and I’m about to gnaw through a vein trying to figure it out. I’m building a one-column, 600px-wide version and want everything the same width.

Thanks for any light you can shed on this… and apologies in advance for my noob status.

Thanks for releasing this to the community. I think it looks great (also as a default WP theme). This might very well be a theme that everyone could use as a starting point and take it apart. Job well done!

Looking great, Ian. Even if it won’t be the default theme (as Matt’s now doing it), I see no reason why it can’t be included too — it’s a fantastic example of what all blogs should aspire to: good readability and whitespace!

Just installed your Kirby theme. I am a true, honest-to-gosh newbie on blogging. Know absolutely NOTHING about php’s or html’s or anything else in the editor. I LOVE THIS THEME. Finally – somebody put in a theme where you can download pics from your computer for the header! As a newbie, I’ve spent hours upon hours trying to figure out where these files are located so I could change the picture. In fact, we’ve had this website since November but haven’t used it because we weren’t able to put a pic up! Plus, I love the fact that we can use our gravitars for our posts – there are two of us on this blog and it really makes it much easier to identify the blogger.

Only two requests that I can think of. 1. The option to change the color of the type. We’d rather have black than gray. 2. The option to put the blog name in the header instead of over the header.

Other than that, this is absolutely perfect and exactly what we’ve been looking for for months. Ease of use is so important to those of us who are brand-new to blogging! Thanks for a great product.

Nice work, Ian. Matt M. and I are getting together this week to talk about 2010 (the theme, not the dessert topping) and it’ll be really helpful to look to Kirby and this post while we work. Thanks for helping us out. 🙂

I was reading these days about WordPress.com feature “Custom CSS“.
And thought that it could be really nice to add a page template for child theme stylesheet,
where users won’t need going to Theme Editor (maybe the server doesn’t allow files creation/modification, or other issues, plus we get versioning) but edit a simple page with their child theme. Later to theme options you can add feature of including a child theme stylesheet to the end of Kirby style.css.

Well, as it turns out … the 2010 Default Theme will be based on Kirby. So there you go. Super-talented Automattician, Matt Thomas, has made (and is in the process of making) some really great changes to it. It’s turned into something else altogether—and I love it.

I just uploaded your theme, after changing my mind about 3 times on exactly what I wanted mine to look like. This is such a great, clean theme. I changed it around a little (as best I know how). My main question is. I tried to get rid of the name above the header. Is there a way that I can make the header or one of the pages my link back to the home page, or do I have to have that link above? Thanks!

Hello Ian,
I have some questions about changing the Kirby theme, I am new to WordPress and CSS. How do I remove the black line at the top? The header is too big and I feel that it is wasted space. How do I increase the width of the right column so I can fit an advertisement?
Here is the link to my website:http://aimlow.com/
Thank you,
John

I’m having to re-upload my blog … do to corrupt files, is what the domain host told me. I decided to use kirby again cause i really like it, my question is how did you get rid of the title above your header?

New to WordPress – I have been using Blogger for the last 5 years. Working on a new blog with the Kirby WP theme. Love the look but my widgets are disappearing. When I add a new widget in a new spot (e.g. the footer), the previous one (in my sidebar disappears). This was not happening when I started the design. Any suggestions – I’m using Version 2.9.2.

Ian, I’ve tried very hard to come up with some critique on Kirby and there is absolutely none that I can find in regards to the ideal “default” theme. So, thank you very much for your excellent work (again)!