When I have to prepare a new WordPress blog I’m often in the situation of balancing out the time required to put the website online with the final design and branding effectiveness. The choice for me is usually between taking time to browse the web to find a good theme able to fit the brand requirements (and with the right license),  and taking the time to build it myself. Looking for a theme online is often frustrating for me due to the lack of quality overall, and between the good ones I still have to find one that fits well the message of the to-be blog. It’s even worse when WordPress is going to be used for a website that isn’t a blog.

So I’ve built a minimalist theme with a few objectives in my mind:

1. Minimalist: because a minimalist theme conveys the content better instead of imposing itself upon it.
2. Customisable: because on a minimalist base tiny details are able to give a lot of depth.
3. Easily customisable: the theme must have an easily editable CSS file to change its core elements
4. HTML5: because I find it cleaner and better handled by the browsers.

Welcome Blinkslate

The theme is called Blinkslate (‘blink’: fast, ‘slate’: the writing tablet) and has a two-column layout optimised for readability, with the first column containing the blog tagline and the first-level pages. This structure allows a clear navigational choice for the user, at the same time the blog owner can tidily organize his content inside the menu, making it at the same time quite visible.

Apart from using HTML5 and a well structured document, I’ve also tested it with VoiceOver on Mac to be sure that it’s usable by screen readers, with two hidden links that you can see if you click on an empty area on the theme and press tab (exactly like this blog).

About the content organisation, the right column is completely customisable using WordPress widgets (the tagline is editable within the General Settings page), so you can add any kind of content there if you don’t like the minimalist pages-only approach.

It also support the excerpt: if it exists, it’s displayed in the index page instead of the full post, and at the same time on the post page it will appear as the top gray paragraph.

In the post page, between the article and the comments exists the related posts space. It appears when at least one tag matches between two articles.

Blinkslate has also a print CSS, optimised for readability and content, stripping out any blog feature.

I’ve tested it working on:

• Firefox 2, 3, 3.5, 3.6, 4
• Chrome 6
• Safari 5
• Internet Explorer 6, 7, 8
• Opera 8, 9, 10

Configuration

The theme is designed to be customisable with “just one image”, the background. This means that you can put there the logo, the weblog title, a photo, a fake two-columns layout, anything. This is the simplest and at the same time the most powerful way to create a custom theme in minutes.

The configuration of the theme is all inside the cfg/ subfolder. The most interesting file here is surely “style.config.css” containing a few commented-out lines to easily configure:

• Background image and color
• Header title (you can hide it if the logo is inside the image you’re using)
• Base <a> link color
• Highlight <a> link color
• Font: base
• Font: titles
• Post: you can disable the “comments” link on the blog listing page.
• Sidebar: you can move the sidebar on the right

Of course, you can change much more than this – the layout is quite stable – but that’s what I’ve tested and works out of the box. Consider that with “just” a different background and colours the theme could get a completely different look.

Consider also that you can use the free Google Fonts, with a single line at the top of you custom CSS you can completely change the look of the blog.

In the cfg/ folder you can find also two files: “meta-header.php” and “meta-footer.php”. These files are designed to be used if you want to add your own web analytics code, OpenID delegates, scripts, validation codes or anything else.

Download

• The theme is downloadable as a zip file from here (released under BSD License).
• The code is released on Github, feel free to patch, fork and get in touch with me. ;)