Headless Wordpress for the Learning People
Learning People is a leading online education provider based in the UK.
There currently is a growing worldwide shortage of qualified IT workers which convinces many people to take a leap of faith and pursue a career in tech. Where to start though? It's a complicated world that is hard to navigate for the uninitiated.
Learning People's StudentCare team solves this. They help students truly understand their desired new career and then continue to give them personal support throughout the entire learning process needed to get there.
This personal approach earned Learning People a large group of happy customers as proven by their excellent Trustpilot reputation based on over a thousand reviews. But there was one thing holding back the company's growth: a thoroughly outdated website with page load times upwards of four seconds. And this site was stuck on an old version of ExpressionEngine CMS making it hard to future-proof without a total rewrite.
Learning People identified the situation as an opportunity to go back to the drawing board and come up with a fresh new look that properly reflects their identity as a progressive and creative tech company. So our concept & design partner Keplar Agency was hired and together they created a multi-stage plan for the new website. Once done it was up to us to make these plans a reality.
A couple of weeks ago we successfully launched stage 1, which was all about migrating to a new CMS and implementing the new design while keeping site structure the same. Too much change at once would have made it impossible to pinpoint the cause if somehow search engine traffic or conversion rates had dropped after flipping the switch.
Site metrics are looking great though and despite all pages now being way more visually engaging, they actually load within a fraction of the four seconds it used to take. Google Lighthouse now gives the site an almost perfect score for Performance and SEO.
So how did we get there?
Let's start with the CMS. From a technical point of view we prefer modern headless systems like for example DatoCMS. But we're not the people who have to spend hours actually managing the content. So we like to give marketing teams a major say in choosing the CMS and the Learning People team had a strong preference to go for the industry standard that they are already comfortable with: Wordpress.
That definitely posed a challenge. We can't argue with the fact that Wordpress is a very nice experience for writers. But for developers it leaves much to be desired, especially if you greatly value performance like we do. We needed to find a way to have a modern pre-rendered front end grab its data from Wordpress. Luckily our initial research quickly indicated that we could actually do this without having to reinvent the wheel. We found a workable combination of two existing tools: the Wordpress REST API and GatsbyJS.
Gatsby allows you to throw data at it from a wide number of sources. In our case JSON content generated by the Wordpress REST API. First Gatsby pulls in every piece of data it can find at the provided sources and combines it into a single GraphQL instance. This means that our front-end doesn't have to make any API calls to Wordpress. It can grab everything it needs using simple GraphQL queries, which is a much more clear and consistent experience. Then Gatsby takes care of compiling the whole web application we built into static files that are easy to deploy to a modern host like Netlify.
This approach has a number of clear advantages. We get to use cutting edge website building techniques while avoiding the bloat that a regular Wordpress setup would add. And when a user requests a page, the web server can instantly send the correct files instead of first having to generate them on the fly. The only downside to all this is a 2 minute rebuild time before changes appear on the site, which is totally worth it.
Styled React Components
Thanks to freeing ourselves from Wordpress' shackles in terms of front-end we could once again grab our favourite duo of tools: React and Styled Components. Like most websites, the new learningpeople.com consists of a number of elements that get repeated throughout the site. So unsurprisingly it's a best practice nowadays to build reusable front-end components and then compose pages using these building blocks. This is where both React and Styled Components shine.
We also replicated the above-mentioned pattern of building block composition on the Wordpress side of things using Advanced Custom Fields' flexible content layouts. Once the resulting data model was in place it was time to write a custom, Go powered, migration tool capable of reading data from the ExpressionEngine database and moulding it into the new structure. During the data modelling and migration phase we ran into a large number of Wordpress quirks, but pretty much anything that happens within Wordpress can be hooked into using a filter or hook. So we ended up writing our own Wordpress plugin full of little fixes that eventually made the whole process run smoothly.
Using Wordpress as a headless CMS is a viable approach that works for both new and existing websites. Let us know if you want your own turbo-charged Wordpress.