Headless WordPress is a hot topic lately in the WordPress community. As a CMS, WordPress has long provided an all-in-one solution for managing content and displaying it through themes on the front-end.
But what if you want to decouple the front and back end? This is where headless WordPress comes in.
In this comprehensive guide, we‘ll explain everything you need to know about headless WordPress, including:
- What is headless WordPress?
- How does headless WordPress work?
- Pros and cons of using headless WordPress
- Should you use headless WordPress?
- Step-by-step guide to making a headless WordPress site
Let‘s get started!
Contents
What is Headless WordPress?
Headless WordPress separates the WordPress backend from the frontend display. It uses the WordPress admin area and database to manage all the content, while the frontend is handled completely separately using other technologies.
With traditional WordPress, everything is bundled together – you manage content through the WP admin, and themes handle how it‘s displayed on the frontend.
But with headless WordPress, the frontend display layer is decoupled from WordPress core. This allows developers to build the frontend display layer using any technology they want, like React, Vue, Angular, etc.
The headless architecture provides more flexibility for developers. They aren‘t limited by what they can do with WordPress themes.
How Does Headless WordPress Work?
To understand headless WordPress, it helps to first review how traditional WordPress works:
- The WordPress admin area allows you to manage all your site content – posts, pages, media, etc. Everything is stored in the MySQL database.
- WordPress themes control how the content is displayed on the frontend. Themes use PHP templates along with WordPress template tags to output the content.
- Together, everything is bundled in one package – you get content management through WordPress and frontend display handling via themes.
With headless WordPress, the backend WordPress part remains the same. You still get the full content management experience through the WordPress admin and database.
But instead of themes, the frontend uses something different like React, Vue, Angular, etc.
This is made possible through the WordPress REST API. The REST API exposes all the WordPress data in easy to consume JSON. The frontend JavaScript app can then use the REST API to get the data and display it however you want.
So in summary, here is how it works:
- You continue to manage all content through the WordPress admin area and database.
- The WordPress REST API makes the data available in JSON format.
- Your frontend app (React, Vue, etc) uses the REST API to get the content.
- You build custom displays for the frontend app, with much more flexibility than themes.
Together, this makes headless WordPress. The backend management is still handled by WordPress, while the frontend display layer is completely separate.
Pros of Using Headless WordPress
Why would you want to use headless WordPress in the first place? Here are some of the main advantages:
1. More Flexible Frontend Possibilities
The biggest benefit of headless WordPress is the flexibility you get for the frontend display layer.
With traditional WordPress, you can only modify the frontend design and functionality as much as themes allow.
But by going headless, you can use any frontend technology you want. This opens up many more possibilities for custom designs, interactivity, animations, dynamic routing, and more.
You can use React and build a super fast frontend app that consumes the WordPress data. Or use Vue for quick prototyping and simpler apps.
2. Keep WordPress Backend Advantages
As a CMS, WordPress offers many advantages like:
- Intuitive admin interface
- Flexible content types
- SEO features
- Third party integrations
- Community support
With headless WordPress, you keep all of these WP benefits while only changing the frontend.
This allows you to have the best of both worlds – WordPress CMS combined with a JavaScript app frontend.
3. Improved Performance
Since the frontend of a headless WordPress site does not rely on PHP and themes, it can be highly optimized for performance.
JavaScript frameworks like React are designed to load pages faster with techniques like static site generation.
This can lead to much better site speed and performance vs traditional WordPress site architectures.
4. Omnichannel Content Delivery
Headless WordPress makes your content easily portable and consumable anywhere.
The REST API allows the WordPress data to be accessed from any device, platform, or channel.
This omnichannel delivery model allows your content to be used across many different experiences, from web to mobile to IoT devices and more.
5. Lower Development Costs
Believe it or not, headless WordPress can actually lower development costs in some cases.
If your end goal is a complex web app with dynamic functionality, doing this all custom from scratch would be very expensive.
But by using WordPress for the backend CMS piece, you can save a lot of time and money in development. The core content infrastructure is handled by WordPress out of the box.
Cons of Using Headless WordPress
Headless WordPress offers many advantages, but there are downsides to consider as well:
1. Added Complexity
The headless architecture inherently adds complexity to your website codebase.
Now you need to manage both a WordPress backend server and a separate frontend server/application. Keeping everything in sync requires extra work.
Traditional WordPress is simpler – just one unified codebase.
2. Learning Curve
There is a steeper learning curve with headless WordPress. It requires knowledge of WordPress plus a frontend JavaScript framework.
Developers need experience with WordPress REST API, React, Vue, etc. Most traditional WP developers may not have these frontend JavaScript skills.
3. Potential Loss of WP Plugin Functionality
Many WordPress plugins are designed to integrate deeply with themes for frontend display functionality.
Since headless WordPress no longer relies on themes for the frontend, some plugins may not work as expected anymore.
This can limit the plugin functionality and integrations available for your headless WordPress site.
4. Higher Hosting Costs
With headless WordPress, you need separate hosting for the WordPress backend server and the frontend server/app.
This doubles the hosting requirements, compared to traditional WordPress where everything runs off one unified server.
The added hosting requirements increase the monthly costs for running a headless WordPress site.
5. Ongoing Maintenance
Like any decoupled system, headless WordPress requires ongoing maintenance and integration work.
The WordPress backend and frontend app need to communicate properly together. As they are updated separately over time, this sync needs to be maintained.
Traditional WordPress avoids this maintenance burden by bundling everything together in one unified system.
Should You Use Headless WordPress?
So should you use headless WordPress for your next project? Here are a few key considerations:
Need for Custom Frontend App
The #1 reason to go headless is if you need a highly customized frontend app with dynamic functionality, animations, interactive elements, etc. That is difficult to achieve with traditional WordPress theming.
In-House JavaScript Development Skills
Your team needs strong JavaScript skills and experience with frameworks like React. If you only have PHP/WordPress developers, headless will be difficult.
Budget for Ongoing Maintenance
Plan for ongoing maintenance to keep the frontend and backend in sync. The two separate systems will require integration work over time.
Accept Added Complexity
Decoupled systems add complexity. Make sure you have the resources to handle the learning curve and manage multiple platforms.
Assess Plugin Compatibility
Audit the WordPress plugins you need – will they work properly in a headless architecture? Some may have issues without themes.
In summary, headless WordPress makes the most sense when you need a highly custom JavaScript-driven frontend, and you have the skills and resources to handle the added complexity.
It‘s less beneficial when you just need a traditional webpage display that themes can handle.
Step-by-Step Guide to Making a Headless WordPress Site
If after weighing the pros and cons you decide headless WordPress is the right choice, here is how to get a basic site up and running:
1. Set up a WordPress Backend
First, you need a WordPress site to manage all your content. You‘ll continue to use this WordPress admin area even after going headless.
It can be hosted anywhere – we recommend SiteGround or WP Engine.
Install WordPress as you normally would. Add a theme like Twenty Twenty for the setup stages. We‘ll remove the theme later.
2. Install WPGraphQL Plugin
The open source WPGraphQL plugin creates a GraphQL schema for your WordPress site. This provides an alternative to the WordPress REST API if you prefer GraphQL.
You can also skip this step if you want to only use the default WP REST API.
3. Remove Theme Files
Since our frontend will no longer use WordPress theme files, we can remove them:
- Switch to the default Twenty Twenty-Two theme
- Delete the theme folder
/wp-content/themes/twentytwenty
This will prevent any conflicts between the frontend and unused theme code.
4. Build Your Frontend Application
Now you can use React, Vue, Angular, or any other framework to build your headless WordPress frontend app.
The app should use the WordPress REST API or GraphQL to get all data from WordPress. Display the content however you like in the frontend app.
You‘ll need to run this frontend app on a separate server or hosting like Vercel, Netlify, or AWS.
5. Connect the Front + Backend
With both the WordPress backend API and frontend app ready, connect the two:
- Frontend makes API requests to get WordPress data
- WordPress returns JSON data
- Frontend displays the content
And that‘s a basic headless WordPress architecture ready to go!
Now you can develop the frontend display layer however you like, while retaining all the backend advantages of WordPress.
Conclusion
Headless WordPress provides an alternative way to build WordPress-powered sites.
It‘s best suited when you need a highly custom JavaScript-based frontend app that provides functionality beyond what WordPress themes can offer out of the box.
However, headless WordPress introduces added complexity. Make sure your team is ready to handle multiple platforms and ongoing integration needs.
For many sites, sticking with traditional WordPress may be the simpler approach. But if you need maximum frontend flexibility, headless WordPress is a great option – just be ready for the extra work involved.
