New Look OIT – Switching To The Genesis WordPress Theme

Share

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.

Genesis ReDesign

Our old design was actually our 3rd version of OIT

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.

Genesis WordPress Theme

Two screens from the P3 (Plugin Performance Profiler) showing you what impact each of your plugins 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.  I would still highly recommend WooThemes to anyone though.

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.

Genesis WordPress Theme

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.
Genesis WordPress Theme

Try the News Theme FREE Demo (Click Image)

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.
Genesis Responsive Design

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!

About Matt Smith

Matt Smith is the founder and editor of OnlineIncomeTeacher. He is a Professional Blogger, SEO Consultant & Web Developer, running a number of sites from the UK. Connect with him on Twitter, Facebook, Google+ and LinkedIn.

  • Loving what you did with Genesis it’s a great framework one of my favorites

    • I have to admit, I wasn’t too keep when I first switched, but I’m loving it now. Just took a bit of getting used to that was all.

  • Alexis Wilke

    Personally, I’m not a big fan of bright green like this… But I can tell that your site is much faster already. That’s a good thing overall. Actually, it is supposed to be one of the points to work on when you create your SEO strategy. Often people put it last and since the last few items are never worked on…

    This being said, I was happy to see that my main company website had no “High Priority” entries listed.

    • Alexis Wilke

      Oh! By the way, thank you for the link to the Google PageSpeed Insight. That will prove useful to me!

    • Hi Alexis,

      Sorry about the green 🙂 That and the logo were the only things that I felt I had to stick with. Changing the site is all well and good, but changing our branding as well could have led to people not recognising us.

      Site speed is SO SO SO important now. It’s a huge SEO factor that people should spend more time on. I’m going to carry on trying to make the site load even faster, as we have a couple of issues with image loading on some pages.

  • Clair Trebes

    Hi Matt,

    Loving the new look, the site looks and loads really well! Impressed with it!

    I see a lot of good sites on the Genesis framework too!

    Clair

    • Hi Clair,

      Glad you like it. Was sad to switch from Woo, as I really liked that, but am really liking Genesis now.

  • Andi Leeman

    This is looking very slick, such a shame that you were forced a change and that it wasn’t by choice however the results are great and speed is very important, something I need to address. You have retained all of the feel and branding which is good and created a faster slicker site that is still good on the eye so it seems fate has dealt you a good hand.

    As for the post, it is great, some brilliant links to tools and ideas on what to do, I intend to come back to this post a few times when I make changes to my site so I can use the tools you recommend. It surprises me to learn that Woo Themes would be written in a way that it slows down your site. With speed being a big issue for websites and them being a big Theme developers you would have thought that would be one of the main things they focus on.I am not a developer so I cannot really comment but from the outside looking in that does surprise me.

    • Hi Andi,

      Glad you like the new look. Spent blumin’ ages working on it 🙂

      Woo did slow our site down, but only by a fraction of a second. Probably not enough for us to notice that much, but search engines on the other hand could. Speed is going to become a big SEO factor in the near future, so it pays to make your site speedy.

  • alexwhalley

    Site looks great matt – new look is much cleaner and easier to navigate (hello increased pageviews and decreased bounce rate)

    I also love the P3 plugin – will definitely be checking that out since my site is constantly loading slow due to crap plugins stealing the limelight.

    • Hi Alex,

      Yeah, definitely give the P3 plugin a try. Helped me out loads when sorting through all my excess plugins. Think you will notice a difference afterwards.

      Glad you like the new look. More pageviews and decreased bounce rate are very much welcomed 🙂

  • alexwhalley

    GoogleAds? unless you are actually making good money from the clicks I would recommend removing it and replacing it with affiliate banners if anything – why lose all the good traffic for a few cents with a click?
    just my 2 cents

    • I’ve actually had some success with AdSense ads on the site. They alone can cover the whole annual site maintenance costs in a month. Will see if the new layout effects their income though.

  • Walter

    Hi Matt,

    Awesome changes you have made here. The site looks awesome and light.

    I would advise you increase your text size to font 16. It will increase your conversions.

    Otherwise, your site looks sleek and classy.

    Cheers 🙂

    • Hi Walter,

      I’m really glad you like the new look. I’m going to ask a few more of my regular readers before I change the font size, as you are the first to mention this. Would be happy to change it though if there is support.

      Anybody else want the font to be made bigger?

      • Alexis Wilke

        Looking back, it looks a bit small indeed. Now you have to be careful as changing the font will change the layout of images and other additions to your pages.

        • I’m going to look at making the text a little bigger. Sure it’s just a case of finding the right part in the .css file.

  • What’s up Matt,

    Just wanted to give you some feedback.

    New theme looks great even though you kept the color scheme, good decision.

    Another one in the Genesis camp I haven’t seen too many thesis converts recently.

    If I had to switch today I would have to go Genesis too.

    • Glad you like the new look. Yes, I am yet another Genesis convert. I did have a look at Thesis, but I felt that Genesis was the best fit for me.

      I’m sure another WordPress theme maker will rise to the top in the next couple of years though. Will be interesting to see who it will be.

  • excess baggage shipping

    Hi mates, how is
    the whole thing, and what you are longing to say about this post, in my view
    it’s very splendid on behalf of me.

  • Victor

    Hi Matt, am Victor from Nigeria, I have been following this site and am trying to start blogging using blogger . I was able to create my blog but I have problems with monetizing my blog and how to add absence to my blog.
    I have registered with chitika, Google Adsense, etc. They have sent me a code have copy the code and paste it on my blog but instead of seeing their advert on my page the code is showing on my page.

    Please, can you guide me on what to do.
    Thanks alot.