Headless WordPress (A Primer)

Posted by John Arroyo on 2/25/2016

What is headless

There are many great open source software packages out there.  Some of the most popular are WordPress, Drupal and Magento.  It has been gaining popularity in recent years to run these apps as headless.  But what does that mean?

Running headless means to use the admin and data collected in an app but use something else to render the front-end.  For instance you could manage all of your content in the wordpress admin but site that the end user sees is rendered in some other technology all together.

At the end of the day the websites that we visit are all HTML, CSS and JavaScript.  Behind the scenes the story get more complex.  Since all your data has been crafted in wordpress you can pull this content out and render it in your favorite

Who is it for?

So why would I decapitate my WordPress site?

Let me start by who it is not for.  If you are using wordPress and have no problems with how your site currently acts or functions than headless is not for you.

If you run a WordPress site but are having issues with scaling, security, and customizations than it is definitely something you should take a look at.  Keep reading 🙂

 

Why headless WordPress

Advantages
There are many advantages to using an app (CMS) like WordPress headless.  To start it allows you take full control of your front-end.   More importantly it allows you to compose your site using the latest front-end technologies of your choosing.  Love Angular, React or some old Famous animation; then use it in a clean way and don’t be stuck trying to use it in a way that only some random module says it can be used.

Use can use pure bootstrap (or Foundation) [add links]
Easily integrate JavaScript
If you hate PHP you are not stuck with it, you can use Node.js, RoR, Python or any other language and framework you choose.
Improved security (if you use a more secure front-end)
Improved
It is much easier than it sounds
You can more easily mix wordpress content with non-wordpress content
I’ve done demos using both
Potential for a richer UI/UX and faster browsing
SPA, turn your blog into a single page app and impress your friends

[links to other posts]

Disadvantages
Out of the box WordPress has an easy to use user front-end and numerous themes available for free or cheap on the web.  This

You can no longer use all those free wordpress themes
it does take more than casual programming
For a large site that has lots of content and numerous plugins, going headless could be a little time consuming
If are trying to use both wordpress and Drupal 7 (or lower) you have to use one via an API
I did some experiments in 2014 bootstraping both together and there are just too many conflicts.  Things may be different with Drupal 8

Basic headless

How to get headless working

In order to go headless you need to include wp-load.php, which is in the root of your wordpress code.  In my case I have wordpress in a folder wordpress/ which is inside lib/

define(‘WORDPRESS_ROOT’, ROOT.’/lib/wordpress’);

if ( !isset($wp_did_header) ) {

$wp_did_header = true;

require_once( WORDPRESS_ROOT . ’/wp-load.php’ );

}

after that you have WordPress running headless.

now try to pull some data.  For instance try,

$post = get_post(1); // get post is a WP function to pull a single blog post by post id

var_dump($post);

How-to with Erdiko-WordPress

going headless with Erdiko is very simple if you have composer.  In your favorite composer based framework or micro framework (Laravel, Symfony, Erdiko, Slim, etc) simply run

composer require erdiko/wordpress

you’re done.

To test it out create a route in your app and simply instantiate this model.

$wpModel = new /erdiko/wordpress/Model;

// you can call any wordpress api function for instance get_post()
$post = $wpModel->get_post(1);

var_dump($post);

https://github.com/ArroyoLabs/erdiko-wordpress

Multi-site

Multi-site works in a similar fashion, however some additional steps are needed to let WordPress know which site you are on.  Also depending on the use case there is some auto-routing you can do to make things easier.

This will be part of a future post.  It’s not as clean as the going headless on a single site.  If your multi-site is very complex you may struggle a bit running it headless.

Conclusions

Headless is great, but its not for everybody.  Keep in mind, in an enterprise scenario you either need to go headless or harden your out of the box WordPress app.

Next steps
We will post more examples and advanced use case throughout the year.  Please comment and share your thoughts if you would like to see a specific headless example.  Stay tuned!