Get Started with a Headless Wordpress Site

When choosing to build a site with Wordpress, there are a couple of options. You can use Wordpress to handle the backend and the frontend with PHP (classic), or you can separate them and use Wordpress for the backend and a JavaScript framework of choice for the frontend, like React or Next.

There are some advantages and disadvantages to each option, which are discussed in this Smashing Magazine post, "Headless WordPress: The Ups And Downs Of Creating A Decoupled WordPress". I am starting a project using the decoupled method and will probably post about it along the way. An easy way to get started is by using Local by Flywheel. Below is a guide to get up and running:

1. In Local by Flywheel click "Add Local Site" to create a new Wordpress site, and then click "Start Site." This will start up the Wordpress backend server.
2. Install plugins:
   • ACF to WP API
   • Advanced Custom Fields
   • JWT Authentication for WP-API
   • WP-REST-API V2 Menus
   • Custom Post Type UI (optional)
3. Navigate to the Flywheel folder for the project and replace the app > public > wp-content folder with the copy the wordpress > wp-content folder from this Headless Wordpress Starter repo, which is adapted from Postlight's Headless Wordpress Starter Kit.
4. Add the frontend folder from the same repo in the root of the Flywheel project directory.
5. In frontend > config.js, replace the following wpURL with the link to your backend Wordpress API endpoint. The Wordpress API is the Wordpress site followed by wp-json, for example: let wpUrl = 'http://headlesswptestproject.local/wp-json/';
6. Open a terminal, $ cd frontend && yarn && yarn start
7. That should open up localhost:3000. This will start up the frontend server.
8. If there is an error shown on your localhost:3000 page, create a page in WP with the title/slug = “welcome”

The WordPress REST API allows us to work with JSON to send and receive data from our Wordpress site. That opens the door for developers who want to create beautiful, dynamic Wordpress sites using newer tools and frameworks like Next.js. I'm excited to try it out and see how it compares to building a site entirely with Wordpress. Check back soon for more updates on the process!

Comments

[joko warsito]

Hi @aellon

Is it possible to fetch any SEO Tags from headless wordpress (content.example) to main website (example.com) using REST API? since all tags must included on header.

Thank you