How to Add Cloudflare Turnstile to WordPress Comment Without Plugin

Cloudflare, one of the biggest network delivery services on the internet, has developed a new tool called Cloudflare Turnstile, which serves as an effective and free alternative to conventional CAPTCHAs. This innovative tool is designed to help website owners verify the authenticity of their visitors without subjecting them to the tedious and annoying task of solving CAPTCHAs. Moreover, this tool can be easily incorporated into any website, regardless of whether the website is using Cloudflare’s Content Delivery Network (CDN) or not.

Cloudflare Turnstile employs managed challenge, which is a more intelligent solution than CAPTCHA, to provide protection against spam and abuse on your login page, registration page, or comment form. If you’re struggling with spam comments, Cloudflare Turnstile can help you mitigate them efficiently.

In this tutorial, we will guide you on how to add Cloudflare Turnstile to your WordPress commenting feature, which can help prevent bots from spamming your website comments, without the need for any plugins. Let’s dive in!

Adding Cloudflare Turnstile to WordPress Comment

Step 1: Get the Site Key and Secret Key

To set up Cloudflare Turnstile on your website, you’ll need to get a Site Key and a Secret Key for it. Start by creating a Cloudflare account from the sign-up page. And once you’re logged in, on the Cloudflare dashboard, click on the Turnstile menu to start adding your site.

On the Add Site page, add your Site name, and site Domain, and then select the Widget Mode. We chose the Managed option for this tutorial, but you can select any options you want. Once you’ve filled out all the required fields, click on the Create button.

Now you’ll have your Site Key and Secret Key ready for setting up Cloudflare Turnstile on your website.

Step 2: Adding Custom Codes to the Theme Files

Once you’ve got your site key and secret key, the next step is adding custom codes and adding the keys to the code. Since this tutorial will use the files from the active themes, you may want to back up your site or use a child theme to avoid breaking the parent theme or losing your changes when you update your theme.

Once you’re ready, navigate to Appearance → Theme File Editor from your WordPress dashboard. If you’re using a block theme, the theme file editor can be found under the Tools menu.

Now for the first code, on the Edit Theme page, select the single.php file from the Theme Files list and place the following code under the get_header(); line and after the PHP closing tag ?> on the file editor.

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

The above snippet is to load the turnstile api.js from the Cloudflare website on your post. Click the Update File button to save the change.

For the second code, select the functions.php file from the Theme Files list and place the following code at the bottom of the file editor.

function wpp_cloudflare_turnstile($submit_field) { 
    $submit_field['submit_field'] = '<div class="cf-turnstile" data-sitekey="your-site-key" data-callback="javascriptCallback"></div>'.$submit_field['submit_field']; 
    return $submit_field; 
} 
 
if (!is_user_logged_in()) { 
    add_filter('comment_form_defaults', 'wpp_cloudflare_turnstile'); 
} 

function wppturnstile_check() {
	
    $postdata =$_POST['cf-turnstile-response'];
   //add secret key
    $secret = 'your-secret-key';

    $headers = array(
        'body' => [
            'secret' => $secret,
            'response' => $postdata
        ]
    );
    $verify = wp_remote_post('https://challenges.cloudflare.com/turnstile/v0/siteverify', $headers);
    $verify = wp_remote_retrieve_body($verify);
    $response = json_decode($verify);

    if($response->success) {
        $results['success'] = $response->success;
    } else {
        $results['success'] = false;
    }

    if(empty($postdata)){ 
        wp_die(__("<b>ERROR: </b><b>Please click the captcha checkbox.</b><p><a href='javascript:history.back()'>« Back</a></p>")); 
    } elseif(!$results['success']){ 
        wp_die(__("<b>Sorry, spam detected!</b>")); 
    } else {
        return true;
    }   
}

if (!is_user_logged_in()) { 
    add_action('pre_comment_on_post', 'wppturnstile_check'); 
}

Before you save the code, you need to add your site key and secret key which you’ve created on your turnstile account.

• On the 2nd line of the code, replace your-site-key with your site key

• On the 14th line of the code, replace your-secret-key with your secret key

After you’ve added your site key and secret key to the code, save the changes you’ve made by clicking the Update File button.

The code above checks if the response of the Cloudflare Turnstile is present or not and then acts accordingly. If not present, then there may be a challenge to click the checkbox first that needs to be passed.

If the response is present continue to check if it’s a success to allow the comment to be posted. Otherwise, there will be a “Sorry, spam detected” message.

Step 3: Try Commenting as a Visitor

Since the codes only show the Cloudflare turnstile widget if you’re not logged in, then you need to log out or open the page in incognito mode to show the widget. Here is what it looks like on our site.

The Bottom Line

Cloudflare Turnstile can provide protection against spam or abuse caused to your login page, registration page, or comment form using managed challenge which is a smarter solution than CAPTCHA and save you from annoying and time-consuming CAPTCHAs.

So, if you’re having a problem with spam comments, then Cloudflare Turnstile can mitigate them for you. This tutorial shows you how to add Cloudflare Turnstile to your WordPress commenting feature to filter out bots from spamming your website comments without using any plugins.