1stwebdesigner Theme – Neo

The new 1stwebdesigner theme for a sharper web design and freelance training blog.

Developing the new 1stwebdesigner theme did not only challenge me to work on an unusual development process, but also challenged me to work on a backward-compatibility mind set.

1stwebdesigner theme how it started

How it started

Like most design driven sites, site owners wanted to keep their sites’ design up-to-date, not monthly nor yearly, but in times where a design trend is widely used and accepted – nobody wants to be left behind. At the time this article was written, both Flat Design and Minimalism hand-in-hand dominated the design trend, but 1stwebdesigner was still using a theme back in 2012. The design is sleek and simple, but two years after (roughly a year), the design feels outdated. This sparks the decision to redesign the site.

1stwebdesigner Theme Challenges

The Challenge

The problem was to redesign the website. It’s not my job to create the design, but it’s my job to make it happen, and the real challenge is how to create the WordPress theme in a set period of time. This expands to how is it supposed to be developed, what tools to be used, and what are the key aspects to keep in mind while developing the theme.

Although we can redesign the site by modifying the old theme, but it’s not a good idea, because, first, I did not create the old 1stwebdesigner theme, which leaves me wasting a lot of time figuring out all the codes the previous programmer made, and second, there are functionalities that we’re not used anymore, storing a lot of unused codes, and removing these without caution is unsafe. With that, we’ve decided to create a new 1stwebdesigner theme that is only tailored to what we need.

The greatest challenge I faced in the development of the new 1stwebdesigner theme is backward-compatibility, this is because the previous theme has made a lot of back-end features that were widely used by roughly a thousand blog posts internally. And simply ignoring these features in the new theme will break the posts that were using it.

Apart from backward-compatibility, I was also faced to develop with a theme framework I’m not familiar with: Genesis Framework. I find Genesis unusual because of it’s implementation of codes and templates, and modifying it, is a complicated process. The people at Studiopress have their reason why the framework is built that way and advised to do so for any themes built with it don’t get me wrong, it’s not bad, it’s actually a good practice, but I’m just not used to.

Genesis Framework

The Solution

First, we figured out what tools to use for the theme development, and so we have figured to use Genesis Framework. With a short time frame for the development – 2 weeks, including design and development,  we need something that is developer friendly and already packed with features like security, responsive design, customisable, and greatly optimised, to speed up the process.

Having to work with a framework without any experience using it, took me roughly 40% time spent familiarising the framework, and 60% developing. And this 60% is divided in to structuring the site markup based on the design, styling the elements, and working with the site functions.

Making the theme compatible with the old articles, I recreated the old theme’s functions in the new 1stwebdesigner theme. Although, I can recreate it in my own ways, I decided to copy the old theme’s way on implementing the functions, most importantly the variable and function names to keep it in sync with the articles using them.

Besides recreating the old functions, I also created new functions that I think is a better way than the old one, but of course compatible with the old articles, one example is the post thumbnails. The old theme’s thumbnail implementation is very different from the new theme’s method.

1stwebdesigner theme thumbnail difference

Opting from either of the two has it’s own fallback: opting with the old method is inefficient; while opting with the new one leaves the old articles without thumbnails set. What I did is I implemented both methods, one – which is the default – using the new thumbnails, and two, using the old thumbnails IF an article doesn’t have a NEW thumbnail added. This means, old articles that were not using the new thumbnails, will load the old thumbnails instead.

1stwebdesigner theme results

The Result

For a week of development, the outcome is great, and is what we aimed for: redesigning the site. It may sound simple and straightforward, but behind the scenes, days of research and hard work were applied to optimise the site and have a new look, while keeping the old functions for compatibility.

I don’t have the site’s statistics to determine if the redesign made an impact on the general audience, but it really helped 1stwebdesigner by providing a much efficient theme and helped saved a lot of time by implementing back-compatibility features, because without it, editors until now were still editing old articles to add the new thumbnails and remove shortcodes from the old theme.

1stwebdesigner theme reflections

Reflections

Although we’ve successfully made the theme with the set period of time, we could have made it better if we have a longer time frame. The design was the 3rd version from the original, and the two first versions were actually much better than the third one. What happened is, we remade the design to look closer with the original Genesis design so we could speed up the development, and this what degrades the quality of our work, another reason for this is the short time frame.

You can visit 1stwebdesigner here.