Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to Add a Custom Alert Message WordPress

How to Add a Custom Alert Message to WordPress 

Written By: author image Stacey Corrin
author image Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
     Reviewed By: John Turner
reviewer image John Turner
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

Do you want to add an alert message to your WordPress website?

With a custom alert message, you can inform visitors about important updates, notifications, or errors. However, the default WordPress features may not always be sufficient for the type of alert you want to display.

Fortunately, adding custom alert messages to WordPress is a simple process that can enhance the user experience of your website. In this article, we will explore the steps required to add a custom alert message in WordPress.

What Is an Alert Message in WordPress?

An alert message is a message that appears on your WordPress website to inform visitors about important updates, notifications, or errors. You can show them in various locations on your site, such as the header, footer, sidebar, or inside blog posts and pages.

WordPress provides default alert messages for various events, such as when a user successfully logs in or when there is an error submitting a contact form. These default alert messages are designed to be informative and user-friendly but may not always be sufficient for your website’s specific needs.

Why Add an Alert Message to Your WordPress Site?

Adding custom alert messages to WordPress allows you to display messages tailored to your specific requirements.

For example, you may want to inform users about a new feature on your website or provide them with a discount code for an eCommerce product. Similarly, you may want to warn users about items still in their shopping carts and show a success message after successfully checking out.

checkout warning alert message

By adding custom alert messages, you can enhance the user experience on your website, communicate important information to your audience, and increase urgency to encourage them to act.

How to Add a Custom Alert Message to WordPress

There are several ways to add a custom alert message to WordPress. You can manually code the functionality, install a WordPress notification bar plugin, use a popup plugin, or try notification software. Today, we’ll show you how to use 2 of the easiest methods: using a WordPress page builder plugin and powerful popup software.

Both solutions are super easy, don’t require technical knowledge, and you won’t need to use custom CSS, HTML, PHP, Javascript, or any other code.

Let’s dive in!

Method 1: Creating a WordPress Alert Message with SeedProd

For the first method, we’ll use SeedProd. With over 1 million users, it’s the best page builder plugin for WordPress.

SeedProd WordPress website builder

SeedProd has a powerful drag-and-drop interface that makes it a breeze to add new layouts to WordPress. With its professional template library and block-based design system, you can add custom alert messages and widgets anywhere on your site in minutes.

You can also use SeedProd to:

So if you’re ready to get started, follow the steps below to create a custom alert message in WordPress with SeedProd. 

Step 1. Install and Activate SeedProd

The first thing you’ll need to do is visit SeedProd’s pricing page and download the plugin. If you need help with this, you can follow our documentation on installing SeedProd.

Note: SeedProd has a free version; however, we’ll use SeedProd Pro for the Alert Box feature.

After activating the plugin, go to SeedProd » Settings and paste your license key into the license box.

enter your license key

You can find the license key in your account dashboard on the SeedProd website. After entering your key, click the Verify Key button.

Next, you’ll need to decide on the type of layout you want to create. With SeedProd, you can either create individual WordPress pages with the Landing Page Builder or make custom WordPress themes with the Theme Builder.

If you want to continue using your current WordPress theme, we recommend the Landing Page Builder option. However, if you want to replace your theme and add Alert boxes to your header, footer, sidebar, and other theme templates, the Theme Builder is the best choice.

For this tutorial, we’ll use the Theme Builder option. But if you want to make a landing page, you can follow this guide on how to create a landing page in WordPress.

Pro tip: You can use the Alert Box feature with both options.

Step 2. Choose a Premade Template

Since we’re going with the Theme Builder option, the next step is to visit the SeedProd » Theme Builder page. On that page, you’ll need to click the Theme Template Kits button to choose a pre-made website layout.

Theme template kits

You’ll immediately see a library of website kits you can add to your site with a single click. Using the top bar filters, you can sort the templates by popularity, newness, WooCommerce, and more.

SeedProd template kits

When you find a template you like, hover over it and select the checkmark icon to add it to your WordPress site. In a few seconds, SeedProd will import the whole template, including specific pages and content from the demo.

Choose a custom template

From there, you’ll see the individual parts that make up your theme in your WordPress dashboard. You can customize any theme part by hovering over it and clicking the Edit Design link.

SeedProd theme parts

For example, with the help of the tutorials below, you can:

Moreover, you can customize individual pages, such as your About, Contact, and Services page. Simply visit Pages » All Pages and click the Edit with SeedProd link beside the page you want to customize.

To get started, we’ll show you how to add an alert message to your WordPress homepage. So go ahead and hover over the Homepage template and click the Edit Design link.

edit home page

Step 3. Add the Alert Message Block

When you open the template, you’ll see SeedProd’s drag-and-drop page builder. It will have WordPress blocks and settings on the left and a live preview of your homepage on the right.

SeedProd page builder interface

You can click anywhere on the preview to customize the template content and see the changes in real-time. Additionally, you can drag new WordPress blocks from the left-hand panel onto your page to add more features and functionality.

That’s how we’ll add an alert message to the homepage. Simply find the Alert block in the Advanced blocks panel, and drag it wherever you want to show your alert message.

SeedProd alert block

Once the block is in place, you can customize how it looks and the message it will show to your website visitors.

First, click the ‘Type’ dropdown menu and choose an alert type, such as Info, Success, Warning, or Danger.

alert box type options

Next, give your alert a title. You can also enable or disable the close button, which lets users dismiss the message.

WordPress alert message title

Now enter a description for your alert to give users more information. Below that, you can change the title and description, size, alignment, and heading level.

Alert message WordPress description

To make the alert stand out, you can add a custom icon. SeedProd has hundreds of Font Awesome icons, so plenty of options exist.

WordPress alert message icon

If you want to use custom colors for your alert message, click the Advanced tab in the block settings. Here you can edit the typography, change the colors for the description, title, and background colors, and select a text-shadow.

Advanced alert block settings

In the same panel, you can edit the block spacing, visibility and even add an animation to make it more eye-catching.

Alert message animations

Make sure you click the Save button before you customize any other pages.

Save SeedProd changes

Alert messages are a fantastic way to draw attention to other areas of your site. For instance, in the screenshot below, we added a success message to the order confirmation page of an online store.

order confirmation alert message WordPress

So get creative with custom notifications, then follow the final step to make them live on your website.

Step 4. Publish Your Changes

After editing any SeedProd theme template, you’ll need to enable the theme to show the changes on your live website. To do this, exit the page builder and head back to the Theme Builder dashboard.

From there, find the Enable SeedProd Theme toggle and switch it to the green ‘Yes’ position.

enable seedprod theme

Now you can visit your website and see your alert message in action!

Alert message WordPress example

Method 2: Creating an Alert Bar with OptinMonster

Another way to add an alert message to your WordPress site is by creating an alert notification bar. The alert bar will sit at the top or bottom of your website and display a custom message to visitors.

For this method, we’ll use OptinMonster, the best conversion optimization software on the market. With its easy-to-use interface, it helps you convert site visitors into subscribers and customers.

optinmonster conversion optimization toolkit

OptinMonster has several opt-in types, including lightbox popups, welcome mats, countdown timers, and more, helping you increase subscribers and sales on your website. It also offers unlimited notification types and add-ons for various email marketing services and APIs.

Plus, as we mentioned above, you can use OptinMonster to make an alert message bar for your website. The software has countless pre-built templates. This makes it super easy to create a great-looking alert bar in minutes.

Here’s the one we’ll make in this tutorial:

OptinMonster alert bar

Let’s get started!

Step 1. Install and Activate OptinMonster

First, head over to the OptinMonster website and sign up for your account.

Next, install and activate the OptinMonster WordPress plugin. For help with this, you can visit this guide on how to install a WordPress plugin.

The OptinMonster plugin lets you easily connect your website to the software with a few clicks.

After activating the plugin, you’ll need to connect your account. To do this, go to OptinMonster » Settings from your WordPress admin.

From there, click the Connect an Existing Account button.

Connect your OptinMonster account

A window will pop up asking for you to enter your email address. Once you’ve added your email, click the Connect to WordPress button.

Connect OptinMonster to WordPress

Step 2. Choose a Floating Bar Template

After connecting your OptinMonster account, head to OptinMonster » Campaigns from your WordPress dashboard. Now you can click the Create Your First Campaign button.

Create first OptinMonster campaign

OptinMonster will give you a choice of choosing a premade template or using their playbooks, which replicate successful campaigns from genuine brands. For this guide, we’ll select the Templates option.

Choose campaign options

On this page, choose the Floating Bar as the Campaign Type to create your alert bar.

Floating bar campaign type

Next, you’ll see a selection of different campaign templates. To choose a template, hover over it and click the Use Template button.

Alert floating bar template

We’ll use the ‘Alert’ template for our alert bar.

After selecting the template, you’ll see a prompt asking you to name your campaign. Once you’ve entered your name, click the Start Building button.

floating alert bar name

Step 3. Customize Your Alert Message Bar

On the next screen, you’ll see OptinMonster’s campaign editor. This is where you can design and customize your alert message.

You’ll see the alert bar appears at the top of your screen by default. To change the text on the floating bar, click on the area you want to edit and type your custom message.

Customize alert bar text

You can also change the font, font size, color, and more.

If you want to add more urgency to your alert bar, you can drag over the Countdown block and drop it onto the floating bar.

Add alert bar countdown timer

From there, you can select the timer on the template, customize its settings and enter your desired end date and time.

Countdown timer settings

You can also set the timer as an evergreen countdown. An evergreen countdown is set separately for each visitor to your website.

Once you’re happy with your alert bar, click the Save button at the top of your screen.

Step 4. Configure Your Display Settings

The next step is to go to the ‘Display Rules’ tab and select when and where to display your bar. The default rule displays the bar after a visitor has been on the page for 5 seconds.

OptinMonster display rules

We’ll change this to 0 seconds so an alert message appears instantly. To do that, just change the ‘sec’ countdown to 0.

Once you’ve done that, click the Next Step button to change the Action settings. You can leave the ‘show the campaign view’ dropdown set to Optin and select if you want to play a sound effect when the alert bar appears.

Campaign action settings OptinMonster

After making those changes, click the Next Step button. On the following page, you’ll see a summary of your campaign.

If you’re happy with the settings, click the Save button.

Step 5. Publish Your Alert Bar

The next step is to switch to the Publish tab and change the publish status to Publish.

Publish OptinMonster campaign

The last step is to activate the campaign on your WordPress site.

To do that, close the campaign editor and go to OptinMonster » Campaigns. You’ll see your campaign in the list, and the Status will be Pending.

Activate alert bar in WordPress

To change it, click the Pending status and select Publish from the dropdown menu.

Now you can visit any page on your website and see your alert bar in action.

Floating alert bar WordPress example

That’s it!

We hope this article helped you learn how to create an alert message in WordPress. If you’re looking for another way to gather feedback, take a look at the UserFeedback plugin. It’s super easy to use and lets you add stylish popup forms in minutes.

Before you leave, you might also like these guides on how to add Google Analytics to WordPress and the best WordPress hosting providers.

Thanks for reading! We’d love to hear your thoughts, so please feel free to leave a comment with any questions and feedback.

You can also follow us on YouTubeX (formerly Twitter), and Facebook for more helpful content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Add A Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.