2015 Website Reboot

Posted on Sunday, June 7, 2015 by TheBlackzone

After almost seven years on duty, I decided to give TheBlackzone.net a fresh start. So I took the latest version of Habari, built a new theme for it, threw out old content and updated a bunch of pages. Mostly a routine piece of work, but it was the first time I've written a Habari theme from scratch. Here’s how it went…

Since I switched to Habari a few years ago, I have created four major themes for my website. The first one was derivated from an existing stock theme and just slightly changed to look the way I wanted. Since I was new to the platform, this was the best way to get into it. At that time, of course, I was far from making changes to the code, such as in the theme.php file, which holds theme specific methods and functions.

In the following version I had rewritten large parts of the theme files and also made my first additions to the code, for example to create a menu from the main pages. The third version followed, but was basically just an optically updated version of the previous one.

Then, recently, I was thinking about a new theme and I had already pinned down what I wanted:

• compared to the last version, make it "lighter"
• keep typical elements like the logo and the rainbow line
• scrap the two column layout and stick to a single column without sidebar
• reduce colors in text elements and make it overall more "minimalistic"
• increase the font size (well, uhm, my eyes aren't that great anymore)
• make a move to HTML5/CSS3 and responsive web design
• clean up the theme files

It’s basically the final point that made me start the theme from an empty directory. And of course there was some curiosity how it all works. So I gave it a shot…

Now, before starting on the Habari theme itself, I needed the usual prototype of the design. When it comes to creating or changing my web designs, my workflow usually consists of these three steps:

1. Get a basic idea what to achieve and what it should look like. Usually this is mostly brain work and bit of paper-and-pencil scribbling. And sometimes it is also the hardest part of the whole process, especially when not in a creative mood.
2. Make a sketch of the design, where I take a vector graphics program and create a polished "picture" of the design, with all major elements, graphics and the colors to be used.
3. Create a static HTML prototype, where I create the HTML/CSS code, using the sketch as reference. This is the most important step as the outcome resembles the final design.

This was no different this time. And after step 3, all that was left, is to dissect the HTML prototype into the theme template files and add PHP code for the Habari functionality. For example:

• The header part goes into header.php
• The footer part goes into footer.php
• The main part goes into home.php and entry.multiple.php where code is added to loop through Habari's posts and display its content and additional informations

The Habari documentation explains the functionality as well as the page names that are involved. However, I couldn't find all the information I was looking for in the documentation, so I additionally had a look at the code of the stock themes that come with Habari.

It took me quite some time for reading the documentation and studying the stock theme files to get a grip on the theme creation process. Surely it would have been nice to have a start-to-finish example of the whole process in the official Habari documentation that also explains the most important theme function and classes along the process.

So, with some effort, I ended up having all the theme files and a theme.php with a bunch of functions, e.g. for displaying a list of monthly archives or a tag list that refers only to active posts (well, I know there might be plugins for that, but I wanted to do it on my own).

So, to sum it up, it wasn't simple but also not overly hard and I'm pretty happy with the outcome and what I have learned.

Tags: website