Preparing for the Future with Headless WordPress ( )

Preparing for the Future with Headless WordPress

by | Jan 13, 2022 | Articles, WordPress

Tl;dr The internet is rapidly moving towards a world of fast, responsive applications that are consistent across devices and platforms. If you are on WordPress, here is what you need to do to stay ahead.

This article is for people who are using WordPress to run a website. If that isn’t you, you might want to jump ship now. Considering that 37% of all sites online use WordPress when I write this, we have a pretty good chance you will use WordPress.

Even if you have never considered going headless, especially if you don’t know what ‘headless’ even means in the web context, if you run WordPress, it is essential to read and understand this material.

What is Headless WordPress?

Maybe the more appropriate question is, what is. Headless CMS? Headless is the trendy term for a Content Management System (CMS) that doesn’t run the front end of your website. WordPress is a CMS, but it is what you would call ‘tightly coupled’ where the back end (i.e., the admin panel that you log into to edit pages) is all wrapped up in the same software and set up as the front end (the pages your visitors see). If you think of the pieces of your website that are visible to the public as the ‘head,’ you’ll understand what headless means.

Headless WordPress, also known as decoupled WordPress, is when you use the content management system provided by WordPress (the back end editing experience) but build the front end website on a different tech stack and get the content and data you need from WordPress using the REST API (or a Graphql API plugin).

For example, if you click on this link:

That loads a JSON list of all posts on this website. You could pull that into any piece of software and format it, and build a different-looking version of this website.

Why would you use Headless WordPress?

The idea behind headless WordPress is to let you use the powerful WordPress content editor but reap the benefits of using a more modern front-end framework. It also means you don’t need to worry about security issues like cross-site scripting (XSS) attacks.

These days, the javascript development world has made astounding leaps. React (Facebook’s front-end javascript framework) is hugely popular and powers all sorts of frameworks that can be used to build sites that are fast, interactive, and feel like native web apps more than traditional websites.

PHP rendering of WordPress pages is notoriously slow (although, with work, you can get good load times out of WordPress). But, you’ll never achieve the blazing experience provided by a well-written react application. So, one of the main reasons people look to headless is because they have staff comfortable with editing in WordPress, but they want a faster and more elegant user experience than they can get out of WordPress as a front end.

What Can You Do With a Headless CMS?

A headless CMS allows you to build websites without worrying about the technical details of WordPress. It makes it easy to add new content, manage users, and publish posts. Beyond that, anything is possible.

Pros and Cons of Headless WordPress

The main advantage of using a headless CMS like WordPress is that it allows you to build websites without knowing anything about programming. You don’t have to worry about installing plugins, updating themes, or managing databases. It’s also easy to set up and deploy new sites because the platform does all the heavy lifting. On the flip side, if you want to customize your site beyond what the default theme provides, you’ll need to learn some coding skills.

Anything on your site that is currently powered by a plugin – sliders, animations, contact forms, etc. all have to be coded into the front-end platform. So, you lose the ability to simply add a plugin and get new features on your site. This fact alone is probably the most significant thing preventing small businesses from adopting headless architecture.

Setting up a WordPress Site to be ‘Headless Ready’

You’ve gotten this far. Congratulations. If you are ready to go headless, feel free to contact our team to discuss this in more depth. However, let’s assume you aren’t prepared at this moment. The reality is, there are steps you should be taking today to ensure that you are ready for the future.

If there is one thing I’ve learned in over 20 years of web development, platforms come and go. As the react ecosystem gets more substantial (even WordPress is now migrating large pieces onto React), it is only a matter of time before someone can make the better CMS.

The reality is, because of the way WordPress works and the fact that no one is teaching good data organization, were WordPress to go away, your site would probably not be ready to move to another platform quickly. This is the same thing with theme upgrades – if you’ve ever wanted to switch themes, and the project has been a total nightmare, it is because you aren’t thinking correctly about what a Content Management System should do. You are abusing WordPress’s infinite flexibility.

To quickly move your data between platforms, or even just into a new theme, it is essential that it is all well organized, reusable, and exportable.

With the rise of fancy visual editors like Divi, Elementor, Beaver Builder, Thrive – I could go on and on – the issue is that when you don’t set up your data correctly and simply build everything in the visual builder, your content is no longer portable. When you lose content portability, you make your life miserable when you finally decide to make a significant design change or go headless.

Let’s make sure that doesn’t happen to you.

Implementing Content Best Practices Today to Prepare for the Future

Categorize Your Content

On your website, any content that can be categorized as a ‘type’ with the same fields as other pieces of content in that type should have a custom data type. Events, testimonials, staff, products, etc., should all run as unique data types. The first step is to recognize what ‘types’ of content you have on your site.

Organize Content Not Currently in a custom data type

If you have things spread around your site in the visual editor, the first task will be to collect the content. You can do this in a simple spreadsheet. Let’s say you have testimonials all over your site on different pages, but they aren’t a data type. The first thing you need to do is scrape them all. Create a spreadsheet with the correct columns (testimonial, author, business, link, star rating, etc), and then add all of your testimonials to that spreadsheet.

Create Custom Data Types and import your content

Once you have the data collected, you want to get it into a custom data type in WordPress. You can do this by installing a plugin. To continue with our example, you could find an excellent testimonials plugin and install it, and then import your spreadsheet. Or, you can use plugins like Custom Post Type UI and Advanced Custom Fields to create your post type (testimonials) and the fields that go in it (same as your spreadsheet).

Replace the content across your site

Once you have the data cleanly separated into a custom type, you can now take the time to go back and embed the right kind of content into your site. Depending on your theme, you might use a shortcode from a plugin or an embeddable widget.

Pat yourself on the back

If you get this far, you have just taken a significant step to future-proofing your website. If you have trouble, feel free to reach out, and my team can help you handle this. Now, if one of your plugins fails, you can replace it with another or a custom post type with minimal downtime. Most of your content will port over to the new theme if you want to change themes. And if you decide to go headless using the WordPress REST API or even want to build a mobile app, all of your data is ready to port right over with minimal headache.

Is Headless WordPress the Future of Web Development?

The future of web development is not just one thing. It’s many things. But the headless content management system is here to stay, and having your data be ready for any future redesign and technology change is a straightforward best practice.  If you aren’t there yet, fall in line.  You won’t regret it.


Submit a Comment

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

Inspiration, Analysis, and Insight.

Get the latest from Pirate & Fox sent straight to your inbox.

Sign up to receive selected communications from Pirate & Fox LLC. Your information will be used in accordance with our privacy policy. You may opt out at any time.