New Look OIT – Switching To The Genesis WordPress Theme

Welcome to the new look OnlineIncomeTeacher! (Fanfare)  I hope you like it as I have spent quite a bit of time getting it ready over the last couple of weeks.  For this post, I thought I’d go over the changes that I’ve made to the site, why I decided to switch to a Genesis WordPress theme and more importantly WHY we decided to change the site at all.  Hopefully it may help you with your own website redesign.

Why The Change?

I had quite a few people ask me why I was planning to change the website when I first revealed my plans.  One reason was that I simply just fancied a change.  I love playing around with my website, changing things, making design improvements and just trying to make it look and feel better.  Admittedly, I don’t always get it right (quite often I don’t), but it helps me learn more about web design and keeps me on my toes.

The added benefit to revamping a website every now and then is that it keeps your readers interested.  Websites can start to look a bit tired if they look the same year in, year out.  We all like to redecorate our homes every so often otherwise it can get a bit boring.  Well the same can be said about websites.  Be it aesthetic or structurally, all sites can do with a bit of a change now and then.

It’s also important to keep up to date with important web design trends.  Failure to do so can result in your site being left behind by the competition, so it’s always good to stay current.  We have talked a lot here on OnlineIncomeTeacher about mobile friendly web design, so I won’t go into it too much again here, but that is arguably THE most important design requirement at the moment.  Our previous website was mobile responsive (visible across multiple devices) so that wasn’t a factor when deciding to make the change, but I thought I should mention it here for you.

The primary reason for the new change however was due to some technical difficulties we had been having a few weeks ago.  Our site kept crashing over a period of about a week, which left me wanting to tear out my hair.  As it turned out, it was probably a blessing in disguise.

Why The Site Going Down Was The Best Thing That Ever Happened!

As it turns out, it was our server that kept crashing which led to the site going offline repeatedly.  After quite a bit of time waiting in customer service chatrooms, I got to speak to a really helpful guy called Dave who explained exactly what was causing our problems (thanks Dave!!!).

Now, to cut a long story short, the problem that we were having was that our site was causing ‘High Loading Issues’ on the server, which resulted in our hosting provider temporarily disabling our site until we sorted out the issues.  This can be caused in a number of different ways, but in our case it was simply a case of us having too much stuff on our site.

Every bit of a website (images, videos, social media buttons, plugins, subscription boxes, etc.) has to be loaded in order for your site to appear for one of your visitors.  The longer that whole process takes and the more website visitors you have, the more strain is put on your server. We had simply reached our limit, which was causing all the problems.  I have to laugh writing this, as this whole process that I’ve just fitted in a single paragraph took me ages to get my head around.  I was (and still am to a point) a complete novice to this side of website management.

Whilst incredibly frustrating that the site kept going down for this reason, it forced me to look at my site in a totally different way.  I began to look at all the plugins that I was using, the design elements that we used, the amount of links, thumbnails, css coding, etc. and started to prune a lot of excess baggage.   This was the point that I decided that the site needed a complete overhaul.

Plugin Pruning

I was recommended to install a plugin (ironic I know) called ‘P3 (Plugin Performance Profiler)’, that would show me exactly how long each individual WordPress plugin, that we had installed, was taking to load.  This scans your site and gives you a report on the impact each plugin is having on your site.

I ended up removing 19 plugins from my site (20 if you include the ‘P3 Plugin’ after I had finished with it), leaving me with only 9 necessary plugins remaining.  No wonder really that we were having issues with loading time.  Simply by doing this and getting rid of a lot of plugins, it had a HUGE impact in server loading time and the site was noticeably faster afterwards.

Once you realize that everything you have on your site has an impact on loading time, you look at things totally differently.  For instance, I always presumed that if you deactivated a plugin that you weren’t using, it wouldn’t affect your site. Wrong!!!  Even deactivated plugins have an impact, so it pays to completely remove any plugins that you aren’t using.

Even some plugins that I thought would have minimal impact were leaving a much bigger footprint than I’d imagined.  A good example of this would be ‘Tweet Old Post’ that I had been using.  After installing it, I didn’t pay it much thought, but on seeing my P3 Plugin report, I was shocked to see that it was one of the biggest contributors.

I’d definitely recommend checking out ‘P3 (Plugin Performance Profiler)’ as it helped me hugely.  Just remember to remove it when you have finished with it!  You don’t have to get rid of all your plugins, of course not, but try to remove the ones that are causing the highest load times.  I think you may be surprised.

Switching From WooThemes To Genesis WordPress Theme

So, despite the fact that removing all these excess WordPress plugins improved my site greatly (and more importantly resulted in me getting my site back online), I wanted to go further and trim the fat off my site.

Having looked at some website speed tools, such as ‘Google PageSpeed Insights’, I could still see room for improvement.  Whilst my site was loading much faster than it was, my current theme (WooThemes – Canvas) was taking a good portion (44%) of the loading time.  It appeared that it was taking so long because of the way it is written.  WooThemes (at least mine anyway) uses lots of different style sheets, which results in it taking longer to load, as it has to fetch each file every time a page is loaded.

Now, I love WooThemes and have been a big supporter of them over the last few years, using them for all my sites.  I did however feel that it was time for a change, so very reluctantly I started to look for alternatives.  WooThemes is still a framework that I would recommend, I just fancied a change.

I decided to go for the Genesis WordPress theme framework by StudioPress, as it has had lots of great reviews from other high profile bloggers and website owners, and is particularly well known for the way it is coded.  This is a platform that WordPress themes can be built upon and is included with every StudioPress theme that you buy.  There is a handy Genesis Guide for Absolute Beginners (PDF) that you can download to help you out.

I was pretty impressed with the choice of themes that StudioPress has to offer.  They have tons of different types of themes that could suit a whole variety of different sites.  Despite feeling like a kid in a sweet shop, I had a few particular requirements for the theme that I was looking for.

1. It had to be a responsive design and work across multiple devices. Mobile is the future!!!
2. It needed to have more customizability on the homepage, as I felt that was an area we were lacking with our previous design.
3. It needed to have a modern and clean structure to it.

I wasn’t too bothered about the default aesthetics of the demo theme, as ultimately I was going to spend time customizing it to make it look unique.  I’d always recommend that you look for functionality in a theme first and foremost, as you can make it appear anyway you want really.  It’s the functionality that you are paying for, so make sure you get that right!

Another good tip would be to always test out a theme demo on all types of devices (desktop, tablet, mobile) before you buy.  Certain themes can look totally different on the small screen.

I ended up choosing the ‘News Theme‘ (of which you can try the free demo by clicking on the picture), as I liked the more modern look of the homepage layout.  It turns out that the vast majority (not all) of the StudioPress themes are responsive, so that wasn’t too much of an issue, though I did make sure to check on both my tablet and mobile beforehand.

It’s Customize Time

I have to admit, coming from WooThemes, Genesis took a LOT of getting used too at first.  I’d been so used to my old setup and way of working, that it took a while to feel comfortable with the Genesis WordPress theme.  Whilst I am still learning, I have to admit that I am really liking Genesis.

I found that I spent a lot of time on the StudioPress website reading up on their tutorials and asking for help in the Forums.  On a couple of occasions where I just couldn’t figure out how to do something, the ‘Copyblogger Media Support’ team (they own StudioPress) emailed me with the help that I needed.

Most of the changes are purely aesthetic and have been done by me messing about in the style.css file.  A couple of handy tools that I used were ‘Firebug Lite for Chrome’ and ‘Chrome Developer Tools’ that help you to make edits on your theme, without the risk of messing everything up.  If you are looking to edit your theme, whatever theme you are using, definitely have a look at these.

Never Finished

I’m pretty happy with the new look to the site.  It’s not perfect and I’m sure that I will be making plenty more tweaks and changes in the coming weeks, but I quite like it.

I tried to put more emphasis on the mobile design when working on it, rather than working on the desktop site and hoping that it looked OK on the small screen.  I’d not done this before, but hopefully it paid off.  More and more people are surfing the web on their smart phones and tablets, so it’s vitally important that your site works (and at the very least is visible) and is mobile friendly.

I’d love to hear your thoughts on the new design and get some feedback.  What do you like about the new design?  More importantly, what don’t you like?  Have you noticed something that doesn’t work that I have missed?  Are you looking to redesign your own site?  Let me know by leaving a comment below!