Last year, I gave a presentation called “Introduction to Web Standards“. This time, I went a bit more hands-on workshoppy. The presentation was called Turning Your Design into a WordPress Theme. I started with a few slides (embedded below) and then spent the rest of the time (which only ended up being about 15 minutes!) live-building a WordPress theme from an XHTML/CSS one-pager and a Save As from my Tabigail theme.

That was kind of fun. Basically, I duplicated the theme, activated it, and started migrating the markup and combining it with the theme code. I explained what I was doing it all along and fielded a variety of questions about WordPress, design, and CMSs in general. Due to time constraints, I was only able to build the main blog page—header, footer, sidebar, and index.php. The single post, page, archives, search results, and 404 will have to wait a little bit, but it was nice to get the front page working in that short amount of time.

I’m looking forward finishing up the theme—because it’s a brand new design for Darowski.com. I’ve been chipping away at it for a little over a month… just little bits here and there. It’s at a good place now and I look forward to pushing it live soon.

But in the meantime, here are the slides from today…

Like most beginners, when I first started using WordPress (in May of 2006) I used a downloadable theme. I eventually outgrew it and in March 2007 I stripped down the blog’s design to just raw HTML. Little by little, I started styling—purposely NOT working from an established design… I wanted to see where playing with the CSS took me. I captured how it looked less than 24 hours into the design.

Since then, I’ve tweaked and refined endlessly, but still kept the basic feel of that design I did in a day over twenty months ago. While I really like the design, it’s time for a change. So, what better way to archive the design than releasing it as a WordPress theme?

I’m calling it Tabigail.

Why Tabigail? One of the features of the design was a rotating Polaroid-style photo in the header. I’d change it every so often. However, the last time I changed it was December 15, 2007—one year ago today. That was the day we had to put our beloved kitty, Abby (or Abigail the Tabigail), to sleep. I never could make myself swap out the image of Abby.

I’ve built a new page specifically for the Tabigail theme. You download the theme there and I’ve also posted setup and customization tips that allow you to make the theme more “you”. On that page, I briefly wrote about what makes Tabigail a compelling WordPress theme:

1. So super simple. A quick peek at the CSS will show you that there’s really not a ton here beyond plain HTML.
2. No sidebar. You know those annoying over-crowded sidebars so many blogs have? This theme has NO sidebar.
3. Socially savvy. The footer features a list of links to your social networking profiles. Because, really… it’s not all about your blog anymore. Plus, these links are marked up in an hCard with rel=me (just planning for the future!).

Just a note on that last one… what’s cool about that hCard with all those rel=me links? Well, as far as I know, nothing yet. But as the need to consolidate web identities becomes more mainstream, Tabigail will be ready to tell any service provider where all your social media identities are located.

Dude, you’re future-proof!

So, please… take a look, download the theme, and leave a comment letting me know what you think. This is my very first WordPress theme (well, publicly available one anyway… I’ve done a ton)… I’m hoping somebody finds value in it!

First of all, so you can get an idea of what I’m talking about, here’s how comments I leave on this blog look:

And on the BatchBlue Blog, here’s how a comment I leave looks:

First thing I did was find this great blog post by Matt Cutts (now with Google). His solution involved taking this:

<li class="<?php echo $oddcomment; ?>"

from the comments.php page and replacing it with:

<li class="<?php
/* Only use the authcomment class from style.css if the user_id is 1 (admin) */
if (1 == $comment->user_id)
$oddcomment = "authcomment";
echo $oddcomment;
?>

Basically, what that is doing is taking any comments left by a logged in user with the user_id of 1 and applying the class “authcomment” to it. That works great if you have only one author. But the BatchBlue Blog has eight authors, with user_id from 1 to 8. Because I wanted to show a photo of the author next to his/her comment, I needed to give each author their own class name.

So, instead I used:

<li class=" if (1 == $comment->user_id)
$oddcomment = "comment-ransom";
if (2 == $comment->user_id)
$oddcomment = "comment-riggen";
if (3 == $comment->user_id)
$oddcomment = "comment-lynch";
if (4 == $comment->user_id)
$oddcomment = "comment-ohara";
if (5 == $comment->user_id)
$oddcomment = "comment-darowski";
if (6 == $comment->user_id)
$oddcomment = "comment-calhoun";
if (7 == $comment->user_id)
$oddcomment = "comment-sweeney";
if (8 == $comment->user_id)
$oddcomment = "comment-larson";
echo $oddcomment;
?>"

This way, comments I left would get the class “comment-darowski”, comments Michelle left would get “comment-riggen”, etc.

And the CSS to make it look like the image above…

li.comment-darowski {
  background: transparent url(../images/5-thumb.jpg) no-repeat left top;
  padding-left: 100px;
}


And repeat that for each author, swapping out a different photo file name.

For this blog, I used a mild variation on the original code by Matt, just naming the style “comment-darowski”. The CSS:

li.comment-darowski {
  background: #FFC url(images/adam.png) no-repeat 14px 14px;
  border: 1px dotted #999999;
  padding: 10px 10px 10px 50px;
}

So, there you are. Have fun!