Disable Frontend in Headless Wordpress

To disable the frontend in a headless WordPress setup while keeping the WordPress backend accessible for content management, you can follow these steps. This approach will prevent direct access to WordPress-rendered pages, while still allowing API access (for REST API or GraphQL) for your Next.js frontend.

Steps to Disable the Frontend in WordPress

1. Modify functions.php to Disable Theme Rendering

You can add custom logic to the functions.php file of your theme to block the frontend rendering, redirecting users or returning a 404 error for any non-API requests.

• Navigate to the functions.php file in your active theme.
• Add the following code to disable rendering for all non-API or non-admin requests:

function disable_wp_frontend() {
// If it's an API request or an admin page, allow it
if (is_admin() || strpos($_SERVER['REQUEST_URI'], '/wp-json/') === 0) {
return;
}

// Return a 404 for all other frontend requests
wp_redirect(home_url('/404'), 404);
exit;

}
add_action('template_redirect', 'disable_wp_frontend');

This code ensures that:

• Admin pages (/wp-admin) remain accessible.
• API requests (/wp-json/) are still processed.
• Any other frontend request (e.g., attempting to access a WordPress-rendered page) will be redirected to a 404 page.

1. Install a Plugin to Disable Frontend (Optional)

If you’re not comfortable editing the functions.php file, you can use a plugin to achieve a similar effect.

• Headless Mode Plugin: You can use the Headless Mode plugin, which automatically disables the frontend of WordPress and allows access only to the WordPress API and admin.
• Install the Headless Mode plugin from the WordPress plugin repository.
• Activate it, and it will automatically redirect any frontend page requests to a 404 page, while leaving API and admin pages accessible.

1. Hide Themes to Block Accidental Frontend Changes (Optional)

To ensure that no one inadvertently activates a theme that displays the frontend, you can restrict access to the theme settings in the admin panel.

You can do this by adding the following code to functions.php:

// Hide the Appearance menu from non-admin users
function remove_appearance_menu() {
if (!current_user_can('administrator')) {
remove_menu_page('themes.php');
}
}
add_action('admin_menu', 'remove_appearance_menu');

This will remove the Appearance menu for all non-admin users, reducing the chances of changing themes or modifying the frontend.

1. Disable Access to Frontend Themes Directly via .htaccess (Optional)

For added security, you can prevent direct access to the theme files via .htaccess.

In your .htaccess file (found in the root directory of WordPress), add the following:

RewriteEngine On
RewriteRule ^wp-content/themes/(.*)$ - [F,L]

This will block direct access to theme files.

1. Ensure API Access

Make sure your REST API or GraphQL is still functioning for the Next.js frontend to fetch data.

• REST API: You can access content via https://yourdomain.com/wp-json/wp/v2/.
• WPGraphQL: If using WPGraphQL, ensure the plugin is installed and accessible via https://yourdomain.com/graphql.

Conclusion

By following the above steps, you will successfully disable the frontend of WordPress, making it a headless CMS. The admin dashboard and APIs will still be accessible, but the default WordPress-rendered pages will be blocked or redirected. This will allow your Next.js app (deployed on Vercel) to handle the frontend.