If your site is already running behind Cloudflare’s proxy, you need to connect Cloudflare to LiteSpeed Cache so both caching layers stay in sync. Without this connection, LiteSpeed Cache can clear its own cache but has no way to clear what Cloudflare has stored at its edge servers. This means visitors can still see outdated content even after you have purged your WordPress cache.

This doc covers how to generate a Cloudflare API token, connect it to LiteSpeed Cache, and make sure both caches purge together when your content updates.

Prerequisites #

• LiteSpeed Cache plugin installed and active
• ElementsKit installed and active
• A Cloudflare account with your domain added and proxy enabled (orange cloud icon active in your Cloudflare DNS settings)
• Admin access to your WordPress dashboard

Do Note That: Do not use this setup alongside QUIC.cloud CDN. Running Cloudflare proxy and QUIC.cloud CDN at the same time creates double caching conflicts where one service serves stale content while the other has already updated. Choose one or the other. If you want to use QUIC.cloud instead, see How to Configure QUIC.cloud for ElementsKit Sites.

Step 1: Create a Cloudflare API Token #

You need a Cloudflare API token that gives LiteSpeed Cache permission to purge your Cloudflare edge cache. Here is how to create one:

Log in to your Cloudflare dashboard at dash.cloudflare.com. Click your profile icon in the top right corner and go to My Profile. Open the API Tokens tab and click Create Token.

On the token creation screen, scroll down and select Create Custom Token. Give your token a name that is easy to identify later, such as “LiteSpeed Cache Purge.”

Under Permissions, set the following: Zone, Cache Purge, Purge. Under Zone Resources, select Specific Zone and choose your domain from the dropdown.

Click Continue to Summary and then Create Token. Copy the token immediately and save it somewhere safe. Cloudflare only shows it once and cannot retrieve it again after you leave the page.

Step 2: Find Your Cloudflare Zone ID #

You also need your Cloudflare Zone ID to complete the connection. This is a unique identifier for your domain in Cloudflare.

Go back to your Cloudflare dashboard and select your domain. On the Overview tab, scroll down to the right sidebar. You will see your Zone ID listed there. Copy it.

Step 3: Connect Cloudflare to LiteSpeed Cache #

Now go back to your WordPress dashboard. Navigate to LiteSpeed Cache > CDN and open the Cloudflare tab.

Toggle Use Cloudflare to ON. Paste your API token into the API Token field and paste your Zone ID into the Zone ID field. Click Save Changes.

If the connection is successful, you will see a confirmation message that the Cloudflare API is connected. You will also notice a new Purge All – Cloudflare option appear in the LiteSpeed Cache dropdown in your WordPress admin toolbar.

Step 4: Verify the Setup is Working #

To confirm both caches are purging together, make a small change to a published page and update it. Then click the LiteSpeed Cache icon in your WordPress admin toolbar and select Purge All.

After purging, open that page in an incognito browser window and check that the updated content is showing. If it is, both LiteSpeed Cache and Cloudflare are purging correctly together.

You can also verify Cloudflare is actively proxying your site by checking the response headers. Open your browser’s developer tools, go to the Network tab, reload your page, and click the first request. Look for a cf-ray header in the response headers. If it is there, your traffic is going through Cloudflare.

Step 5: Configure Cloudflare Settings for LiteSpeed Cache Compatibility #

A few Cloudflare settings can interfere with LiteSpeed Cache if left at their defaults. Check these while you are in your Cloudflare dashboard:

Rocket Loader
Go to Cloudflare > Speed > Optimization > Content Optimization and make sure Rocket Loader is turned OFF. Rocket Loader rewrites how JavaScript loads on your page and frequently conflicts with Elementor and ElementsKit scripts, causing widgets to break or animations to stop working.

Auto Minify
Go to Cloudflare > Speed > Optimization and turn OFF Auto Minify for CSS, JS, and HTML. LiteSpeed Cache handles minification itself. Running both at the same time can produce broken CSS or JS output.

Browser Cache TTL
Go to Cloudflare > Caching > Configuration and set Browser Cache TTL to Respect Existing Headers. This tells Cloudflare to follow the cache headers LiteSpeed Cache sets rather than overriding them with its own TTL values.

Purging Cloudflare Cache #

Once connected, you have a few ways to clear your Cloudflare edge cache from WordPress:

From the WordPress admin toolbar, click the LiteSpeed Cache icon. You will see Purge All – Cloudflare in the dropdown. Clicking this clears both your LiteSpeed Cache and Cloudflare edge cache at the same time.

For smaller changes, you can purge specific URLs from your Cloudflare dashboard under Caching > Configuration > Custom Purge without clearing the entire cache.

Best Practice: Use Purge All – Cloudflare after making design changes, updating your header or footer, or changing global CSS. For single page content updates, WordPress and LiteSpeed Cache handle the purge automatically through the auto-purge rules you set up in the cache configuration.

Troubleshooting #

• Purge All – Cloudflare does not appear in the admin toolbar
  This usually means the API token or Zone ID was entered incorrectly. Go back to LiteSpeed Cache > CDN > Cloudflare and re-enter both values. Make sure there are no extra spaces before or after the pasted values.
• Content is still showing as outdated after purging
  First purge from LiteSpeed Cache, then also go to your Cloudflare dashboard and run a manual purge under Caching > Configuration > Purge Everything. This rules out any edge caching that did not clear through the API connection.
• Elementor or ElementsKit widgets are broken after enabling Cloudflare
  This is almost always caused by Rocket Loader or Cloudflare’s Auto Minify. Disable both in your Cloudflare dashboard, then go to LiteSpeed Cache in your WordPress admin toolbar and click Purge All – Cloudflare. Reload your pages and check if the issue is resolved.
• QUIC.cloud connection fails after setting up Cloudflare
  If you need to connect QUIC.cloud services while Cloudflare proxy is active, switch Cloudflare to Development Mode temporarily from your Cloudflare dashboard. This pauses the proxy so QUIC.cloud can reach your origin server. Once QUIC.cloud is connected, turn Development Mode off again.