HOW TO: Load a subdirectory independently of WordPress (avoid WordPress 404s)

There are times when you'll want to load a subdirectory in a WordPress setup decoupled from the WordPress core taxonomy handler (ie. a secondary non-wordpress app).

By default, when you try to load the subdirectory in a browser you'll see a 404 "page not found" response - or a WordPress page that closely resembles the name of the subdirectory. This is because WordPress grabs the request for anything after a forward slash (domain.com/subdirectory) and assumes its should serve content from it's own PHP.

Subdirectory .htaccess rules

We can do it in .htaccess. I've even gone ahead and made a sweet generator for you. Just type the name of the subdirectory below and click Generate. The page will reload and your fresh rules will spit out.

[xyz-ips snippet="Subdirectory-htaccess-generator"]

Just copy and paste it into your .htaccess above the existing rules and you'll be all set.

Here's an example of the code for the subdirectory /blog:

# Enable rewriting
RewriteEngine On
RewriteBase /

# Don't redirect direct requests for index.php
RewriteRule ^index\.php$ - [L]

# If requested path doesn't exist, rewrite everything to the index.php in the subdirectory to serve URLs from index.php. You may need to change the `index.php` bit to index.html (or whatever PHP is controlling the app in the subdirectory)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^blog/(.*)$ blog/index.php [L,QSA]

# End subdirectory path rewrites 

Headless Version: Serve static subfolder to your main domain

One neat way to run WordPress headlessly is by uploading a compiled version of your React.js site to a folder alongside your WordPress install. One of the benefits of this is that you can get around those pesky CORS issues without modifying any rules or fiddling with reverse-proxy shenanigans.

But you still have the problem of WordPress snatching those web requests and trying to serve its own content, or simply 404'ing.

You need to tell browsers where to pull your React.js code from.

Not to worry! Just pop the path to the folder containing your static files for react.js in the generator below (no slashes - just the folder name). The page will reload and your fresh rules will spit out.

[xyz-ips snippet="Headless-htaccess-generator"]

Just copy and paste it into your .htaccess above the existing rules and you'll be all set.

Here's an example of the code for the subdirectory /blog:

# Begin react.js path rewrites
RewriteEngine On
RewriteBase /

# Don't redirect direct requests for index.php
RewriteRule ^index\.php$ - [L]

# Persistant API path so you can make your API calls to... /api/*
RewriteRule ^api/(.*)$ /index.php?rest_route=/$1 [L,QSA]

# Redirect base URL visits to react.js static path
RewriteRule ^$ /blog/ [R=301,L]

# If requested path doesn't exist, rewrite everything to the index.html file to serve react.js's friendly URLs
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^blog/(.*)$ blog/index.html [L,QSA]

# End react.js path rewrites