Cloudflare Integration

Manage Cloudflare cache and settings directly from WordPress

Overview

The Cloudflare integration is an optional feature that adds convenience tools for managing Cloudflare cache directly from your WordPress admin panel.

Note: You don't need this integration for CDN functionality to work. It's purely for convenience if you use Cloudflare.

Prerequisites

What You Need

Getting Cloudflare Credentials

Step 1: Get Your Zone ID

  1. Log in to Cloudflare Dashboard
  2. Select your domain/website
  3. Scroll down to the right sidebar
  4. Find "Zone ID" section
  5. Copy the Zone ID (it looks like: abc123def456...)

Step 2: Create API Token

  1. In Cloudflare Dashboard, click your profile icon (top right)
  2. Go to My Profile → API Tokens
  3. Click "Create Token"
  4. Use the "Edit zone DNS" template OR create custom with these permissions:

Required Permissions

Zone Permissions:

  • ✅ Cache Purge - Purge
  • ✅ Zone Settings - Edit
  • ✅ Zone - Read

Zone Resources:

  • Include → Specific zone → [Your Domain]
  1. Click "Continue to summary"
  2. Click "Create Token"
  3. Copy the API token (you'll only see this once!)
  4. Save it in a secure place

Configure Integration in WordPress

Setup Steps

  1. Go to 1 CDN Manager → Cloudflare
  2. Paste your Zone ID in the first field
  3. Paste your API Token in the second field
  4. Click "Save Changes"
  5. Click "Test Connection" to verify

Test Connection Results

✅ Success: "Connection successful! Cloudflare is properly configured."

❌ Failed: Shows error message - check credentials and permissions

Features

1. Purge All Cache

What it does: Clears all cached content for your entire domain

When to use:

How to use:

  1. Go to Cloudflare tab
  2. Click "Purge All" button
  3. Confirm the action
  4. Wait for confirmation message
Note: Purging all cache will temporarily slow your site as Cloudflare re-caches everything. Use selective purge when possible.

2. Selective Cache Purge

What it does: Purges specific URLs only

How to use:

  1. Enter URLs to purge (one per line)
  2. Click "Purge URLs"

URL Format Examples:

https://example.com/wp-content/themes/mytheme/style.css https://example.com/wp-content/uploads/2024/image.jpg https://cdn.example.com/script.js

Wildcard Purge:

Purge multiple files with prefixes (Enterprise plan only):

https://example.com/wp-content/uploads/* https://cdn.example.com/images/*

3. Developer Mode

What it does: Temporarily bypasses Cloudflare cache (auto-disables after 3 hours)

When to use:

How to use:

  1. Toggle "Developer Mode" switch ON
  2. Make your changes and test
  3. Toggle OFF when done (or let it auto-disable after 3 hours)
Tip: Developer Mode affects your entire domain, not just the WordPress site.

4. Always Online

What it does: Serves cached pages even when your origin server is down

Benefits:

How to use:

  1. Toggle "Always Online" switch ON
  2. Cloudflare will serve cached versions when origin is unavailable

5. Browser Cache TTL

What it does: Sets how long browsers should cache files

Options:

Recommended Settings:

  • Images/Videos: 1 week to 1 month
  • CSS/JS: 1 day (with versioning enabled)
  • Fonts: 1 month to 1 year
  • HTML: Respect existing headers (Cloudflare default)

Workflows & Best Practices

Site Update Workflow

  1. Before updates: Enable Developer Mode
  2. Make changes: Update theme, plugins, content
  3. Test: Verify everything works
  4. Publish: Disable Developer Mode
  5. Purge: Purge specific URLs or all cache
  6. Update version: Increment version strings if using versioning

CSS/JS Update Workflow

  1. Enable versioning: Make sure CSS/JS versioning is ON
  2. Update files: Make your CSS/JS changes
  3. Change version: Update version string (e.g., 1.5 → 1.6)
  4. Purge (optional): Purge old CSS/JS URLs
  5. Test: Verify new version is loaded

Emergency Purge

If something is broken due to cache:

  1. Enable Developer Mode (immediate bypass)
  2. Click Purge All
  3. Clear WordPress cache
  4. Clear browser cache (Ctrl+Shift+R)
  5. Test site
  6. Disable Developer Mode once fixed

Performance Optimization

Troubleshooting

Connection Test Fails

Error: "Invalid credentials"

Error: "Forbidden" or "Unauthorized"

Error: "Connection timeout"

Purge Not Working

Developer Mode Won't Turn Off

Settings Not Saving

API Rate Limits

Cloudflare Limits

The plugin is designed to respect these limits. Normal usage won't exceed them.

Security Best Practices

API Token Security

Token Management

Cloudflare + CDN Manager: Perfect Together

Recommended Setup

  1. Cloudflare DNS: Orange cloud enabled for main domain
  2. Subdomains: Create cdn.example.com, img.example.com (also orange clouded)
  3. Plugin Settings: Use subdomains as CDN URLs
  4. Cloudflare Integration: Configure for easy cache management
  5. Page Rules: Set cache everything on CDN subdomains

Benefits of This Combo