Disable Frontend in Headless Wordpress

To disable the frontend in a headless WordPress setup, you can configure WordPress to keep the backend accessible for content management while restricting direct access to WordPress-rendered pages. This setup allows only API access (e.g., REST API or GraphQL) for your Next.js frontend.

Steps to Disable the Frontend in WordPress

1. Modify functions.php to Disable Theme Rendering

Add custom logic to your theme's functions.php file to block frontend rendering, redirecting users or returning a 404 error for any non-API requests.

1. Navigate to the functions.php file in your active theme.

2. 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 will be redirected to a 404 page.

2. Install a Plugin to Disable Frontend (Optional)

If you prefer not to edit functions.php, you can use a plugin instead:

• Headless Mode Plugin: Disables the frontend and allows access only to the WordPress API and admin.

1. Install the Headless Mode plugin from the WordPress plugin repository.
2. Activate it to automatically redirect any frontend page requests to a 404 page while leaving API and admin pages accessible.

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

To prevent accidental frontend activation, restrict access to theme settings in the admin panel by adding this 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 removes the Appearance menu for all non-admin users, reducing the risk of changing themes or modifying the frontend.

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

For added security, prevent direct access to theme files by adding the following to your .htaccess file (found in the root directory of WordPress):

   <IfModule mod_rewrite.c>
   RewriteEngine On
   RewriteRule ^wp-content/themes/(.*)$ - [F,L]
   </IfModule>

This blocks direct access to theme files.

5. Ensure API Access

Make sure your REST API or GraphQL remains functional for the Next.js frontend to fetch data.

• REST API: Accessible 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

Following these steps will successfully disable the WordPress frontend, transforming it into a headless CMS. The admin dashboard and APIs will remain accessible, but default WordPress-rendered pages will be blocked or redirected, allowing your Next.js app to handle the frontend.