Troubleshooting Resource Loading Issues After Cloning a WordPress Website

When cloning a WordPress website, you may encounter issues where various resources such as JavaScript (JS), Cascading Style Sheets (CSS), images, and fonts do not load correctly. This can manifest in several ways, such as error messages in the browser console like “Cross-Origin Request Blocked”, “downloadable font: download failed”, or other resource-specific errors. This article will help you identify the problem, understand its causes, and provide resolutions to ensure all resources load properly on your cloned site.

Problem

After cloning a WordPress website, resources such as JS, CSS, images, and fonts fail to load properly.

Symptoms

  1. Browser Console Errors:
    • “Cross-Origin Request Blocked”
    • “downloadable font: download failed”
    • Other JS and CSS errors
  2. Website Appearance:
    • Missing or incorrect fonts
    • Broken layout due to missing CSS
    • Non-functional JavaScript features
    • Missing or incorrectly displayed images

Cause

The primary cause of this issue is often a stale cache. When a WordPress site is cloned, cached data from the original site may still be present, causing conflicts and preventing resources from loading correctly.

Resolution

To resolve this issue, you need to clear the cache on your WordPress site. This can be done through the WordPress Admin area, plugin settings, or via WP-CLI commands. Here are the steps to follow:

Clearing Cache Through WordPress Admin Area

  1. Login to your WordPress Admin Dashboard.
  2. Navigate to the Cache Plugin Settings:
    • If you are using a caching plugin like W3 Total Cache, WP Super Cache, or any other, locate its settings in the admin dashboard.
  3. Clear the Cache:
    • Look for an option to clear or purge the cache. This might be labeled as “Purge All Caches”, “Delete Cache”, or similar.
    • Click the button to clear the cache.

Clearing Cache Using WP-CLI

For users comfortable with command-line interfaces, WP-CLI provides commands to clear caches efficiently.

  1. Access your WordPress site via SSH.
  2. Run the following WP-CLI command to flush the cache: 
    wp flush cache

Clearing Cache for Specific Plugins

If you are using specific optimization plugins like Autoptimize, you need to clear their caches as well. Refer to the plugin documentation for the correct commands. For Autoptimize you can run:

  1. Clear General Autoptimize Cache: 
    wp autoptimize clear
  2. Clear CSS Cache with Autoptimize: 
    wp autoptimize clear --type=css
  3. Clear JS Cache with Autoptimize: 
    wp autoptimize clear --type=js

Additional Tips

  • Check Cross-Origin Resource Sharing (CORS) Settings: Ensure that the CORS settings on your server are configured to allow resources to be loaded from the correct origins.
  • Verify Resource URLs: Make sure the URLs for the resources are correct and point to the new site if they were hard-coded.
  • Disable and Re-enable Plugins: Sometimes, disabling and then re-enabling caching or optimization plugins can resolve persistent issues.

By following these steps, you should be able to resolve loading issues for JS, CSS, images, and fonts after cloning a WordPress site. Clearing the cache ensures that any old data is removed, allowing your site to load all resources correctly.