WP Manifestindependent plugin directory
manifest / performance / cloudflare-devmode-toggle

Cloudflare DevMode Toggle

Adds a button to the WordPress admin bar to toggle Cloudflare Development Mode ON/OFF using credentials from wp-config.php or environment variables.

by Kavit Trivedi · github.com/trivedikavit/cloudflare-devmode-toggle

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/trivedikavit/cloudflare-devmode-toggle/archive/refs/heads/main.zip
Readme github.com/trivedikavit/cloudflare-devmode-toggle ↗

A WordPress plugin that integrates Cloudflare's Development Mode toggle into the WordPress Admin Bar. Development Mode temporarily disables Cloudflare's caching for faster debugging of frontend changes. Learn more about Development Mode at https://developers.cloudflare.com/cache/reference/development-mode/

Features

  • Admin Bar Integration: Adds a live indicator to the WordPress Admin Bar showing the current Cloudflare Development Mode status (🟢 ON / 🔴 OFF).
  • One-Click Toggle: Support staff or any other user with manage_options capability can switch Development Mode on or off instantly via a secure AJAX request.
  • Smart Caching: The plugin caches Development Mode status for five minutes to minimize API calls.
  • Security-Built-In: All requests are nonce-verified and permission-restricted, ensuring safe operation within shared or customer-facing dashboards.
  • Instant Feedback: Once toggled, the plugin provides immediate visual confirmation via an alert and reloads the page to reflect the new status.

Installation

You'll need two items from a Cloudflare account:

  • API Token: Create under My Profile → API Tokens → Create Token with permission Zone → Zone Settings → Edit.
  • Zone ID: Found under the domain's Overview tab in the Cloudflare dashboard sidebar.

Setup for Non-WPVIP Sites

  1. Add these lines to wp-config.php:
    define('CLOUDFLARE_API_TOKEN', 'your-api-token');
define('CLOUDFLARE_ZONE_ID', 'your-zone-id');
  2. Upload the plugin file to wp-content/mu-plugins/.

Setup for WPVIP Sites

  1. Set the same credentials as environment variables using WPVIP's environment management:
    • CLOUDFLARE_API_TOKEN
    • CLOUDFLARE_ZONE_ID
  2. Upload the plugin to /client-mu-plugins/. The plugin automatically reads these variables using WPVIP helpers.

Usage

Once installed and configured, users with 'manage_options' capability will see a "Cloudflare Dev Mode" button in the WordPress admin bar. The button displays the current status (ON/OFF) with an emoji indicator. Clicking the button will toggle the Development Mode on Cloudflare and reload the page to reflect the change.

Testing

To test the plugin:

General Testing

  1. Ensure Cloudflare credentials are properly configured (via wp-config.php or environment variables).
  2. Log in to WordPress as an administrator.
  3. Check the admin bar for the "Cloudflare Dev Mode" button.
  4. Click the button to toggle the mode and verify the status changes.
  5. Confirm the change in the Cloudflare dashboard.

Testing on WPVIP

For WPVIP environments:

  1. Ensure the environment variables CLOUDFLARE_API_TOKEN and CLOUDFLARE_ZONE_ID are set as per WPVIP documentation.
  2. Follow the general testing steps above.
  3. Note that changes may take a few minutes to propagate due to WPVIP's caching layers.

Limitations

The plugin currently does not support multisite or multi-domain setups (for example, sites serving multiple domains via a single WordPress instance).

Special Thanks

Special thanks to Joel Kingston (https://github.com/joeldkingston) for testing this on WPVIP.

License

This plugin is licensed under the GNU General Public License version 2 or later.
License URI: http://www.gnu.org/licenses/gpl-2.0.html