Wordpress Vs. Headless Wordpress For Your Next Project

First off, if you already know a front end framework like angular or react, you don't need to read this post. I wrote this post for Wordpress users (even power users), those in hybrid dev roles, and those who have customized some Wordpress themes, or built a plugin or two, and are looking for resources on how to level up their game a little bit. It's also written for DIY-er's who aren't afraid to tinker a bit until they get something working.

The point of this post is to take someone with intermediate understanding of Wordpress (you should know what "the loop" is) and introduce some additional options for your next venture or project that go beyond simply "theming."

As you think about or begin a new venture, you likely already have some notion of the popularity of Wordpress.

Wordpress powers 30% of the top million sites online. It's a content management system (CMS) that is enabled by a huge community of developers and users, is open source, and is updated regularly.

In short, Wordpress lets you post -- at the very least -- an old-school blog and house your posts somewhere. And at most, Wordpress can be a highly customized (visually and functionality-wise) solution.

Beyonce's website, Vogue's website, and Mercedes-Benz International's website all use Wordpress. The proof is in the pudding as far as what you can achieve with the framework. But there are some caveats.

If you've used Wordpress in the past, or haven't been involved with creating a web presence for an organization in a while, there are likely a few things you don't know about Wordpress.

• Speed in websites is more important than ever (for both user experience and SEO).
• Wordpress comes with more features than ever (and more plugins and theme options than you could imagine), but Wordpress can easily become bloated slowing performance and increasing security vulnerabilities.
• In December, 2015, Wordpress integrated the Wordpress REST API into the Wordpress core.

For now, this may not mean much to you.

But put succinctly, the Wordpress Rest API enables:

• A host of new routes to customize Wordpress.
• A number of potential ways to sidestep speed and security issues that may occur with a bloated Wordpress site.

One way in which this works is called headless Wordpress.

What is Headless Wordpress?

In broad strokes, headless Wordpress involves using Wordpress for the "backend" of your web presence, and using another technology for the "front end."

This involves using Wordpress' built in categories to store posts, media, and other items on your database. Wordpress is FAST when it comes to knowing what posts to serve up for users. Many developers know how to work with and expand Wordpress' built in functionality. And the structure of Wordpress just makes sense for many, many types of media stored online.

Once this information is queried from your Wordpress backend, it comes to the front-end, or the visual "presentation layer" of your web presence. Now, front end technologies have come a long way since Wordpress was created. And while you can do a great deal with a Wordpress front-end, this is where many themes get bogged down with unnecessary code and bloat from plugins.

So how does this work?

Well, we mentioned that the December 15 update of the Wordpress core included access to a Wordpress Rest API. What exactly is this?

API stands for application programming interface.

In short, APIs allow a program to query certain URLs to receive information. Once they obtain the information, the portion of the site in charge of displaying the content decides what to do with the return message.

As we mentioned, Wordpress is really fast when it comes to storing and managing your posts, your data, and your media. It's also really fast at responding to queries. In a human readable format, a query may say something like "return to me every post from the author John Clark from June through October of 2017," or "return all of the most recently uploaded photos in ascending order by date."

The Wordpress Rest API let's the Wordpress backend do all of the storing, management, and query response. In short, the things Wordpress is really good at.

So what does this mean for site owners and visitors?

A highly-tuned Wordpress backend may be great for performance. But in-and-of-itself a headless CMS doesn't do much for site owners and visitors. In fact, there's essentially zero visual output from a standalone WP backend.

So what gives?

As the modern web has gotten more and more complex, bloated javascript (and botched PHP) files have slowed down a large minority of sites on the web. Even though many of these "upgrades" are meant to bring sites up to the demanding user experience standards of 2019, they often backfire.

The moral here is that the web has changed so much since many Wordpress sites were originally built. While you can progressively "update" your site by building off of your old site. There comes a point at which you may want to make a clean break.

The last few years have seen the emergence of a a number of top-notch front end technologies. All of which can be connected to a Wordpress backend.

Front end frameworks like Angular, React, and Vue.js have revolutionized the ways in which we write front end code. These frameworks are more organized, faster, and provide user experiences similar to in progressive web apps on many of the sites they're employed on.

With Wordpress handling the back end, and a modern framework on the front end, sites are faster, more secure, easier to maintain, and otherwise likelier to meet UX standards demanded by today's denizens of the web.

Do I Need Headless Wordpress?

Despite all the "rah rah" above, i'm by no means saying that every site should employ a headless WP set up. There are many, many viable instances in which a headless WP is needlessly reinventing the wheel, may be more expensive to create and maintain, and won't provide noticeable benefits.

So let's jump into some of the pros and cons of a headless wordpress set up so that you can potentially determine which set up may work best for you.

Pros of Headless Wordpress With a Modern Front End Framework

• Mix what's good about Wordpress and what's good about other frameworks
• Potentially enhances speed and security
• Start your site much closer to a progressive web app than a Wordpress site
• Greater range of customization options
• Future proofed for some time

Cons of Headless Wordpress With a Modern Front End Framework

• Modern front-end frameworks have steeper learning curves than Wordpress
• Less developers know modern front end frameworks than Wordpress
• More expensive or time consuming to develop than simple Wordpress theme
• Needlessly complicated for many sites

Ultimately, only a portion of new websites even need to consider headless Wordpress. If you think your site may evolve to be much more than a blog, however, you will likely find yourself considering building something off of the back of Wordpress in the future.

How Do I Set Up Headless Wordpress?

There are tons of guides out there to customizing a Wordpress theme for relative beginners. This applies to cosmetic changes within the admin menu or drag and drop editors, as well as guides on building your own themes. With a basic knowledge of HTML, CSS, and the ability to troubleshoot through PHP, you can build a Wordpress theme from scratch as a beginner.

While the same may be true for headless Wordpress, most modern front end frameworks have a much steeper learning curve than minimally modifying Wordpress. With that said, it's totally possible to teach yourself all of the necessary tools.

Below we'll outline the simplest of set-ups. If you're able to work through the following steps and find yourself stuck on more involved changes, you can hire out and will have saved yourself some money taking care of the initial set up at the very least.

First things first, hosting.

You can build the most cutting edge headless wordpress app in the world, and without quality hosting, it won't be great. In order to truly gain many of the advantages of headless Wordpress (of which one is speed) you'll need a quality hosting service.

While there are many ways to get blazing fast hosting, for DIYers and beginners, I would suggest finding a top-notch managed Wordpress host. A great resource on managed Wordpress hosting may be found here. And the reason I recommend managed Wordpress hosting is that you'll still be relying on Wordpress for the back end of your application. For Wordpress to truly shine in ways that it's built to, you need your hosting to be fully optimized, up-to-date, and tailored to Wordpress.

Next, set up Wordpress.

You'll need a fresh install. Seeing as there are manytutorialsoutthere on how to set up Wordpress using the famous "one-click install," you shouldn't have much trouble with this step.

Presumable, if you're working through this tutorial you have spent some time even at a basic level editing or building Wordpress themes. While you will want to install Wordpress on your new managed hosting, just note that you'll likely want to install it locally for the trial and error of building our your new headless Wordpress site. One of the best guides i've seen on this topic may be found here.

Then, you blank the theme.

Wordpress has tons of amazing themes. But that's not the point here, as we're going to be using another custom front end.

With that said, a Wordpress backend still needs a Wordpress theme. So let's create a new theme and ensure that nothing is loaded (via Wordpress) for the front end.

At the most basic level, all you need to do to create a new theme is to create index.php and style.css files.

Within your style.css files, simply include some basic information. To officially "make" a new theme you just need to include the following:

• theme name
• author
• description
• theme URI
• version
• license
• And other details

These are commented out at the top of the style.css file like so.

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/
 Description:  Twenty Seventeen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyseventeen-child
*/

`

Then, within your index.php file, you'll want to stop Wordpress from loading a front end by redirecting to your homepage. Insert a redirect similar to the following into your index.php file:

`

<script type=”text/javascript”>
    Const pContain = document.getElementById(‘posts-list’)
    fetch(‘http://YourSite.com/wp/wp-json/wp-v2/posts’)
  // Response to request
    .then(r => r.json))
    .then(posts => {
      posts.map(post => {
        pDiv.innerHTML = post.title.rendered
        pContain.appendChild(pDiv)
    })
    })
  </script>
  </body>
</html>

`

Then, explore the structure of the Wordpress API.

Now that we've established our Wordpress backend and blanked out the front end, we're ready to start querying the Wordpress API. Without Wordpress' built-in front end hierarchy of pages and functions, the data that is returned from the API will be yours to do with as you please.

For the following steps to work you'll need some data in your Wordpress database. There are a number of locations you can find sample content to fill your site with. Or you can proceed with a filler post or two (or the default "Hello World" post).

There are many ways to query RESTful APIs like Wordpress' but one of the most simple is to use the Fetch API.

You'll want to include the Fetch script in the header of your index.php file like so:
`

<script src=’https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js’ charset=’utf-8’></script>

`

Or via a packet manager like NPM.

Then you can start to query your Wordpress backend using some relatively basic Javascript.

A simple get request can be seen below:
`

//url (required), and options (optional)
fetch(‘https://YourWebsite.com/wordpress/wp-json/wp/v2/posts’,{
    Method: ‘get’
}).then(function(response){

}).catch(function(err){

    //error handling

});

`

While there are a number of more prominent request libraries for Node and React (that you will likely want to employ as you build your site), Fetch serves our purposes well by clearly showing what occurs during a fetch request in a way that those new to the subject matter should be able to follow.

Note that by default the path to your Wordpress API posts will be set to /wp-json/wp-v2/posts. And remember that posts in Wordpress actually encompass a range of data types including media, pages, attachments, custom css files, and so forth.

While the above should return a list of your posts that you can view in your inspector, it's not very finished on the front end.

A basic version of what you could do can be seen below with the following Javascript pasted into the body of your index.php:

`

<script type='text/javascript'>
     Window.location ='http://www.YourPage.com';
</script>

`

While basic, this shows the power of the Wordpress API. When our JSON posts or related data are returned, we can manipulate our objects as we see fit. The above example just places one

Post as well as the post title inside of div's on your homepage. Simple as that.

Choose a front end framework.

The above example of querying the Wordpress database is obviously simplified for the sake of showing you how "easy" it can be to get started with headless Wordpress. In the case of the above with no changes, you would be vastly better off to run with the typical front end functionality of Wordpress.

The real power found in decoupling the front and back end of Wordpress comes when you can employ a totally custom solution of a more modern front end framework.

If you've made it this far in the tutorial and managed to follow along, you're likely at least comfortable reading HTML, CSS, and JS. While the learning curve can be steep, plenty of people in this position have taught themselves React or Node. Take a short introductory course, or work through a tutorial to see if either one of these frameworks resonates with you.

One of my favorite picks for learning react includes this FreeCodeCamp post on Medium.com.

For Node, check out NodeSchool.io, it's a really cool tutorial that lives in your Node-enabled command line.

Finally, customize to your heart's content.

To fully utilize the power of a headless Wordpress set up, you'll likely want to create custom endpoints for your Wordpress API. Much as you can create custom post types in a traditional Wordpress set up, you can use the Advanced Custom Fields plugin to create custom post types. As well as the ACF to REST API plugin to enable the serving up of custom post types within your API.

Note that your Wordpress backend will be enabled throughout the entire process of building out a headless Wordpress set up. You can utilize all sorts of plugins or functionality built into functions.php within your theme, there just won't be much visual output yet.

Comments

[Piotr Dziubecki]

Hi Jay, great post, I am a bit late to the party, but can you tell me if I can mix old with the new - for instance use WP admin ui and have headless fronted ? Or have custom landing page and rest handled by WP theme?

[Nanoshi Nanomoto ⋰·⋰]

Good thing now we have Frontity. And ready made headless WordPress themes. 😁👍

[joko warsito]

Hi @jay_dennis_0

Based on your experince, is it possible to fetch any SEO metadata (canonical, open graph, etc) from headless wordpress (content.example.com) to main website (example.com)?