What is the future of WordPress?

With one of our first Gutenberg builds on the way, and a full headless WordPress build under our belt, I’d like to take the time to discuss where I think the future of WordPress is.

For those that don’t know, WordPress has been around since May 2003, which was a good few years before I started using it. I used to exclusively build sites in Flash (yeah, I know!) until RWD took off, and Flash simply didn’t cut the mustard any more. I believe my first interaction with WordPress was in 2008, so I can comfortably say I’ve been using WordPress for over 10 years now!

With over 30% of the web powered by WordPress, and with no signs of slowing down, I think it’s a very exciting time for the future of WordPress and the way we’re currently using it showcases this.

I’ve talked about Gutenberg in the past, so let’s kick off with this.

We’re avid adopters of React at Creator, and although we don’t prescribe to always wanting to try out the latest and greatest JS frameworks on production builds, we do spend a lot of time internally investigating and testing new platforms, seeing where they can fit into our workflow where required. I recently went to a talk at Refresh Teeside where Sarah Louise Taylor from Visualsoft discussed the 7 deadly sins of projects – one of which was using a technology just because you want to. We don’t do this. We work with the best fit for the site and client, which, more often than not, is budget-driven. Sometimes this allows us to stretch our legs a little, and deliver something that’s a little more special than a vanilla WordPress build.

So let’s talk about React in WordPress. The new Gutenberg ‘block based builder’ uses React components to display blocks for page content generation. We won’t do a deep-dive on how to build blocks, as our friends at BigBite have already done that. But this new approach has some amazing benefits, one of which is speed!

These blocks don’t use PHP to render content, so rather than being compiled and rendered at request time, they’re server side rendered and saved as HTML in the database. Which makes the code overhead lower and load times dramatically faster, as you’re only loading the server side rendered HTML, and CSS – which is super light, compared to all of the processing of a standard PHP WordPress template.

Another interesting thing is that Gutenberg doesn’t actually need WordPress to run! If you want to integrate into another platform as a standalone application, you can do that – here’s a demo site which shows Gutenberg running as a standalone micro service.

So the TLDR: If you want to start using React with WordPress, start with creating some custom Gutenberg blocks. It’s a great way to dip your toe and test the water.

Headless WordPress

Headless WordPress expands on a rapidly growing concept in web development: ‘detaching’ your content from your build. (This is often called using a ‘headless CMS’.) In a practical sense, this means separating the code that handles displaying your content from the code that handles creating, editing, and saving your content. This allows WordPress to do what it does best–managing content–and allows you to programmatically integrate other services into a fast, lightweight application that takes advantage of the best that the modern web has to offer. No more struggling to ‘get it working with WordPress.’

There are lots of headless CMSes out there, and lots of them come with a premium price tag. Take a look at Contentful or Dato: you could be paying as much as $900 a month for a simple endpoint that serves data to parse into your site. Headless WordPress is FREE. And with extensions like Advanced Custom Fields, it’s not difficult to develop an ultra powerful API to serve just about as much content as you’ll ever need to parse into your site.

Historically, WordPress has directly powered both front and back end experiences; this is a paradigm that a headless installation steps away from. Building a luxury e-commerce site in Vue or React but your client is only familiar with WordPress?

Easy. You can use WooCommerce to handle all of the backend data (happy client), and parse it in the front-end, which you can write in whatever you want. I’ve seen an amazing implementation of a detached CMS in e-commerce on the Flamingo site. – Believe it or not, but this site is a static HTML site (say whaaaat?) that’s served with GatsbyJS and has some clever things happening in the background to ensure that stock is maintained, and e-commerce is functional. You can read more about that here. The end result is a blistering site, which is the envy of all web developers.

Another term you might hear when discussing headless CMSes is the JAMstack–a modern web development stack that takes advantage of three decoupled components: a Javascript-based frontend, a single or multiple APIs for accessing content, and markup, which is a dolled-up development term for templates that are prerendered and filled with data from your APIs.

The Flamingo example above is built with the JAMstack, as is a recent site we built which is just about to launch. We’re using NextJS to handle the request-response cycle, headless WordPress as an API, and serverside React to generate our markup. The result is a site that loads blazing fast, prefetches linked pages in the background, and loads progressively to make sure everyone gets the best experience across platforms.

For those and other reasons, we’re seeing the JAMstack become more and more prevalent within our industry, where WordPress is often snubbed due to it being so widely used (they’re fickle types, these developers).

AMP

AMP (Accelerated Mobile Pages) is a Google-backed open source project that does exactly what it says on the tin. AMP can deliver content down to users significantly faster than using responsive mobile pages (as it strips out a lot of formatting) which should result in an uptick in views and engagement. Google are pushing AMP articles and as a result, we’d expect to see AMP formatted articles making their way up the search rankings pretty soon.

AMP also allows for storage of data offline, so that content such as charts, maps, graphs and whatever else is available offline, an extremely useful way to view content without worrying about losing signal on the tube during your commute.

If you’re looking to use AMP on WordPress, I’ve got good news for you! Like just about everything you want to do in WordPress, there’s a plugin for it that’ll handle just about all you need to make your site serve AMP articles.

Try AMP today, your customers will receive mobile content much much faster and you may see a ranking boost as part of the implementation.

What does this all boil down to?

It makes WordPress a very strong contender in the DXP (Digital Experience Platform) space. A lot of folks still think of WordPress as a blogging platform (see, I told you, snobs!), but the truth is that it’s not even really a website platform any more so much as a world-class web application platform.

Take a look at this progressive web app. This concept uses everything we’ve discussed above to utilise WordPress as a platform, alongside AMP and React (or React Native if you want to be technically correct)

With the multitude of access management, marketing automation and personalisation services that are pre-integrated through both open-source and premium plugins, WordPress is positioned as a key player in creating a modern enterprise digital experience stack – but only if you work with a team who can use it in this way (cough cough). Of course, there’s still going to be a heap of WordPress developers who make a healthy living from it, and never write a line of React in their life, but for those of us who want to push WordPress into the next generation of web development, it’s already possible.

Often the challenge for a lot of large enterprises if that they wind up paying huge licence fees for platforms, which takes away from the project budget. Using WordPress gives them this for free, meaning that more budget can be allocated into investing into the front-end of their site, or app, which will ensure that it better fits their business requirements.

Using WordPress as we are now brings it in line with cutting edge web application development trends and practices, giving assurance that companies who build with WordPress and invest into it as a DXP rather than just a CMS will to be able to leverage that investment well into the future.

Did I mention it’s open-source too?