EDITS.WS

Tag: cloudflare

  • How to Setup Cloudflare Free CDN in WordPress (Step by Step)

    Do you want to use the free Cloudflare CDN on your WordPress site?

    Cloudflare is one of the best WordPress CDN services available in the market. They offer a free CDN that speeds up your website along with a suite of powerful security features for small business websites.

    The challenge is that many entry-level users are not able to use Cloudflare because they think it is hard to set up.

    In this guide, we will walk you through a complete Cloudflare setup in WordPress to help you improve your website speed.

    How to Setup Cloudflare Free CDN in WordPress (Step by Step)

    What Is a CDN?

    A CDN or content delivery network is a system of distributed servers that helps deliver your website files faster to users based on their location.

    Typically, a web hosting service serves your website visitors from a single location. All the users access the same server, no matter where they are located.

    This can cause a delay in content delivery for users living further away from your website’s central hosting server.

    That’s why CDNs set up multiple edge servers in different locations around the globe.

    These CDN servers cache static content from your website’s origin server and present it to users when they visit your WordPress website.

    Content Delivery Network (CDN)

    When there is a user request, the CDN server closest to the user’s location will handle it.

    For example, if someone in the USA wants to access a UK-hosted website, then a CDN server in the USA will serve that request, not the main server in the UK.

    With a CDN, all the user requests are handled by the nearest CDN servers. This reduces the physical distance between the visitors and your website’s server.

    As a result, a CDN improves your website performance and speed for all users regardless of their geographic location.

    A faster website also improves the user experience and can give your website a slight boost in SEO rankings. Using a CDN also reduces the load on your primary server and protects it from crashing during traffic spikes.

    If you want to learn more, then see our guide on why you need a CDN for your WordPress blog.

    What Is Cloudflare CDN?

    Cloudflare CDN

    Cloudflare is one of the most popular free CDN providers available on the internet. It is a large network of globally-distributed servers that automatically cache static content and deliver dynamic content quickly.

    On top of a CDN service, Cloudflare is also a cloud-based website firewall and a distributed proxy server. It monitors all incoming traffic to your website and blocks suspicious traffic even before it reaches your server.

    They offer a free basic plan that’s suitable for small business websites and blogs. They also offer paid plans starting at $20 per month.

    Cloudflare is an excellent choice for small businesses looking for a free CDN. However, if you want to fully utilize all of Cloudflare’s features, then you will need the Business plan, which costs $200 per month.

    Note: We do not use Cloudflare on WPBeginner. Instead, we use Sucuri as a website firewall and CDN. This firewall has the double benefit of improving speed and security. You can learn more in our comparison of Sucuri vs. Cloudflare.

    With that being said, let’s take a look at how to set up Cloudflare Free CDN in WordPress. You can use the quick links below to jump to the different parts of the tutorial:

    Setting Up Cloudflare CDN in WordPress

    To begin, you need to visit the Cloudflare website and click on the ‘Sign Up’ button.

    Visit Cloudflare website

    On the next page, you need to enter your email address and password to create a Cloudflare account.

    Simply enter the information required, and then click on the ‘Sign up’ button.

    Create Cloudflare account

    When you finish signing up, you will see a thank you page confirming that your Cloudflare account has been set up.

    The next step is to add your website to Cloudflare. You should click the ‘Add a website or application’ button to get started.

    The Cloudflare Thank You Page

    You can now enter your website into the ‘Enter your site’ field.

    Make sure you only type your site’s domain name, such as example.com. You don’t need to type the full URL or any extra characters.

    Enter Your Website's Domain Name

    On the next screen, you will be asked to choose the type of Cloudflare plan you want.

    For this tutorial, we will choose the free Cloudflare plan. Then, click the ‘Continue’ button.

    Select Cloudflare free plan

    After that, Cloudflare will show you a list of all DNS records their systems found. These will include your subdomains as well.

    The DNS records you want to be passed through Cloudflare should have an orange cloud icon. The DNS records that will bypass Cloudflare will have a gray cloud icon.

    You need to review the list to make sure that your primary domain is active on Cloudflare with an orange cloud icon. Simply click the ‘Proxy status’ toggle to change the status.

    Verify DNS Records to Set up Cloudflare

    Once you have verified your DNS records, just click on the ‘Continue’ button at the bottom.

    During the next step of your setup, Cloudflare will ask you to update your nameservers. You will be asked to change your nameservers and point them to Cloudflare nameservers.

    Change to Cloudflare nameservers

    Note: Changing nameservers can take some time to propagate throughout the internet. During this time, your website may become inaccessible to some users.

    You can change nameservers from your domain registrar account, like Domain.com.

    Or, if you got a free domain from your web hosting provider like Bluehost, then you will have to change the name server by logging in to your hosting account.

    For the sake of this tutorial, we will be showing you how to change the nameservers from the Bluehost control panel.

    While the process is similar across hosting companies, you can always ask your hosting provider for detailed instructions for their control panel.

    Once you are logged in to your Bluehost cPanel dashboard, go to the ‘Domains’ section, and select your domain name. After that, click on the ‘Name Servers’ tab and the ‘Edit’ button.

    Edit nameservers in hosting cPanel

    Next, you need to select ‘Custom’ and enter the nameservers provided by Cloudflare.

    Then, click the ‘Save’ button.

    Save new Cloudflare nameservers

    After that, you need to go back to the Cloudflare setup page, and click the ‘Done, check nameservers’ button to finish the setup.

    It will now check your new nameservers automatically.

    Check Cloudflare nameservers

    That’s it! It will take a few minutes to update your domain nameservers and activate Cloudflare.

    Once activated, you will see the success message in your Cloudflare dashboard.

    Cloudflare success message

    In the meantime, the Cloudflare Quick Start Guide will open automatically, and you can use it to customize your Cloudflare settings. We will show you how in the next section.

    Note: The above screenshots show the Bluehost control panel. Your nameserver settings may look different if you are using a different hosting provider.

    Configuring Cloudflare With the Quick Start Guide

    The Cloudflare Quick Start Guide should have opened automatically after you clicked on the ‘Done, check nameservers’ button above. This setup wizard will help you improve the security and performance of your website.

    The first setting is ‘Automatic HTTPS Rewrites’.

    Cloudflare Automatic HTTPS Rewrites

    This will help you avoid the mixed content error in WordPress. It does this by automatically changing ‘http’ to ‘https’ in the URLs of all resources and links on your site that can be served with a secure ‘https’ URL.

    This setting is on by default. We recommend you leave it on and click the ‘Save’ button.

    The next setting is ‘Always Use HTTPS’.

    Always Use HTTPS

    Some users have reported issues when using this setting with Cloudflare. This setting is disabled by default, and we recommend you leave it that way. We will show you how to redirect from HTTP to HTTPS using the All in One SEO plugin later in this article.

    Now you can click the ‘Save’ button to move on to the next option.

    The next setting is Brotli compression.

    Brotli Compression

    Cloudflare can use Brotli compression to unlock 15-20% speed improvements. This setting is on by default, and we recommend you leave it on.

    Make sure you click the ‘Save’ button to store this setting.

    Now you will see a summary of what you have configured with the Quick Start Guide.

    Cloudflare Quick Start Summary

    You should see:

    • Automatic HTTPS Rewrites: ON
    • Always Use HTTPS: OFF
    • Brotli: ON

    You have now completed the Quick Start Guide and can click the ‘Finish’ button. However, there are still some additional important settings that need to be configured.

    Configuring Additional Important Cloudflare Settings

    Your basic Cloudflare setup is complete, but there are a few essential settings you need to configure to keep your WordPress site secure.

    1. Secure Your WordPress Login Page

    You can set up page rules to customize how Cloudflare works on specific pages on your site. This is especially useful for securing critical pages such as the login page and wp-admin area.

    The Cloudflare free account allows you to set up 3 page rules. If you want to add more page rules, then you need to pay $5 per month for 5 extra rules.

    First, you need to click the ‘Rules’ option in the menu on the left of the page. After that, you can click the ‘Create Page Rule’ button.

    Cloudflare Page Rules

    Now you can set up 3 different page rules. You can start by creating a rule that secures your WordPress login page.

    Simply add the following settings below to secure your website:

    • Page URL: example.com/wp-login.php*
    • Settings: Security Level – High
    Secure WordPress login page

    When you are done, just click ‘Save and Deploy’ to store and activate the rule.

    2. Exclude the WordPress Dashboard from Cloudflare

    You will be returned to the Page Rules page, where you can see your first rule listed.

    Now you can create a second rule to exclude the WordPress dashboard from Cloudflare caching and enable high security.

    Click the Create Page Rule Button

    You’ll need to click on the ‘Create New Rule’ button to create your second rule.

    After that, you need to type the following settings into the rule. You can click the ‘+ Add a Setting’ button to add new rows for additional settings:

    • Page URL: example.com/wp-admin*
    • Settings: Security Level – High
    • Cache Level – Bypass
    • Disable Performance
    • Disable Apps
    Exclude WordPress dashboard

    When you are done, make sure you click ‘Save and Deploy’ to add the new rule.

    3. Configure SSL Certificate Settings

    Another important setting is the SSL certificate available in the ‘SSL/TLS’ menu on the left.

    Set SSL certificate settings

    Make sure to click the ‘Full’ radio button if you are already using SSL.

    If you don’t have an SSL certificate, then see our guide on how to get a free SSL certificate for your website.

    Once you are done, Cloudflare will provide the essential green padlock in your visitors’ address bar to signify that your website is secure.

    4. Redirect from HTTP to HTTPS Using All in One SEO

    We mentioned earlier that we don’t recommend using Cloudflare’s ‘Always Use HTTPS’ feature. A great alternative is to use the All in One SEO plugin. It’s the best SEO plugin for WordPress, used by over 3 million sites.

    The first thing you need to do is activate and install the All in One SEO plugin. For more details, see our guide on how to install a WordPress plugin.

    After that, navigate to All in One SEO » General Settings and then enter your license key into the ‘License Key’ box and click ‘Connect’.

    Enter AIOSEO license key

    You can find your license key in your account profile on the All in One SEO website.

    Next, navigate to All in One SEO » Redirects and then click the ‘Full Site Redirects’ menu navigation option.

    AIOSEO Full Site Redirect

    You will need to scroll down the page until you find the ‘Canonical Settings’ toggle. You should click this toggle so that it turns blue.

    Next, turn on the ‘Redirect from HTTP to HTTPS’ toggle. This will create a redirect from HTTP to HTTPS, making sure that your visitors always have a secure connection to your website.

    Using AIOSEO to Force HTTPS

    When you are done, make sure to click the ‘Save Changes’ button at the bottom or top of the screen to store this setting.

    Optimizing Cloudflare for WordPress Using a Plugin

    Cloudflare offers a dedicated WordPress plugin for one-click WordPress-optimized settings.

    The plugin lets you quickly set up Cloudflare on your WordPress site, add web application firewall (WAF) rulesets, automatically purge the cache, and more.

    To get started, install and activate the Cloudflare plugin on your website. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Once done, you need to visit Settings » Cloudflare in your admin panel to configure the Cloudflare settings.

    On the settings page, you will see a ‘Create Your Free Account’ button and a sign-in option for existing accounts. Simply click the ‘Sign in here’ link.

    Cloudflare plugin settings

    On the next screen, you will need to enter your Cloudflare email and API key.

    Click the ‘Get your API key from here’ link.

    Entering API Credentials Into the Cloudflare Plugin

    This will bring up a popup for your account area on the Cloudflare website.

    Make sure you are on your ‘My Profile’ page, and then click on the ‘API Tokens’ tab in the left sidebar.

    After that, go to the ‘Global API Key’ section and click on the ‘View’ button.

    Get global API key

    This will open a popup and display your API key.

    Simply click on the key to copy it.

    Click to Copy the Global API Key

    Next, you need to come back to your WordPress dashboard and enter your email address and API key.

    Then, click the ‘Save API Credentials’ button.

    Save Cloudflare API Credentials in WordPress

    After that, the Cloudflare settings will appear on your dashboard.

    From here, you can apply a single-click WordPress optimization, purge the cache, enable automatic cache, and more.

    To optimize your WordPress site, just click the ‘Apply’ button next to ‘Apply Default Settings’.

    Apply to optimize WordPress

    Next, click on the ‘Settings’ menu option.

    Here you will find more site optimization settings.

    Cloudflare for WordPress Settings

    You can scroll down on this screen to find the ‘Security’ section.

    By default, the security level is medium. To improve your website’s security, you can select ‘High’ from the dropdown list.

    Change WordPress security level

    We hope this article helped you to learn how to set up Cloudflare free CDN in WordPress. You may also want to see our ultimate WordPress security guide and our expert picks for the best WordPress security plugins to further protect your website.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Setup Cloudflare Free CDN in WordPress (Step by Step) first appeared on WPBeginner.

  • How to Add HTTP Security Headers in WordPress (Beginner’s Guide)

    Do you want to add HTTP security headers in WordPress?

    HTTP security headers allow you to add an extra layer of security to your WordPress website. They can help block common malicious activity from affecting your site’s performance.

    In this beginner’s guide, we will show you how to add HTTP security headers in WordPress.

    How to Add HTTP Security Headers in WordPress (Beginner's Guide)

    What Are HTTP Security Headers?

    HTTP security headers are a security measure that allows your website’s server to prevent some common security threats before they can affect your website.

    When a user visits your WordPress website, your web server sends an HTTP header response to their browser. This response tells browsers about error codes, cache control, and other statuses.

    The normal header response issues a status called HTTP 200. After this, your website loads in the user’s browser. However, if your website is having difficulty, then your web server may send a different HTTP header.

    For example, it may send a 500 internal server error or a not found 404 error code.

    HTTP security headers are a subset of these headers. They are used to protect websites from common threats like click-jacking, cross-site scripting, brute force attacks, and more.

    Let’s have a quick look at some HTTP security headers and how they protect your website:

    • HTTP Strict Transport Security (HSTS) tells web browsers that your website uses HTTPS and should not be loaded using an insecure protocol like HTTP.
    • X-XSS Protection allows you to block cross-site scripting from loading.
    • X-Frame-Options prevents cross-domain iframes or click-jacking.
    • X-Content-Type-Options X-Content-Type-Options blocks content mime-type sniffing.

    HTTP security headers work best when they are set at the web server level, which means your WordPress hosting account. This allows them to be triggered early on during a typical HTTP request and provide maximum benefit.

    They work even better if you are using a DNS-level website application firewall like Sucuri or Cloudflare.

    That being said, let’s take a look at how to easily add HTTP security headers in WordPress. Here are quick links to different methods so that you can jump to the one that suits you:

    1. Adding HTTP Security Headers in WordPress Using Sucuri

    Sucuri is one of the best WordPress security plugins on the market. If you are using their website firewall service, then you can set HTTP security headers without writing any code.

    First, you will need to sign up for a Sucuri account. It is a paid service that comes with a server-level website firewall, security plugin, CDN, and malware removal guarantee.

    During sign-up, you will need to answer simple questions, and Sucuri documentation will help you set up the website application firewall on your website.

    After signing up, you must install and activate the free Sucuri plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

    Upon activation, you need to go to Sucuri Security » Firewall (WAF) and enter your Firewall API key. You can find this information under your account on the Sucuri website.

    Sucuri WAF API key

    After that, you will need to click the green ‘Save’ button to store your changes.

    Next, you must switch to your Sucuri account dashboard. From here, click on the ‘Settings’ menu on top and then switch to the ‘Security’ tab.

    Setting HTTP security headers in Sucuri

    From here, you can choose three sets of rules. The default protection will work well for most websites.

    If you have a Professional or Business plan, then you also have options for HSTS and HSTS Full. You can see which HTTP security headers will be applied for each set of rules.

    You need to click the ‘Save Changes in the Additional Headers’ button to apply your changes.

    Sucuri will now add your selected HTTP security headers in WordPress. Since it is a DNS-level WAF, your website traffic is protected from hackers even before they reach your website.

    2. Adding HTTP Security Headers in WordPress Using Cloudflare

    Cloudflare offers a basic free website firewall and CDN service. It lacks advanced security features in its free plan, so you will need to upgrade to its Pro plan, which is more expensive.

    You can learn how to add Cloudflare to your website by following our tutorial on how to set up the Cloudflare free CDN in WordPress.

    Once Cloudflare is active on your website, you must go to the SSL/TLS page in your Cloudflare account dashboard and then switch to the ‘Edge Certificates’ tab.

    Setting up HTTPS security headers in Cloudflare

    Now, scroll down to the ‘HTTP Strict Transport Security (HSTS)’ section.

    Once you find it, you need to click on the ‘Enable HSTS’ button.

    Click the Enable HSTS Button

    This will bring up a popup with instructions telling you that you must have HTTPS enabled on your website before using this feature.

    If your WordPress blog already has a secure HTTPS connection, then you can click on the ‘Next’ button to continue. You will see the options to add HTTP security headers.

    Enable HTTPS security headers in Cloudflare

    From here, you can enable HSTS, apply HSTS to subdomains (if the subdomains are using HTTPS), preload HSTS, and enable no-sniff header.

    This method provides basic protection using HTTP security headers. However, it does not let you add X-Frame-Options, and Cloudflare doesn’t have a user interface to do that.

    You can still do that by creating a script using the Cloudflare Workers feature. However, we don’t recommend this because creating an HTTPS security header script may cause unexpected issues for beginners.

    3. Adding HTTP Security Headers in WordPress Using .htaccess

    This method allows you to set the HTTP security headers in WordPress at the server level.

    It requires editing the .htaccess file on your website. This server configuration file is used by the most commonly used Apache webserver software.

    Note: Before making any changes to files on your website, we recommend making a backup.

    Next, simply connect to your website using an FTP client or the file manager in your hosting control panel. In the root folder of your website, you need to find the .htaccess file and edit it.

    View of Edit the .htaccess File Using an FTP Client

    This will open the file in a plain text editor. At the bottom of the file, you can add some code to add HTTPS security headers to your WordPress website.

    You can use the following sample code as a starting point. It sets the most commonly used HTTP security headers with optimal settings:

    <ifModule mod_headers.c>
    Header set Strict-Transport-Security "max-age=31536000" env=HTTPS
    Header set X-XSS-Protection "1; mode=block"
    Header set X-Content-Type-Options nosniff
    Header set X-Frame-Options DENY
    Header set Referrer-Policy: no-referrer-when-downgrade
    </ifModule>
    

    Don’t forget to save your changes and visit your website to make sure that everything is working as expected.

    Note: Take care when editing code on your website. Incorrect headers or conflicts in the .htaccess file may trigger the 500 Internal Server Error.

    4. Adding HTTP Security Headers in WordPress Using AIOSEO

    All in One SEO (AIOSEO) is the best SEO tool for WordPress and is trusted by over 3 million businesses. The premium plugin lets you easily add HTTP security headers to your website.

    The first thing you will need to do is install and activate the AIOSEO plugin on your website. You can learn more in our step-by-step guide on how to set up All in One SEO for WordPress.

    You then need to head over to the All in One SEO » Redirects page to add the HTTP security headers. First, you will need to click the ‘Activate Redirects’ button to enable the feature.

    Activating Redirects in All in One SEO

    Once redirects are enabled, you need to click on the ‘Full Site Redirect’ tab and then scroll down to the ‘Canonical Settings’ section.

    Simply enable the ‘Canonical Settings’ toggle and then click the ‘Add Security Presets’ button.

    Add Security Presets in AIOSEO

    You will see a preset list of HTTP security headers appear in the table.

    These headers are optimized for security. You can review and change them if needed.

    Security Headers are Added in AIOSEO

    Make sure to click the ‘Save Changes’ button at the top or bottom of the screen to store the security headers.

    You can now visit your website to make sure that everything is working fine.

    How to Check HTTP Security Headers for a Website

    Now that you have added HTTP Security headers to your website, you can test your configuration using the free Security Headers tool.

    Simply enter your website URL and click on the ‘Scan’ button.

    Checking a Website's HTTP Security Headers

    It will then check HTTP security headers for your website and show you a report. The tool will also generate a so-called grade label, which you can ignore as most websites will get a B or C score without affecting user experience.

    It will show you which HTTP security headers are sent by your website and which ones are not included. If the security headers that you wanted to set up are listed there, then you are done.

    We hope this article helped you learn how to add HTTP security headers in WordPress. You may also want to see our complete WordPress security guide and our expert picks for the best WordPress plugins for business websites.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Add HTTP Security Headers in WordPress (Beginner’s Guide) first appeared on WPBeginner.

  • How to Add Cloudflare Turnstile CAPTCHA in WordPress

    Do you want to add Cloudflare Turnstile CAPTCHA in WordPress?

    CAPTCHA and reCAPTCHA can stop spambots, but they’re also unpopular with visitors. By using a non-intrusive technology like Turnstile, you can protect your website from spambots and automated scripts without annoying your visitors.

    In this article, we will show you how to add Cloudflare Turnstile to your WordPress website.

    How to add Cloudflare Turnstile CAPTCHA in WordPress

    Why Add Cloudflare Turnstile CAPTCHA in WordPress?

    Spam is a big problem for all websites including WordPress. Spambots can use non-secure forms to send you spammy links, which will make it more difficult for you to do lead generation.

    They can also try to break into your site’s login form by using brute force attacks or flooding your site with spam comments that’ll damage the visitor experience and your WordPress SEO.

    If you run an online store, then automated scripts may even place fraudulent orders.

    Many website owners use CAPTCHA and reCAPTCHA to block scripts and bots. However, a lot of people complain that these technologies deliver a poor user experience, and some even worry about CAPTCHAs stealing their data.

    With that being said, Cloudflare has introduced Turnstile CAPTCHA. This alternative technology uses a selection of non-intrusive challenges that often run invisibly in the browser. This allows you to protect your website without asking visitors to complete complex puzzles.

    To help keep visitor information private, Cloudflare uses Apple’s Private Access Tokens to test whether the visitor is a real person without collecting extra data.

    If you’re using form builders or WooCommerce, then Turnstile also integrates with these third-party plugins. This allows you to add invisible CAPTCHAs across many different areas of your WordPress website.

    With that in mind, let’s see how you can add Cloudflare Turnstile CAPTCHA in WordPress. Simply use the quick links below to jump between the different steps.

    Install a WordPress Cloudflare CAPTCHA Plugin

    The easiest way to add Cloudflare’s CAPTCHA to WordPress is by using Simple Cloudflare Turnstile. This free plugin allows you to connect your website to the Turnstile service, and then check that it’s responding to your requests correctly.

    First, you’ll need to install and activate the plugin. If you need help, then please see our guide on how to install a WordPress plugin.

    Upon activation, go to Settings » Cloudflare Turnstile.

    Adding a site key and secret key to a WordPress website

    The plugin will now ask you to provide a site key and site secret.

    You can get these for free by clicking on the link next to ‘You can get your site key and secret from here.’

    Get a Cloudflare Turnstile Site Secret and Site Key

    The link will take you to the Cloudflare login page where you can register your domain and create a site key and site secret. This is free, but you will need to create a Cloudflare account using your email address, if you haven’t already.

    Once you’re logged into the Cloudflare dashboard, find ‘Turnstile’ in the left-hand menu and give it a click.

    The Cloudflare dashboard

    This will take you to a screen with some basic information about Cloudflare Turnstile.

    If you’re happy to go ahead, then click on the ‘Add site’ button.

    Adding a site to the Cloudflare dashboard

    On this screen, start by typing in a ‘Site Name.’

    This is just for your reference so you can use anything you want.

    Adding a WordPress website to the Cloudflare dashboard

    Next, type your website’s domain name into the ‘Domain’ field.

    The next step is choosing which CAPTCHA widget you want to create. The first choice is ‘Managed,’ which is the method recommended by Cloudflare. This is where Cloudflare analyzes the browser’s request and then decides what kind of challenge it should run.

    While this is happening, the visitor will see a loading animation.

    Adding a Cloudflare Turnstile CAPTCHA to WordPress

    Wherever possible, Cloudflare will try to run a non-interactive challenge in the background, so the visitor doesn’t have to do anything.

    In this case, the user will simply see a ‘Success’ message when their browser passes the test.

    Creating a managed Cloudflare Turnstile CAPTCHA

    Sometimes, Cloudflare may decide that it’s safer to show an interactive challenge instead. However, the visitor will simply need to check a box rather than complete a puzzle, so it’s still easier than the traditional puzzle-based CAPTCHAs.

    Unless you have a specific reason not to, it’s smart to use managed CAPTCHAs as this gives you a good level of security with minimum impact on the visitor experience.

    How to create a managed CAPTCHA for WordPress

    Don’t want to use interactive challenges on your WordPress website? Then you can choose ‘Non-interactive’ or ‘Invisible’ instead.

    Non-interactive challenges run in the browser so the visitor doesn’t have to take any action. Just like the managed CAPTCHA, visitors will see the loading animation and a ‘Success’ message when the challenge is complete.

    If you choose ‘Invisible’ instead, then the visitor won’t see the animation or success message. This setting allows you to completely hide the CAPTCHA from your visitors, which can avoid confusion and won’t add any clutter to your WordPress theme.

    After making your decision, click on the ‘Create’ button.

    As soon as you’ve done that, Cloudflare will show your site key and secret key.

    Creating a site key and secret key for your WordPress website

    You can now add this information to the plugin’s settings on your website.

    Add Cloudflare Turnstile CAPTCHA to Your WordPress Website

    In your WordPress dashboard, head back to Settings » Cloudflare Turnstile. You can now go ahead and add the ‘Site Key’ and ‘Site Secret’ to your WordPress dashboard.

    Adding the Cloudflare secret key and site secret to WordPress

    After that, you may want to customize how the CAPTCHA looks on your website, and how it acts. To start, you can open the ‘Theme’ dropdown and choose from light, dark, or auto.

    The following image shows an example of how the ‘Dark’ theme looks in the WordPress comment section.

    A Cloudflare Turnstile CAPTCHA with a dark theme

    By default, Cloudflare Turnstile shows a ‘Please verify that you are human’ message to visitors. You may want to change this. For example, you might briefly explain why the CAPTCHA is so important, or that it will only take a few seconds to complete.

    To add your own wording, simply type into the ‘Custom Error Message’ field.

    Creating a custom error message for a WordPress CAPTCHA

    After that, you can select the forms where you’ll use the Cloudflare Turnstile CAPTCHA.

    The options you see may vary depending on the plugins you’ve installed, but by default, you can use Turnstile with all the built-in WordPress forms. This includes the login page, user registration form, and password reset page.

    Enabling Cloudflare Turnstile CAPTCHA for the WordPress forms

    When you’re happy with the information you’ve entered, scroll to the bottom of the screen and click on ‘Save Changes.’

    Now, if you visit your website you’ll see the Turnstile CAPTCHA in action.

    Bonus: Add Turnstile CAPTCHA to Your WordPress Forms

    WordPress comes with different built-in forms, but you’ll often want to create custom forms. For example, you might replace the default forms with professionally-designed alternatives that better suit your website.

    You can also add forms that are missing from the core WordPress software, such as contact forms and online order forms.

    Simple Cloudflare Turnstile integrates with the best contact form plugins for WordPress including WPForms and Formidable Forms. This allows you to add the same advanced CAPTCHAs to all your forms, no matter how you created them.

    How to add a CAPTCHA to a WordPress contact form

    To add a CAPTCHA to any WPForms or Formidable Forms page, simply go to Settings » Cloudflare Turnstile in your WordPress dashboard.

    At the bottom of the page, you should see a section for either WPForms or Formidable Forms, depending on which plugin you’re using.

    Integrating Cloudflare with WPForms and Formidable Forms

    Simply click on either of these sections to expand.

    To add the CAPTCHA to all your forms, just check the ‘Enable on all…’ box.

    Enabling CAPTCHA for WPForms

    If you’re using a ‘Managed’ or ‘Non-interactive’ CAPTCHA, then you can change whether the loading and success animation appears before or after the form’s ‘Submit’ button.

    In the following image, we’re using the ‘After button’ option.

    Changing where the CAPTCHA appears in WPForms

    To make this change, simply open the ‘Widget Location’ dropdown.

    Then, choose either ‘Before Button’ or ‘After Button.’

    Changing the location of the CAPTCHA widget

    Some forms may not need a CAPTCHA. For example, you might disable the CAPTCHA for forms that aren’t getting many conversions, to see whether this improves your conversion rates. For more information, see our guide on WordPress conversion tracking made simple.

    To remove the CAPTCHA, you’ll need to type the form’s ID into the ‘Disable Form IDs’ field.

    Removing the CAPTCHA from WPForms

    If you’re using WPForms, then you can get this ID by going to WPForms » All Forms.

    The ‘Shortcode’ column shows each form’s ID. For example, in the following image the form ID is 62.

    How to disable CAPTCHAs on your WordPress website

    If you’re a Formidable Forms user, then head over to Formidable » Forms instead.

    On this screen, find the form that you want to exclude and make a note of the number in the ‘ID’ column.

    Forms, created using the Formidable Forms WordPress plugin

    You can now add these IDs to the ‘Disable Form IDs’ field.

    To remove the CAPTCHA from multiple forms, simply separate each ID with a comma.

    Disabling the Cloudflare CAPTCHA for multiple forms

    When you’re happy with how you’ve set up the integration, don’t forget to click on ‘Save Changes’ to store your settings.

    Now if you visit any form created using Formidable Forms or WPForms, you’ll see the Cloudflare Turnstile CAPTCHA in action.

    Bonus: Add Cloudflare Turnstile CAPTCHA to WooCommerce

    Scripts and bots aren’t just bad news for WordPress blogs and websites. If you run an online store, then spambots and automated scripts might try to register with your store and place fake orders.

    Every transaction comes with processing feeds, so fake orders can cost you a lot of money and make it difficult to grow your business.

    The good news is that Cloudflare Turnstile also integrates with WooCommerce. This allows you to protect all your eCommerce pages including the WooCommerce login, signup, and checkout pages.

    The Cloudflare Turnstile CAPTCHA on the WooCommerce checkout page

    To add Cloudflare Turnstile to your WooCommerce pages, simply go to Settings » Cloudflare Turnstile.

    Then, scroll to the ‘WooCommerce Forms’ section.

    Adding CAPTCHAs to your WooCommerce forms

    If it isn’t already expanded, then click on this section.

    You’ll now see all the WooCommerce pages where you can add a Cloudflare CAPTCHA. Simply check the box next to each page that you want to protect.

    Protecting your WooCommerce store with a CAPTCHA

    After that, don’t forget to click on ‘Save Changes’ to store your settings. Now, if you visit any of your WooCommerce pages, you’ll see the Cloudflare Turnstile CAPTCHA.

    We hope this article helped you learn how to add Cloudflare Turnstile CAPTCHA in WordPress. You can also go through our ultimate WordPress security guide and the best WordPress membership plugins.

    If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

    The post How to Add Cloudflare Turnstile CAPTCHA in WordPress first appeared on WPBeginner.