Welcome to my personal blog.

So I recently designed and coded a theme for my blog, (which uses WordPress CMS) in about 12 days. Here’s the full juicy story.

One day, I got bored with the look of my blog. I usually have the overwhelming urge to change my blog’s theme but this is no news. What is news is that I decided to code it myself. The things I needed to do sounded pretty simple

Design.

Code the Front End – HTML/CSS

Convert to WordPress theme

For perspective, I am a backend developer which literally means my stack is more NodeJS & PHP than it is HTML/CSS. I mean, I work with front-endish tools like AngularJS too but if you know Angular, you’ll agree that knowing it doesn’t remotely count as being a ninja in the HTMLization of designs and the CSSifying of said HTML. If you know what I mean. I was determined anyways.

First I got Sketch App. One of our in-house designers at work had been enthusing over how wonderful it was for design, so I thought: Why not? Next, I started designing. For inspiration, I tried to look at blogs with sleek UIs but that ended up leaving me too much information to process so I just went ahead with my gut. After two days of after-work stunts, I had the first mockup ready.

It was easy enough. Then came the next step: converting to HTML/CSS. I opted for Bootstrap, naturally.In two days, I was done with desktop view for the designs I had.

Making it responsive was not child’s play though as every change I made kept affecting others and I kept having to modify all the media query blocks and boy, was that tedious!

After a lot of hassle, I got most of the HTML and CSS out of the way. Here is a sample of my mind’s state when I did.

This in itself wasn’t a smooth process because I had to call wordpress’ PHP functions inside my HTML a lot of the times (Got me thinking for a bit about how to improve WP coding) and it reminded of spaghetti code days a lot. But, in about a week of another round of before-and-after-work coding stunts, I finally got a minimum viable product out. That’s what you’re currently viewing.

It might be ridden with a few bugs here and there and some alignment Issues but I’ll fix those.

Some of the main difficulties I encountered were as follows:

Indecision as to what font to use – HTML/CSS

lack of documentation on wordpress’ less common functionality – WordPress

Having to modify all media query code blocks with every tweak – HTML/CSS

Aligning Stuff perfectly (This is less a technical problem and more because I lack core design skills)

The more important thing is that I fought a battle with front-end development and it is looking like I will win that battle shortly. 🙂

If you like this theme, there’s even better news. Because it is my first attempt at WordPress/Design/Front-end , I am making it open source. You can grab it on github.

Some of the cool features of this theme are:

Pagination.

Featured Images for Posts

Image for Category/Tag

Featured Image for Pages.

All without the need for plugins. Heh.

In the next version, I am going to be adding a settings page to this theme. Yes, I fully intend that it is quite customizable.