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.
-
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 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.
- Install the Headless Mode plugin from the WordPress plugin repository.
- 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.