--- title: "How to Build a Cookie Banner in WordPress?" url: https://nexterwp.com/docs/build-cookie-banner-wordpress-nexter-blocks/ date: 2026-10-21 modified: 2026-10-28 lang: en author: "Aditya Sharma" description: "What It Does The Cookie Consent block is your cookie banner and its preferences window. You place it and style it in the block editor like any other block. Nexter..." word_count: 1072 --- # How to Build a Cookie Banner in WordPress? ## Key Takeaways - The Cookie Consent block works as both the cookie banner and the preferences window, while Nexter Extension supplies the categories and holds scripts until the visitor chooses. - Nexter Extension saves the visitor’s choice and releases the allowed scripts, and the close icon counts as a reject instead of dismissing the banner without a decision. - Cookie Consent offers 14 presets, 5 positions and controls for the overlay, heading, privacy policy link, Accept, Reject and Preferences buttons, plus button order and mobile layout. - Nexter Blocks and Nexter Extension must both be active with Cookie Consent switched on; only one banner shows per page, and the Compliance Check looks for a Reject button on the homepage. ## What It Does The Cookie Consent block is your cookie banner and its preferences window. You place it and style it in the block editor like any other block. Nexter Extension supplies the categories and holds the scripts. ## Why It Matters A banner that does not match your site gets ignored or removed, and a banner that only records a click does nothing for visitors. Here the banner is the visible half of a working consent system: what the visitor chooses decides which scripts load. The block also keeps the choices fair, because Reject can sit beside Accept and the close icon counts as a rejection. ## What You Get - A banner that appears once for each visitor until they choose.- A preferences window with one switch for each category.- An editor preview with a Banner view and a Preferences view, so you can check both before you publish. ![A cookie banner at the bottom of a web page with a heading, a message, and the Reject All, Customize and Accept All buttons](https://nexterwp.com/wp-content/uploads/2026/10/nexter-cookie-consent-banner-frontend.webp)The default banner on the front end. ![The cookie preferences window with switches for Strictly Necessary, Functional, Analytics and Marketing, and the Reject All, Accept All and Save preferences buttons](https://nexterwp.com/wp-content/uploads/2026/10/nexter-cookie-consent-preferences-window-frontend.webp)The preferences window a visitor sees after clicking Customize. ## Capabilities - Choose a design from 14 presets: Minimal, Card, Focus, Contrast, Classic, Soft, Bold, Compact, Enterprise, Editorial, Floating, Split, Sheet and Full Width.- Place the banner in one of 5 positions: a bar at the bottom or the top, a box at the bottom left or bottom right, or a centered modal.- Dim the page behind the banner with an overlay.- Add a heading, edit the consent message, and show a privacy policy link.- Show or hide the Reject and Preferences buttons, edit every button label, and set the button order.- Stack the buttons in a column on small screens.- Add a close icon that records a rejection.- Style the banner, content, buttons, preferences window, category list, close icon and overlay from the Style tab. ## How It Works - **The block is the design. Nexter Extension is the engine.** The block draws the banner and the preferences window. Nexter Extension decides when to show them, saves the visitor's choice, and releases the scripts that choice allows.- **The banner stays hidden until needed.** It shows only to a visitor who has not yet chosen, or whose choice is out of date.- **A preset only sets the look.** It sets colours, spacing and shape. It does not set the position, which has its own setting.- **The close icon counts as a rejection.** Closing the banner never dismisses it silently, because that would leave scripts held back with no choice made.- **Category names come from Nexter Extension.** The names and the Strictly Necessary lock are set under Nexter > Nexter Extension > Security and cannot be edited per page.- **On small screens**, the two box positions stretch to the full width of the screen. ## How to Use It > **Before you start:** Nexter Blocks and Nexter Extension must both be active, and Cookie Consent must be switched on. Follow the [setup guide](https://nexterwp.com/docs/cookie-consent/) first. If the feature is off, the banner does not show on your site. - Open the page, template or footer where the banner should live. A footer or a site-wide template part is the usual choice, because the banner then appears on every page.- Click the **+** inserter, search for **Cookie Consent**, and add the block. ![Block inserter searched for Cookie, showing the Cookie Consent, Cookie Declaration and Cookie Preferences Button blocks](https://nexterwp.com/wp-content/uploads/2026/10/nexter-cookie-consent-block-inserter-search.webp)Search for Cookie in the block inserter. - In the **Layout** tab, open **Position & Preset**. Choose a **Preset** and a **Position**.- Turn on **Overlay Background** if you want the page dimmed behind the banner. Turn on **Close Icon** if you want a close button. ![Cookie Consent block settings on the Layout tab with the Position and Preset panel open, showing Preset, Position, Overlay Background and Close Icon](https://nexterwp.com/wp-content/uploads/2026/10/nexter-cookie-consent-block-position-preset-panel.webp)The Position and Preset panel. - Open **Message**. Turn on **Heading** and edit the **Heading Text** if you want a title. Edit the **Consent Message**.- To show a policy link, turn on **Privacy Policy Link**, then set the **Link Text** and **Link URL**. If you leave the URL empty, the block uses the Privacy Policy page set under Settings > Privacy. With neither, the link is not shown. ![Cookie Consent block settings with the Message panel open, showing Heading, Heading Text, Consent Message and Privacy Policy Link](https://nexterwp.com/wp-content/uploads/2026/10/nexter-cookie-consent-block-message-panel.webp)The Message panel. - Open **Buttons**. Edit the **Accept Button** text, and choose whether to show a **Reject Button** and a **Preferences Button**, with their text. **Button Order** sets the sequence. **Stack On Mobile** puts the buttons in a column on small screens. ![Cookie Consent block settings with the Buttons panel open, showing Accept Button, Reject Button, Preferences Button, Button Order and Stack On Mobile](https://nexterwp.com/wp-content/uploads/2026/10/nexter-cookie-consent-block-buttons-panel.webp)The Buttons panel. - If the Preferences Button is on, open **Preferences Modal** to set the **Modal Title**, **Modal Intro**, **Save Button** text, **Accept All In Modal** and **Category Descriptions**. ![Cookie Consent block settings with the Preferences Modal panel open, showing Modal Title, Modal Intro, Save Button, Accept All In Modal and Category Descriptions](https://nexterwp.com/wp-content/uploads/2026/10/nexter-cookie-consent-block-preferences-modal-panel.webp)The Preferences Modal panel. - Use the **Banner** and **Preferences** switch at the top of the block to preview both views.- Open the **Style** tab to adjust size, colours, typography and spacing.- Publish or update, then open your site in a private window to see the banner. ## Use Cases - **One banner for the whole site.** Place the block in your footer or a template part. It appears on every page, and only one banner shows on any page.- **A clear yes-or-no moment.** Choose the Centered modal position with Overlay Background on, so the visitor decides before they read on.- **A small footprint.** Choose the Compact preset with a bar position, for sites where the banner should take little space.- **A visitor who wants detail.** Keep the Preferences Button on, so visitors can switch each category on or off in the preferences window. ## Limitations - **Only one banner shows per page.** If you add the block in your footer and again on a page, the second one stays empty.- **Keep Reject as easy as Accept.** If you hide the Reject Button, visitors can only decline through the preferences window, so keep the Preferences Button on. The Compliance Check looks for a Reject button on your front page.- **The block needs Nexter Extension.** With Cookie Consent switched off, the editor still shows a preview, but your site shows nothing. The editor does not warn you.- **Category names are not editable here.** Change them in Nexter Extension.- **The Advanced tab** holds Nexter's shared layout and background controls, which are not specific to cookies. ## Troubleshooting ### The Banner Shows in the Editor but Not on My Site Switch on the Cookie Consent card under **Nexter > Nexter Extension > Security**. Also check that you have not already answered in this browser. The banner stays hidden for visitors who have chosen, so test in a private window. ### The Banner Is in the Wrong Place Position is set separately from the preset. Change **Position** in **Position & Preset**. ### I See Two Banners Another cookie plugin is probably active. Open the **Compliance Check** tab. The row **No other cookie-consent plugin active** lists any other consent plugin it finds. Keep one. ### There Is No Reject Button Turn on **Reject Button** in the **Buttons** panel. Related guides: [set up Cookie Consent](https://nexterwp.com/docs/cookie-consent/), [block third-party scripts until consent](https://nexterwp.com/docs/hold-third-party-scripts-until-cookie-consent/) and [read the Compliance Check](https://nexterwp.com/docs/cookie-consent-compliance-check/). ## Frequently Asked Questions **Q: Why is my cookie banner showing in the editor but not on the live site?** A: That usually means Cookie Consent is switched off under Nexter > Nexter Extension > Security, or you already answered in that browser. Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter shows a preview in the editor even when the front end is disabled. Test in a private window so an old choice does not hide the banner. **Q: What is the best place to add a cookie banner on a WordPress site?** A: A footer or a site-wide template part is the cleanest choice because the banner then appears on every page. The page also notes that only one banner should show per page, so placing it globally avoids duplicates and keeps consent consistent. That matters because the banner is the visible half of the consent system and should be present wherever scripts might load. **Q: How do I stop two cookie banners from appearing on the same page?** A: Two banners usually mean another cookie plugin is active or the block was added twice. The Compliance Check tab includes a row called No other cookie-consent plugin active, which helps identify competing consent tools. Keep one consent system only, because duplicate banners confuse visitors and can break the flow where one choice controls which scripts load. **Q: Should I hide the Reject button on a cookie banner?** A: Keeping Reject visible is the safer setup because the page says Reject can sit beside Accept and the close icon counts as a rejection. If you hide Reject, visitors can only decline through the preferences window, so leaving Preferences on becomes more important. The Compliance Check also looks for a Reject button on your front page. **Q: What should I use for a clear yes-or-no cookie consent prompt?** A: The Centered modal position with Overlay Background on is the strongest choice when you want visitors to decide before reading on. That setup puts attention on consent instead of letting people scroll past it. Nexter Extension handles when it appears and which scripts stay blocked until a choice is made, so this format works well for a more deliberate first decision. **Q: Can I use this cookie banner with major page builders?** A: Nexter is built to work alongside major page builders, and the Cookie Consent block itself is placed in WordPress like any other block. The tutorial also says you can add it in a footer or template part, which makes it practical for site-wide use without changing your whole layout. For setup details, use [set up Cookie Consent](https://nexterwp.com/docs/cookie-consent/).