Ennismore

Following on from the successful launch of The Hoxton and Gleneagles WordPress websites, we were tasked with designing and rebuilding a template for Ennismore. This project went so smoothly from the initial module builds, straight through QA.

Once again the client was over the moon with the finished product which is always a good feeling.

The Template

As with the team’s previous WordPress themes, we went with a modular approach using ACF (Advanced custom fields), SCSS, Swiper JS and mostly vanilla JavaScript in order to reduce the codebase’s weight as much as possible.

Scroll animations

I suggested we make use of Intersection Observer to handle the on-scroll animations as it would mean we wouldn’t need to include the Waypoints library, saving us weight in the code. This saved us a fair bit of code at no expense of the finished product, in fact, I much prefer using Intersection Observer anyways (a tutorial of which you can find here).

Asynchronous loading

In previous builds, we used Jquery and AJAX to handle the loading of new blog posts to the screen which works well and many tutorials can be found on the web on how to achieve this.
However, for this project, I made a point to the team to try to steer clear of Jquery where they could and aim to mainly just use vanilla JS. This of course meant rewriting code that could have been ported over or creating a lot of code from scratch which was fine by me as the end result was all that mattered.

So I went about creating the code for the asynchronous loading and made it flexible enough to be used and adjusted for the module that requires it. I have a tutorial on the method here if you want to check it out.

Carousels

Similarly to the above, the carousels code was done using Jquery for ease of use in the past when creating our many different Swiper carousels. Well, I wanted it all replaced with modern ES6 JS so I spent time near the start of the project to layout the basic template that could be followed for each carousel by the team.
I was very happy with how this turned out, the code was still very easy to read but also very lightweight.

WordPress admin bar

I also added some code to make the admin bar be less annoying when trying to build the site. This obviously isn’t needed but I find it makes developing the site much easier because you can leave the admin bar turned on while still seeing everything you need to on the webpage. If you’re interested, I have a tutorial going over this technique which can be found here.

All in all, this was a great project to be a part of. Everyone did a smashing job, from the designers creating an absolutely stunning design once again. To QA making sure everything was working as it should be and that we followed the WCAG 2.1 guidelines to ensure the site was very accessible (you don’t even need your mouse to navigate it!).
The account managers who kept everything running smoothly, as well as our awesome team lead who ensured we overcame every obstacle to deliver this amazing website.

Be sure to check it out for yourself – https://ennismore.com/

JS

SCSS

ACF