Beautiful Cookie Banner

How to add a cookie banner to a WordPress website

This guide adds a cookie consent banner to a WordPress website with the free Beautiful Cookie Banner plugin. It takes about ten minutes: install the plugin, turn the banner on, choose what visitors can consent to, adjust the design and texts, connect your tracking tools and test the result.

Other plugins work in a similar way. If you are still deciding which one to use, see how to choose a WordPress cookie banner plugin.

Before you start

  • Make a list of the tools on your site that set cookies or send data to others: analytics, ads, chat widgets, embedded videos and maps.
  • Have the URL of your privacy policy page ready. The banner links to it.
  • Decide which consent options you need. This depends on your website and the rules that apply to it; this guide is not legal advice.

Step 1: Install the plugin

  1. In the WordPress admin, go to Plugins and click Add New Plugin (Add New in older WordPress versions).
  2. Search for Beautiful and responsive cookie consent. In the results, the plugin is called Beautiful Cookie Consent Banner.
  3. Click Install Now, wait a moment, then click Activate.
Add Plugins screen in the WordPress admin with an arrow pointing to the plugin search field
Search result for Beautiful and responsive cookie consent with the Install Now button

You can also download the plugin from WordPress.org and upload it under Plugins, Add New Plugin, Upload Plugin.

Step 2: Turn the banner on

Open the settings under Settings, Cookie Consent Banner, or click Settings below the plugin name in the plugin list.

Plugin list after activation with an arrow pointing to the Settings link of Beautiful and responsive cookie consent

In the General tab, tick Enable Cookie Banner and click Save Changes. With Preview Banner ticked, the banner also appears in the settings, so you can see every change right away.

General tab of the Beautiful Cookie Banner settings with the Enable Cookie Banner checkbox ticked

In the Compliance & Behaviour tab, the Compliance Type decides what visitors can choose:

  • Just tell the user we use cookies: a notice with one button.
  • Ask user to Opt-in: Deny and Allow buttons; the choice is "denied" until the visitor accepts.
  • Ask user to Opt-out: the choice is "allowed" until the visitor declines.
  • Differentiated Consent (with one, two or three buttons): visitors choose per category, for example Technical and Marketing.
Compliance Type dropdown in the Compliance and Behaviour tab of the Beautiful Cookie Banner settings

The differences, with examples of each banner: cookie banner consent types explained. In the same tab you can make all buttons look the same and change the order of the buttons.

Step 4: Design: theme, position and colors

In the Appearance tab:

  • Theme: Block, Classic or Edgeless.
  • Position: a bar at the top or bottom, a box in one of the four corners, or centered.
  • Colors for the banner, its text and the buttons, as hex values (#237afc) or rgba.
  • Block Page, if Banner shown: visitors can only use the page after they have made a choice.
Theme and Position dropdowns in the Appearance tab of the Beautiful Cookie Banner settings

In the Text tab, write the banner text and the button labels. Set ‘Learn More’ Link to the URL of your privacy policy and give the link a clear text, for example "Privacy policy". The banner text can contain simple HTML such as <strong> and links.

Visitors must be able to change their choice later. The Cookie Settings Tab tab controls the small tab that reopens the banner. Instead of the tab, you can place a link anywhere, for example in your footer, with the shortcode Manage cookie settings.

Step 6: Connect your tracking tools

The banner asks for consent and stores the visitor’s choice. Your analytics and ads scripts still have to respect it. With the free plugin you have three options:

The Premium add-on adds Google Consent Mode v2, service blocking (beta), Microsoft Clarity and Microsoft UET. See Free vs Premium.

Step 7: Test it

  1. Open your website in a private window, or log out and delete your site’s cookies, so you see it like a first-time visitor.
  2. Check that the banner appears and that the texts, buttons and privacy link are right, also on your phone.
  3. Click Deny. In the developer tools (F12), check under Application, Cookies that no analytics or marketing cookies were set.
  4. Reopen the banner with the settings tab or your link, accept, and check that your tools now load.
  5. If you use a caching or optimization plugin, clear its cache and test again. See problems with speed optimizer and caching plugins.

If you use Google Analytics or Google Ads with Consent Mode, follow how to test Google Consent Mode v2. To be notified when the banner stops working, set up an automated cookie banner test.

Next steps