WordPress Setup

Turning WordPress into a Headless CMS isn't straightforward, so grab a cup of ☕️ because following these steps will take ~20 minutes.

The following instructions assume you'll be standing up a fresh local install of WordPress.

Requirements

Make sure you have the following dependencies:

• Composer

WordPress Setup

Step 1: Install Plugins & Theme

1. In your terminal, change directories to your new WordPress install's /wp-content directory, then download our composer.json.

curl -O https://raw.githubusercontent.com/Highfivery/nextjs-starter/main/backend/wordpress/composer.json

2. Install the plugins in the WP Dashboard or use WP CLI:

composer install

3. Activate all plugins:

wp plugin activate --all

Step 2: Configure wp-config.php

The following constants need to be in wp-config.php:

define( 'HEADLESS_FRONTEND_URL', 'http://localhost:3000/' );
define( 'PREVIEW_SECRET_TOKEN', 'ANY_RANDOM_STRING');
define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'ANY_RANDOM_STRING' );

To generate random strings, we recommend using the WordPress Salt Generator. Just copy and paste any of the generated strings into the constants above.

Step 3: Create Pages

In the WordPress Dashboard, navigate to Pages -> Add New

Create three pages:

1. Homepage
2. Blog
3. 404

Step 4: Set Page Options

1. In the WordPress Dashboard, navigate to Settings -> Reading -> "Your homepage displays" and set static pages for the Homepage and Posts page.
2. Now navigate to Settings -> Headless Config -> Custom Page Options and set the custom 404 page.

Plugins Setup

Application Password

The front end will need to authenticate with WordPress, we can use Application Passwords.

1. Users -> Profile -> Scroll to the bottom
2. Enter a name, e.g, nextjs-starter
3. Click -> Add New Application Password

Copy and paste the password into a safe location. You will need to add both your WordPress username and Application password to the .env file for the front end.