---
title: "How to Add Close Button in Alert Box/Message Box in WordPress?"
url: https://nexterwp.com/docs/add-close-button-in-alert-box-message-box-in-wordpress/
date: 2024-12-04
modified: 2026-09-28
lang: en
author: "Aditya Sharma"
description: "A notice that cannot be dismissed follows the visitor down the page whether they have read it or not. The close button puts a small cross on the message box..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Close-Button-in-Alert-BoxMessage-Box-in-WordPress-1024x519.jpg
word_count: 641
---

# How to Add Close Button in Alert Box/Message Box in WordPress?

## Key Takeaways

- Nexter Blocks Message Box block adds a close button to WordPress alert boxes or message boxes.
- Close Icon toggle enables the close button after the title and description are added in the Message Box block.
- Select Close Icon section lets the user choose the icon that appears as the close button in the alert box.

A notice that cannot be dismissed follows the visitor down the page whether they have read it or not.

The close button puts a small cross on the message box so the visitor can put it away — with one important limit, measured below.

*For every External Form Styler setting in one place, see the [main Message box guide](https://nexterwp.com/docs/add-a-message-box-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-message-box/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Message box, switched on under **Nexter > Blocks** in your WordPress dashboard.

## Video Tutorial

## Steps

- Select the **Message box** block on your page.

- Switch **Dismiss** on. It is already on in a new block.

- Choose the close **icon** — the default is a circled cross.

- Style its colour and size so it is visible against the box background.

- Publish the page and click the close button on the real page — it does not close in the editor.

> ***Closing is not remembered.** Measured on a published page: clicking the close button collapses the box to zero height and hides it, but it stays in the page's HTML — and after a reload the box is back. A visitor who returns, or simply refreshes, sees the message again.*

## How It Behaves

The Message box is a single styled box with up to four parts — an icon, a title, a description and a button — plus an optional close button. It is the block to reach for when a page needs a notice that stands apart from the body text.

- **Measured, clicking it collapses the box.** The box went from 55 pixels tall to 0 and its display was set to none.- **The box stays in the page's HTML.** Measured: it is hidden, not removed — which is why the space closes up smoothly rather than jumping.- **Closing is not remembered.** Measured on a published page: clicking the close button collapses the box to zero height and hides it, but it stays in the page's HTML — and after a reload the box is back. A visitor who returns, or simply refreshes, sees the message again.- **It is on by default.** Measured on a new block: the close button is already switched on, so it has to be switched off if you do not want it.- **The close icon is your choice** — whatever icon you pick is rendered as the close control.

## Limitations

- **Closing is not remembered.** Measured on a published page: clicking the close button collapses the box to zero height and hides it, but it stays in the page's HTML — and after a reload the box is back. A visitor who returns, or simply refreshes, sees the message again. If you need a notice that stays dismissed, this block cannot do it on its own.- **It does not work in the editor** — the dismiss behaviour runs on the published page only.- The whole box closes; individual parts cannot be dismissed separately.- Closing is instant and cannot be undone by the visitor without reloading.

## Troubleshooting

### The message comes back every time the page loads

That is how it works. Measured: the dismissal is not stored, so a reload or a later visit shows the message again.

### Nothing happens when I click the close button

Check you are on the published page rather than the editor. Measured: the close behaviour runs on the front end only.

### I cannot see the close button

It may be the same colour as the box background. Set its colour explicitly, or check the **Dismiss** toggle is on.

### I want the box gone for good

Switch **Dismiss** off and remove the block when the notice is no longer needed — the close button hides it for the visitor, not for the page.

## Related Docs

- [Add a message box in WordPress](https://nexterwp.com/docs/add-a-message-box-in-wordpress/)- [Create an alert box in WordPress](https://nexterwp.com/docs/create-an-alert-box-in-wordpress/)- [Add a button in a message box](https://nexterwp.com/docs/add-a-button-in-a-wordpress-message-box/)