iface – My First Wordpress Theme

I had been working on releasing the design of this blog as a Wordpress theme for quite some time. It is almost there, version 0.9, but I do not see myself being able to give enough time to push it to 1.0. So, I am releasing iface – my first ever Wordpress theme that this blog has sported for quite some time.

Download and Install

The version is now 0.91, fixed a couple of bugs in the search results page.

Download the zip file.

Just unzip this file the [wordpress root directory]/wp-content/themes directory and activate it through Presentation menu in the administration to use it.

I have captured screenshots as I have developed this theme which you can see in the slideshow. You will also see that I have experimented with some colors.

Why 0.9?

It is 0.9 because it does not have any options page, so you will have to edit some source files to make changes. Also, it is a completely bare theme – there are no plugins or functionality packaged with it. I have not got around to testing it as extensively as I would have liked. I hope to cover all these aspects before taking to the 1.0 landmark.

I will really appreciate if you can suggest modifications in the theme, whether it is about packaging plugins or more style elements in the CSS.

What works

Otherwise the theme is completely functional and widget-ready theme. It is a liquid theme, that is, it does not have a fixed width and it will adjust to your browser size. And it sports a mullet style design – only the most recent post in displayed in full on the homepage, the others are shown with excerpts. When I designed this, I wanted to use lot of space for content, so there are two other areas other than that for blog posts – the sidebar (one column) and the bottombar (three columns). You can drop widgets into all four columns. It uses minimal number of images, only some icons from the excellent FamFamFam Silk icons set.

Things You might want to Change

As I said earlier, currently there is no options page. There are two things, that I think, you might want to change. One is the about text that appears in the header on the right. By default it has a message for subscription. But you change that text by

1. Make a backup copy of header.php
2. Open header.php
3. Search for text ### About ### Start editing ###. It is a HTML comment.
4. You can start editing the text below it. Use at least one HTML paragram, that is <p> element in the text here. If you want to retain the links for feed, just change the text within the paragraph.
5. Make sure your editing ends before the ### About ### End editing ### text.

The other thing that you might want to change is the variable color. This color is used as background color of the menu, the footer, the forms and as the color of a visited link. For changing this you will have to

1. Make a backup copy of style.css
2. Open style.css
3. Go to end of the file, you will find a CSS comment saying Variable colors. It also has a list of color codes that I have tried. You can choose any of them of use your own.
4. Replace the color code below this comment to the one that you want.
5. Make sure your editing does not go beyond the text End of Variable colors.

License

Well, I thought for some time, but could not decide, so there is no license to it. You can use it anyway you want, though I will really appreciate if you keep the link in the footer.

Some more tidbits

The template code follows a mullet style design. On the homepage, only the first post is displayed in full, the rest are shown as excerpts. I believe that this provides the best balance. This is true only for the homepage, everywhere else excerpts are used. The blog title is displayed as an h1, the post and page titles as h2. That is why if you want to use headings within your post start with a h3.

Every post is associated with a CSS classes which correspond to the categories to which the post belongs. You can use it for selective formatting if you want.

Last but not the least, the theme generates valid XHTML 1.0 Strict and CSS 2.1 code. However, it cannot account for invalid markup in the post body or widgets.

It is worth mentioning that I did not start with a blank CSS, but started modifying the one provided by Kubrick – the default Wordpress theme. It is needless to say that the theme has been inspired by so many others out there. I am a software engineer and I am comfortable with designing the layouts and probably even selecting colors. But I cannot claim to be a graphics designer, which probably shows in the theme. However, I have used the theme to the fullest, and maybe you can find it useful too.