Why Doesn’t My Theme Layout Load After Using WP Ghost?

If your theme layout breaks or CSS/JS files fail to load after activating Safe Mode or Ghost Mode in WP Ghost, the issue is almost always a server configuration problem or a stale cache. The new paths need to be recognized by your server before they can serve files correctly. Here is how to diagnose and fix it.

Step 1: Clear All Cache

This is the most common cause and the easiest fix. When WP Ghost changes your CSS and JS paths, any cached version of your pages still references the old URLs. Those old URLs now return 404 errors, which makes your site look broken even though the paths are configured correctly.

Clear every cache layer: your WordPress caching plugin (WP Rocket, LiteSpeed Cache, Autoptimize, etc.), your server-side cache (Varnish, Redis, OPcache), your CDN cache (Cloudflare, StackPath, etc.), and your browser cache. Open your site in a private/incognito window after clearing to confirm the layout loads correctly.

Step 2: Run the Frontend Test

Go to WP Ghost > Change Paths and click the Frontend Test button. This opens a preview of your site with the new paths applied. If the test shows server configuration instructions, follow them. The Frontend Test is the fastest way to confirm whether the issue is cache-related or server-related.

Step 3: Check Your Server Configuration

Nginx servers. Nginx does not read .htaccess files, so WP Ghost’s rewrite rules need to be added to your Nginx configuration file manually. If you changed paths but did not update the Nginx config, the server does not know how to route requests to the new URLs, and every CSS/JS file returns a 404.

Access your Nginx configuration file (usually in /etc/nginx/), add the WP Ghost rewrite rules before the WordPress rewrite block, save the file, and reload Nginx with sudo systemctl restart nginx. For step-by-step instructions, see the Setup WP Ghost on Nginx Server tutorial. If you are on a VPS, see the Nginx VPS Configuration guide.

Apache servers. Apache reads rewrite rules from the .htaccess file, but only if the AllowOverride directive is set to All for your site’s directory. If it is set to None (the default on many server setups), Apache ignores .htaccess completely, and WP Ghost’s path changes have no effect.

Open your Apache configuration file, find the <Directory> block for your WordPress installation, and set AllowOverride All. Save the file and restart Apache. For a detailed walkthrough, see the How to Set AllowOverride All tutorial. Note: managed WordPress hosts like SiteGround, Bluehost, and GoDaddy typically have AllowOverride All enabled by default. This step is mainly for self-managed VPS or dedicated servers.

Step 4: Check Text Mapping

If you used WP Ghost > Mapping > Text Mapping to replace class names in the HTML source, those replaced class names also need to appear in your CSS files. If the class name exists in your HTML but not in the CSS, the styling breaks. Make sure the option Text Mapping in CSS and JS files is switched on. If you recently added text mapping rules and the layout broke, try disabling them temporarily to confirm they are the cause.

Step 5: Check for Plugin or Theme Conflicts

If clearing cache and checking the server configuration did not fix the issue, a conflict with another plugin or your theme may be the cause. Temporarily deactivate other plugins to see if the layout loads correctly. If it does, reactivate them one by one to identify the conflicting plugin. You can also switch to a default WordPress theme (like Twenty Twenty-Four) to rule out a theme-specific issue. Do this on a staging site to avoid disrupting your live site.

Still Broken? Emergency Recovery

If your site remains broken and you cannot access the dashboard, use the emergency disable method to restore all default paths. You can also add define('HMWP_DISABLE', true); to your wp-config.php file via FTP to disable WP Ghost at runtime without deactivating the plugin. Once you regain access, reconfigure your paths step by step, testing the frontend after each change.

Frequently Asked Questions

Why does my theme break on Nginx but not Apache?

Apache reads WP Ghost’s rewrite rules automatically from the .htaccess file. Nginx ignores .htaccess entirely and requires manual configuration. If you activate WP Ghost on an Nginx server without updating the Nginx config, the server cannot route requests to the new paths and all CSS/JS files return 404 errors.

Do I need to update the server config every time I change paths in WP Ghost?

On Apache, no. WP Ghost updates the .htaccess file automatically. On Nginx, yes. Every time you change paths in WP Ghost, you need to update the Nginx configuration file and reload the service. WP Ghost shows the required rules in the Frontend Test instructions.

Will WP Engine, Kinsta, or other managed hosts work?

Most managed WordPress hosts work with WP Ghost out of the box. Some hosts like WP Engine may require specific configuration. Check the hosting-specific guides: WP Engine, Kinsta, or the compatible plugins list for your hosting provider.

My layout broke after using Text Mapping. How do I fix it?

Text Mapping replaces class names in the HTML. If those class names are not also replaced in the CSS files, the styling breaks. Enable Text Mapping in CSS and JS files under WP Ghost > Mapping > Text Mapping. Then clear all caches and test in a private browser window. If the issue persists, disable the specific mapping rules that caused the problem.

Does WP Ghost modify WordPress core files?

No. WP Ghost uses rewrite rules and WordPress filters to change paths at runtime. No core files, theme files, or plugin files are modified. If something breaks, disabling WP Ghost or using the emergency recovery method restores all original paths instantly.