Designing and coding the WordPress theme for my blog.

Designing and coding the WordPress theme for my 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.

Screen Shot 2016-02-24 at 9.46.04 PM

 

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.

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:

  • 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.

Cheers!

  • Joe Bauer

    Thumbs up

    • lynda

      Thank you, Joe. 😃

    • Lynda

      Thank you Joe. 😃

  • “Indecision on font choice”

    Open sans/Lato works every time for me 😀

    I am still a learner sha 😛 Never really coded any wp theme from scratch – I just destroy other people’s projects and make the my own. 🙂

    I’m exclusive to the Genesis Framework. You should check it out – makes wp theming child’s play (of course minus UI/UX).

    Kay.

    Techviews NG

  • Sekinah

    Id like to do this too