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
- 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.
When I say front end devs are the real MVPs, I mean it.
— Lynda (@lyndachiwetelu) February 20, 2016
Next came the conversion to wordpress.
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:
- 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.