WordPress is an extensive, amazingly complex platform, but it does have its limitations. While it’s a fully-featured tool for bloggers and web developers that offers many possibilities, it doesn’t let you do everything. For example:

• Publishing content across multiple platforms
• Coding your website in languages other than PHP and Javascript
• Using WordPress as an editorial tool without the website attached

Yet, all of that is possible with headless WordPress. It takes a little technical expertise, but by decoupling WordPress from its front end, you can use the back end content management tools for nearly anything you can think of.

Ready to take a deep dive on this topic and see what headless WordPress can do for you? Then let’s get going.

What on Earth is Headless WordPress?

A content management system (CMS) usually comes with two parts: the front end, and the back end.

The back end is where the “management” part comes in. In WordPress, this is where you create and publish blog posts and pages, along with managing various aspects of your website such as settings, appearance, and other users.

The front end is what people see when they visit your website. In WordPress, it changes its appearance and updates pages as you work behind the scenes. To do so, among other things, it uses the REST API to request data from the hidden back end and ports it to the public-facing website.

For most users, this “coupled” CMS solution works well, providing both a way to easily build a website and manage written content. The downside is, the front end and back end of this type of application are often inseparable since they rely so heavily on each other.

A headless CMS decouples these two parts, leaving only the back end intact. You have your database, your admin panel, and your content management tools – but no theme or website. However, using the REST API, you can hook anything to it – an app, a custom-built website, the list goes on. The implications of this are enormous for developers.

Why Would You Want to Use a Headless CMS?

Making WordPress headless disconnects the front end, leaving you free to use the back end for any purpose. Make your own website, app, or content management tool out of it; the possibilities are endless.

(In fact, Tom Ewer has written a six-part guide on how to create a REST API app with WordPress here on Torque.)

WordPress is primarily coded in PHP, with a little Javascript thrown in. Yet, as a headless CMS it’s possible to connect your website to third-party applications made in Ruby, Python, or other languages using the API. If you want to, you can code your entire website in a different language.

And that’s exactly the point: you get the fully-featured WordPress installation with nearly all its features intact, and the ability to experiment with web frameworks that were previously incompatible.

All you have to do is use the built-in REST API to connect your custom-made website and WordPress, and everything will fit together perfectly. This is how WordPress works already, but with a little code, you can sever the default connections and replace the front end with your own work. If it can connect to an API, you can use it with WordPress.

The decoupling of WordPress can also improve security, especially if you have your website and WordPress admin on different servers and domains. Hacks and DDoS attacks will only be able to target one of these endpoints. So if security is a big deal to you, a headless CMS on a hidden server might be the solution.

In short: If you want to use the WordPress interface to connect to a custom website or application, you would use a headless CMS.

What Can Headless WordPress Do?

Decoupling your CMS frees up developers to try new things and work with languages that, before, couldn’t be paired with WordPress. You probably have a few ideas brewing for what you can use a headless CMS for, but here are some more specific use cases:

• Use WordPress’s robust management tools to create and keep track of content. In headless WordPress, if configured properly, permalinks go right to the editing page. Add other authors and editors, make use of the user role system, and work together on projects. You could even use it as a standalone editorial tool.
• Code your public-facing website in a language you feel more familiar with – anything other than HTML/CSS, PHP, and Javascript – but still take advantage of WordPress’s well-made blogging framework.
• Even if you do know all these languages, WordPress does use its own optimized version of each. Don’t want to deal with learning WordPress PHP? Decouple it and use your own code.
• Change frameworks at any time — but keep your content safe. If in the future you decide to redo everything from scratch in a more relevant framework, since you’re using an API and not a hard-coded traditional CMS, switching everything over is super easy.
• Create an application that calls from WordPress to load content. Headless isn’t limited to just websites! You could use WordPress with all sorts of software.
• Use frameworks and libraries that normally can’t work in WordPress like Ruby on Rails, Django, Vue.js, React, and many, many more.
• Multichannel, cross-platform publishing. Isn’t it annoying and time-consuming to post the same content to your website, app, social media, etc. Using REST API, you can automate the entire process, publishing WordPress posts across multiple sources.

When Shouldn’t You Use a Headless CMS?

While headless WordPress is an innovative solution, there are things you should keep in mind as you decide whether to make the transition or not.

• If you’re not a seasoned developer, this method is likely more difficult than it’s worth. Tutorials can help you get started, but as for maintenance and bugs, you’re on your own. Headless WordPress may be too much of a headache for newer devs.
• Non-developers, such as clients, authors/editors, and designers will likely have a hard time. Navigating and working in the split environment takes some adjustment. The traditional WordPress setup is easy to understand for devs and non-devs, and if you’re building client websites, almost definitely superior.
• Maintenance issues. Choosing to decouple means having a separate front and back end. In other words, double the maintenance, double the servers, and double the confusion if something goes wrong. You also have to deal with the REST API connecting the two.
• Decoupling WordPress doesn’t leave it 100% intact. For instance, the WYSIWYG editor and live preview won’t work. Other areas may be buggy or require optimizing to your specific setup.
• This route can be expensive since it requires coding a custom front end and working in a split environment. As mentioned before, maintenance will be more difficult, so you’ll need to hire developers who know what they’re doing.
• If you’re not interested in coding your own website, headless WordPress is not the right choice. Try another solution for multichannel publishing, like PressRoom or a hybrid CMS.

In short: if you’re not creating a multichannel platform, don’t have the means to maintain a complicated setup, aren’t connecting WordPress to an app or separate website, and don’t want to build your own site or work with non-standard languages, you should just stick to normal WordPress.

What About a Hybrid CMS?

Hybrid CMSes are a relatively new invention. Headless CMSes were created to solve the long-standing issues of difficult content deployment across platforms and developers’ inability to use new frameworks while sticking with their content management solution.

But they aren’t without their problems. They’re difficult to set up, require an API to handle everything, and many of the CMS features you’re accustomed to – live previews and editors, post permalinks, etc. – don’t work at all. This is especially apparent in headless WordPress, as you’ll have no way of previewing posts or pages.

A hybrid CMS is the solution for this. Like WordPress, these platforms offer content management and website building features – but they let you pick and choose which parts of your site are headless and which work the traditional way.

Why does that matter so much? Basically, you can create a website as easily as with WordPress, while taking advantage of features like post previews and live editing – but when you have content you need to push to multiple platforms or want to integrate your own web framework, it just takes a few clicks.

You can even design most of your website with the built-in tools, then use an API to connect an application made in another framework. This is also possible in default WordPress using REST, but hybrid CMSes make the process a lot smoother for you.

Unfortunately, except for that detail, there’s no easy way to turn WordPress into a hybrid CMS. You can emulate it to an extent by using plugins that can automatically push your content to other platforms, and connecting apps built-in other frameworks using REST API. But if you decide to go headless, there’s no way to make live preview or other features work.

How to Make WordPress Headless

If you’d like to take a crack at separating WordPress from its front end, you have a few options. You can use a plugin, or code it yourself. The former will, of course, be a much easier route, while the latter gives you more control over the process.

Whatever method you choose, you should be familiar with the REST API. If you’re not, this online REST tutorial can help you get started. REST itself also has its own set of tutorials that will teach you everything you need to know.

If you want to try a plugin, the most popular one is WP Headless. All it does is sever access to the front end and make post permalinks redirect automatically to the editor screen. You can then use it as an organizational tool for written content. If you want to connect a different website, you can use the API to do so.

Your other option is WP Headless CMS Framework. While it has very few users, the plugin appears to go more in-depth in function and has very detailed documentation. It has multiple configurable options, so you can enable only what you need. This plugin doesn’t just disable the front end; it does a lot more to get you up and running with REST.

If you’d rather do it all yourself, there are many tutorials out there. Smashing Magazine has an in-depth guide to headless WordPress with plenty of code snippets that walks you through every step of the process. You might also like these tutorials on WordPress and Vue.js and how to build a front end for headless WordPress in React. And if you learn best through watching, you’ll love the video below.

Innovate With Headless WordPress

Thanks to all the tutorials out there, separating WordPress from its front end is easier than ever. Even just installing a plugin can make WordPress headless in an instant.

A decoupled CMS gives developers the ability to code their own site in the languages they know best, experiment with libraries and frameworks, use WordPress as an organizational or editorial tool, or post the same content across multiple platforms. All while still getting to take advantage of the great WordPress back end.

If any of these examples sound like your project, you should certainly give headless WordPress a go. It opens up plenty of opportunities for developer innovation, and gives you the freedom to use the tools you want without losing the robust content management system you’re familiar with.

Have you ever used a headless CMS before, or is this your first time trying? What made you decide that route was most efficient? Let us know your experiences in the comments!

The post Headless WordPress: What It Is and How to Use It appeared first on Torque.

A better approach would be to combine WordPress with a dedicated e-commerce platform. That way, you can use the CMS for creating and managing your store, and an e-commerce platform to power its functionality. This is referred to as a ‘headless e-commerce’ approach.

In this article, we’ll talk about how headless e-commerce works, and whether it’s a good option for you. Then we’ll go over how to implement this type of solution using WordPress and an e-commerce plugin. Let’s get to it!

An Introduction to Headless E-Commerce (And Its Benefits)

There are a lot of ways to set up an online store. For example, you might use a dedicated e-commerce platform to take care of the whole setup. Another approach would be to use a CMS and combine it with a standard e-commerce plugin.

Both of those approaches work, but there are of course many ways to tackle e-commerce. Another solution would be to develop an entirely new platform from the ground up, suited to your site’s specific needs. However, that’s not usually a viable solution for small- to medium-sized businesses.

Another approach that’s been gaining popularity is called ‘headless e-commerce’. To put it simply, this involves using one platform to handle what’s called the ‘presentation layer,’ and another for the e-commerce functionality. The presentation layer refers to all those features not related to online sales, such as content creation and management.

It may sound a bit unusual, but this approach offers several exciting benefits:

• It can help improve performance, by keeping both layers separated.
• It’s easier to update either ‘side’ of your store safely.
• Scaling an online store is simpler with a headless architecture.
• This system is a lot more flexible than traditional approaches to e-commerce.

That last part is the key selling point of headless e-commerce for most users. With this architecture, you’re free to use whichever platform you want to handle both the presentation and e-commerce layers. If you’re a WordPress fan, for example, you can use the CMS to create, design, and manage your store. Then you can integrate it with any e-commerce platform that its API supports.

Is Headless E-Commerce the Right Choice for You?

As we mentioned before, there’s no one-size-fits-all approach when it comes to e-commerce. If we’re talking about a sheer number of features, then some e-commerce platforms are clearly in the lead. However, it’s important to understand that not every online store requires the same level of complexity.

For example, let’s say that you want to add e-commerce functionality to an existing website, in order to sell a specific e-book or another type of digital product. In this case, WordPress plus a basic plugin like WooCommerce or Easy Digital Downloads might be a perfect fit.

Now, let’s imagine that you don’t want to sell just one or a handful of items. Instead, you have a catalog that spans hundreds of products. WooCommerce stores can sometimes have issues when it comes to ‘scalability’. In other words, the platform isn’t always able to grow smoothly with your store as it expands. With that in mind, it might be best to consider using a headless e-commerce structure in this scenario.

We’ve already talked about the benefits of headless e-commerce. To build on that, here are some situations where it makes sense to use it:

• You’ll need access to more advanced functionality than what an e-commerce plugin can provide.
• You intend to run an operation that handles a broad catalog.
• You’re looking to maintain and update both layers of your store separately.
• You already have a presentation layer set up, and you want to add online sales to it.

It’s also important to consider performance. Using a headless approach can keep your online store feeling fast, even if you’re managing hundreds of products. That’s key because reductions in performance can lead to a significant drop in sales.

How to Get Started With Headless E-Commerce in WordPress

As you might know, we’re big WordPress fans due to the CMS’s ease of use and customization potential. Those qualities make it the perfect platform to power the presentation layer of a headless e-commerce setup.

That still leaves us with the question of which software to use in order to power our site’s e-commerce functionality. For the headless approach to work, you’ll need to use an e-commerce platform with a robust API that enables you to access the functionality you need.

Some examples of e-commerce platforms that work well with a headless approach include Magento, BigCommerce, and CommerceTools. However, since we’re talking about integrating with WordPress, then our vote goes to BigCommerce:

In addition to its powerful APIs and direct channel integrations, this particular platform offers a dedicated e-commerce plugin that enables you to combine its functionality seamlessly with WordPress:

The advantage of this approach is that implementation is much simpler, at least when compared to putting together a manual integration. Plus, BigCommerce also enables you to manage multiple direct sales channels from a single dashboard, and that functionality works even with a headless WordPress structure.

Other advantages of this combination include BigCommerce’s extensive selection of payment gateways and its user-friendly checkout experience. To see how well both platforms play together, you’ll just need a WordPress website and a BigCommerce account – then you can use the plugin to connect the two. After that, you can start selling!

Conclusion

Traditionally, when people think about running an online store with WordPress, they imagine using a popular ‘starter’ plugin. However, headless e-commerce can be a much more scalable approach to online sales, and it’s not as hard to implement as you might imagine.

If you want to try creating a headless e-commerce setup using WordPress, the good news is that you don’t have to be a developer. You can pick an e-commerce plugin that will connect WordPress to a fully-featured platform, and integrate the two smoothly. That way, you get the benefits of both ease of use and flexibility.

Do you have any questions about how to implement headless e-commerce using WordPress? Let’s talk about them in the comments section below!

Image credit: Pixabay.

The post An Introduction to Headless E-Commerce (And Why It’s Worth Your Time) appeared first on Torque.

During the 2017 WP Engine Summit, Phil Crumm, Director of Strategy at 10up, and Weston Ruter, the CTO at XWP, discussed how to take advantage of headless WordPress, create meaningful user experiences, and harness all of the capabilities of a decoupled infrastructure.

How do we define Headless?

It can be difficult to define Headless because there are many varying perspectives. Often people mistakenly refer to other types of deployments as headless.

However, the common denominator for headless and WordPress is the REST API. There are also different variations of the separation of WordPress, the CMS, and the front-end. So how many people refer to headless is you have the WordPress front-end and back-end still on the same environment but the front-end is decoupled from the back-end. However, there are different variations. Headless “light” refers to when the REST API is serving all the content but the front-end isn’t very far away from WordPress.

Being completely Headless, however, involves disconnecting the front-end completely from WordPress.If using completely Headless WordPress, a lot of the things that WordPress would normally do completely out of the box become things you must do yourself.

The REST API is a powerful tool to help solve that problem; you can provide additional information to the front-end and take care of that more easily. Right now, the answer to how to successfully integrate, and what integration means is really based on the problem at hand and who you are. As a WordPress community, we need to try and make the platform more homogeneous if we want to help it develop beyond the traditional, single-model platform.

Breaking It Down

This represents a project involving a truly headless platform. WordPress is a platform for content to come in from a variety of third-party sources and merges it with first party editorial data and all the data is easily curated. The content is then spat out into another layer and served on the website via the front end developers.

One of the strengths of WordPress and Headless is superior content management. WordPress is an editorial interface that almost everyone in online publishing has been exposed to it at some point. Instead of creating projects from scratch, it’s a lot easier to build on top of WordPress and build one platform that does one thing really well.

Let’s look at some examples.

Beachbody and Headless

Beachbody a fitness company. Being a large company with many different endpoints for where their content goes, (including web, apps, TV sticks, etc) there need be much less coupling between the front end of their website and the data they were entering.

Beachbody wanted to keep WordPress as the CMS because it was familiar and proven but in order to lessen decoupling between the frontend and the CMS, they wanted to separate them. By separating them, WordPress can focus on delivering content and XWP could focus on developing the CMS. Additionally, other teams were involved in building up the website and the app. The project embodied headlessness by implementing a centralized content management system but also decentralized development.

Campbell’s + Pinterest and Headless

Often the utilization of headless takes the form of interesting applications that incorporate integrations to build using headless WordPress and create unique functionality. Headless WordPress creates possibilities for using WordPress as an application platform and can be used for projects that aren’t traditional publishing applications.

Campbell’s recognized the challenge of using Pinterest for recipes and cooking was that often times recipes could be unattainable for the average person. Campbell’s presented the idea of taking data from Pinterest’s metadata, in which ingredients and cooking appliances are found and combine that with information that Campbell already has. This way you are cooking with the simplest recipes and steps.

The process and platform work like this: you connect with Pinterest, it scans your Pin boards and it presents you with some recommendations with real recipes that are actually easy to make. Hence the name, Reality Check.

When you think about this from an engineering perspective, layering a couple APIs together is pretty straightforward. When you get into the nitty-gritty: settings management, API credentials, keywords, etc. the logistical legwork becomes tedious. One of the interesting things about WordPress, the Rest API, and custom post types is the idea that you can build a platform that connects a bunch of APIs in the backend and WordPress acts as an application layer for common functionality. WordPress takes so much of the nitty-gritty and simplifies it. It’s an easy platform for engineers to use and learn. Using the customizer, because it’s flexible and elastic, this project is scalable for the future.

The Possibilities of the Customizer

One of the things you get from WordPress for free is the ability to preview the change to a post or page. In a headless context, because the frontend is separate from WordPress you can’t preview things. In addition to that, WordPress (outside of the customizer), doesn’t allow you to preview changes to multiple content types at the same time. Previewability and collaborative revisions are something that WordPress hasn’t supported.

In regards to Beachbody, let’s say you wanted to create a whole new workout or product line. You’d have to create a new trainer, workout, and several custom post types. Even in a regular WordPress site, how would you go about doing that, previewing that so that stakeholders could review it, and then batching all these changes to go live together?

The customizer solves this and creates an ability to preview whilst still utilizing headless WordPress. It does that by using Changesets, released in WordPress 4.7. If you are in the customizer, everything stays in the customizer, until you hit publish. You can do everything you want in your site and everything will be bundled together into a Changeset. Once you publish, all the changes go live together. In this context, because those changes have a unique identifier, that allows you to make requests to WordPress and you’ll get a response that is customized according to what you have in the Changeset. This applies changes not only to your front end but also to the REST API and to applications.

With Beachbody, XWP, designed a customized post plugin, which allows you to manage posts and create any customized post type and data in the customizer. As well as the Customize Snapshots plugin which adds the ability to save or schedule a draft. These aspects, because XWP submitted requests, are now in 4.9 alpha.

Say you wanted to change the profile picture for Tony Horton, for example. You can do that in the customizer and preview it. The preview will load on the frontend of the site and include that UUID. The React frontend is made aware of that UUID. The application automatically, then, becomes previewable. Therefore, when you are making changes you can also see what changes are made in the REST API. From an editorial perspective, you can see what it’s going to look like and from a developer perspective, you can see how the code has changed.

If you have the UUID, you can give that URL to any stakeholder you might have (even if they don’t have WordPress) and they can preview any changes you might have made.

For local apps, however, there’s more of a process because there’s no URL to and so XWP enabled a mechanism where you can enable a Beachbody customer as an entity. You can create a customer account (1, 2, and 3) and you can make some changes and link that change with the user. Then, you can login to an app as that user and then all the requests that go to WordPress will include that indicated user state and then the mapping can be done in that requests.

The last example includes the application StoryCorps, a nonprofit application in which users can record conversations with friends and family and preserve them eternally without fear of losing those memories. StoryCorps mission is to provide the platform to talk to each other.

There are a couple different ways to record: home interviews and conversations with interesting people (celebrities, WW2 veterans or anyone with a cool story). Then, there are a couple ways to view the content: on the website or via the mobile app. The platform ties all these pieces together using one application layer. It’s serving as content management system and as a confident application platform.

10up built out a mobile application that uses Ionic which renders a mobile version of your website with a couple different tweaks so you can provide for specific pieces of code for things like audio recordings. It gives you an application to go online and record this content and distribute it to the application. Regardless of the way you’re using the application, you’re still interacting with WordPress. If you were to create an account today and connect it to the WordPress REST API you have the option to upload to the cloud.

Wrapping Up

The underlying theme of these projects and the possibilities of innovating with headless is WordPress’ ability to be flexible do multiple things well at once. Whether you’re using the customizer, as a content storage mechanism through the REST API, or an editorial platform, the possibilities are endless. For the end user, they don’t care that it’s built on WordPress, they just want something that performs. And for the editorial team, they just want a platform for publishing that is familiar and do many things at once. Lastly, it’s still in the realm of affordability for most companies.

The post Innovating With Headless WordPress appeared first on Torque.