Case Study: Migrating a Website into WordPress with Minn

In recent years, as web designers and developers we have been moving steadily towards WordPress as the core for most of our web design projects. I would estimate that we are now at around the 90% mark, with the remainder being very niche hand coded sites.

There was a time in the early days of WordPress when it was easy to identify a website that used it. Most were just simple blogs and those that dared to use it for a full website, were restricted with layouts and options. Fortunately, those times are well and truly behind us and with amazing framework themes like Minn, the world is our oyster, limited only by our imagination.

We were recently tasked by one of our clients – Hens For Hire – to add some new functionality to their existing website. They wanted to offer more online services like a Shop, Course Booking and a Members Area. All these things are fairly easy to achieve with WordPress, the trouble was, their website was not a WordPress site. We had developed it for them a few years ago when responsive design was making headway. Writing custom responsive CSS for static HTML pages was how we did things back then, so our first challenge was to migrate the site into WordPress.

This is when you really appreciate the fundamentals of a well designed theme framework. For instance, on the original website we had designed a ‘Wild West’ looking signboard for one of the navigation menus.

Screenshot of Original Website Header

This was all in keeping with the style guidelines and blended well with the illustrated hens that appeared around the site. Visually, it was a key component of the website header and so needed to be reproduced in the WordPress redesign. We also needed all menu items from both the main navigation bar and the signpost menu, to be combined into a single dropdown menu on smaller screens. This could potentially have been quite a challenge.

Using Minn made this process very easy for us. With multiple menu locations available and most importantly, with built in responsive menu item combining, the bulk of the work was done for us. All we had to do was apply a little bit of CSS love for styling and animation to complete the task.

Screenshot of Redesigned Website Header

Recreating the rest of the look and feel for the website was fairly straightforward and a great opportunity to bring some layouts and designs up to date. Being able to define individual sections as halves, thirds, quarters (or any combination to equal one whole like onethird + twothirds) makes creating a responsive design layout very easy.

Column Width Options With The Minn Theme

Now we had migrated the website to WordPress, we just needed to add the new functionality. Personally, I love WooCommerce for online shops. It’s our goto plugin for eCommerce and crucial that any theme framework we work with supports it. So it should be no surprise to learn that Minn works perfectly with it. Just install the plugin, configure your settings, setup your products and you’re good to go.

With some custom CSS added via the Minn Child Theme (available for free to all Minn users) the shop pages and cart can easily be styled to look like the rest of your site. Fortunately, WooCommerce lets you change some of the colours from within its settings and others via a free plugin which adds a new section to the customiser, so you only need to do the extra CSS work if you want even more control.

Woocommerce Customiser

After installing the WooCommerce Bookings plugin, the site now offers courses on Hen Keeping and Incubation, which can be purchased through the regular shop experience. We have customised the plugin somewhat to allow for course date selection via a dropdown select style menu. In its current format, the Bookings plugin isn’t intended to be used like this, but there’s no reason why it can’t with a little coaxing.

The last step was to add a Members Area. Our client wanted to be able to charge for annual memberships and also to be able to add members manually. These manual additions would be for their customers who were paying for a complete package that included membership. We opted for the Simple Membership Plugin, which offered everything they needed.

  • Promotion of the benefits of membership
  • Easy to create subscription or one off payment buttons
  • Allow members with expired memberships to login and renew
  • Front end login forms
  • Front end profile edit form (no sign of the WordPress dashboard)

Creating the different pages / sections of the Members area is easy enough and of course using Minn means you can lay these out however you like.

Screenshot of WordPress Members Area Page Setup

Currently the Members area is providing lots of educational resources for schools such as learning activities, health and safety guidelines, product information, term based educational materials and a host of other detailed information. They’ll soon be adding Videos and Interactive presentations, which of course WordPress and Minn can handle easily.

The new site was launched just in time for the start of the new 2015 / 2016 school year, so no doubt it will start seeing a fair bit of activity over the coming months. When developing websites that will be seeing a lot of traffic, speed and refinement of code are crucial. Using a theme that is server resource hungry or peppered with flaws will leave you struggling to improve page load times. No amount of cache or fast CDN’s will compensate for a theme that is dragging its feet.

Minn is fast, lightweight and super efficient. That’s why we use it on all our projects now. Combine this with an SSD Hosting setup that incorporates Varnish Cache and a sprinkling of CloudFlare CDN and you won’t be sorry.

About Alan Herbert

Alan is a Web Designer, Developer, CSS and SCSS addict, WordPress Enthusiast and passionate about helping people develop their businesses with effective strategies. Find him over at nialtoservices.co.uk and @aceherbert on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *