Intro

Christmas is always fun; the excitement, the shopping, seeing loved ones, and what not.

So, to "get into the holiday spirits" I was tasked to create a series of digital advent calendars to be integrated into WordPress sites.

Luckily I had done something like this before, using purely jQuery (as it was a custom CMS that site was using), so I had the concept already laid out.  What I needed to do is integrate this idea into a UI-friendly feature, and installing it as a plugin.

The concept was that someone would visit the page and click on a door, which would open up to reveal a prize.  Only the current and past days could be opened, with a nice little message for any future days.

Template

To begin with, I created a sub-domain with WordPress installed as a "fresh" site.  From there, I created a parent theme to act as the baseline for the advent calendar.  This was aimed to be very basic; to load in the "doors" and display the content, with some basic interaction.  Originally, the advent calendars were going to be used as a subdomain on each of the sites, as to not interfere with the current site, hence this approach.

Once the base calendar was settled, pulling in the correct data and behaving in the way the specifications outlined, I began work on creating the child themes for the custom designs for each calendar.

Customisation

In this stage, all that was required was to create a child theme for each of the designs the client required; it used the base structure of the parent theme and applied the CSS; simple enough, until the designs became more and more complex.

I recommended to the client that these designs be simplified, as it would increase the load time for the calendar (as there were HTML games, vouchers, articles, playlists, videos as "prizes") and to load those in as well as multiple high-res, full-sized images would make the site load slowly, and very noticeable on mobile.

Creating the plugin

The process of turning a "whole" WordPress site into a single plugin was an interesting task.  I had to rework a few of the files, as to pull in the correct files and resources, but it was relatively straight forward once I knew exactly how things were to change.  This change happened relatively late into development, as the client decided they didn't want to log into a different site to change things.

But everything worked out well; the concept was essentially the same. Upload the plugin and activate, and you had the Custom Post Type for the "Days", where you added the images, content, and prizes, and when you created a page and assigned the template (we decided this would be the best approach for SEO purposes), the days would be loaded in, be open or closed, with the custom theme for that site.

It did require having multiple versions of the plugin, as we didn't have each design available for every calendar (each had a different selection of prizes), but that was a small change to make when uploading the plugin.

Classic Niall | A web design and development company, now offering web hosting!
Classic Niall Limited © 2022

Contact Us

Classic Niall Limited
The Wesley Centre, Blyth Road
Maltby, Rotherham
S66 8JD
hello@classicniall.co.uk
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram