{"id":114238,"date":"2021-01-20T14:07:00","date_gmt":"2021-01-20T20:07:00","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=114238"},"modified":"2024-01-11T13:55:31","modified_gmt":"2024-01-11T19:55:31","slug":"wordpress-alert-box","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/","title":{"rendered":"How to Create Alert Boxes in WordPress"},"content":{"rendered":"\n

If your website gets a solid number of visitors, but signups or conversions are lower than you\u2019d like, you\u2019re not alone. There are tons of resources available to help increase your traffic<\/a>\u2014but getting that traffic to take the right actions on your site is another story.\u00a0\u00a0<\/p>\n\n\n\n

One possible solution is using an alert box. This is a powerful and simple tool that can dramatically increase conversions on your WordPress site. What\u2019s more, it\u2019s very easy to create and customize this feature.<\/p>\n\n\n\n

In this article, we\u2019ll cover what an alert box is and why you should use one. Then we\u2019ll show you how to make your own alert box in WordPress. Let\u2019s dive in!<\/p>\n\n\n\n\n\n

What Is an Alert Message?<\/h2>\n\n\n\n

An alert message is exactly what it sounds like. It\u2019s an alert that appears on a website to notify visitors that something has occurred. You may know this feature better as a \u201cpopup\u201d or \u201calert box.\u201d<\/p>\n\n\n\n

Alert boxes in WordPress usually take one of two forms. You may see a popup that appears on the screen, or a bar that runs along the top of your page (sometimes called a \u201chello bar\u201d).<\/p>\n\n\n\n

Why Create an Alert Message?<\/h2>\n\n\n\n

Alert messages are typically used to notify (or alert) users of something important happening on your site. For example, you might use a WordPress alert box to let visitors know about a special sale on a product they might not see otherwise, or of a series of featured posts<\/a>.<\/p>\n\n\n\n

Another very common use for this feature is to capture visitor email addresses. Many WordPress alert box plugins can be set to pop up when a user moves their cursor away from the site (to close the tab or press the back button, for example).<\/p>\n\n\n\n

These \u201clast-minute\u201d alerts can be a great way to capture the contact details of visitors before they leave, potentially resulting in a conversion down the road<\/a>. These alerts can be extremely effective\u2014the best-performing popups have a conversion rate of over 9 percent<\/a>. In other words, they\u2019re well worth the effort to implement.\u00a0<\/p>\n\n\n\n

Creating an Alert Message With a Plugin<\/h2>\n\n\n\n

Thanks to WordPress plugins, creating your own alert boxes is simple. We\u2019ll walk you through every step using the powerful (and free) Popup Maker plugin<\/a>.<\/p>\n\n\n\n

Step 1: Download a Plugin (Such as Popup Maker)<\/h3>\n\n\n\n

The first thing you\u2019ll need to do is pick up a dedicated plugin. As we mentioned above, the free Popup Maker plugin is well-reviewed and a solid choice.<\/p>\n\n\n\n

To install this tool, head to your WordPress dashboard and navigate to Plugins > Add New<\/em>. Search for \u201cpopup maker,\u201d and it should be the first entry:<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Then click on Install Now<\/em>. When it\u2019s finished installing, don\u2019t forget to activate the plugin by selecting Activate<\/em>. Note that while Popup Maker itself is free, some features require a premium plan<\/a> to use.<\/p>\n\n\n\n

Step 2: Create a Popup<\/h3>\n\n\n\n

With Popup Maker installed, you should see a new entry in your WordPress sidebar that\u2019s named after the plugin.<\/em> Click it to open up a list of all your popups. At first it will be empty, but you\u2019re about to remedy that.<\/p>\n\n\n\n

To create a popup, click on Add New Popup <\/em>at the top of the screen. This will open the WordPress editor:<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

When you visit this screen, a tutorial will appear showing you how to create a popup. The first thing you\u2019re asked to do is enter a name, so you can identify the popup later.<\/p>\n\n\n\n

After that, you can enter an optional title that will appear within the popup as a headline. In the main editor field, you can also enter the content you want to display in the popup. If you just want to create a simple contact form, you can also use a predefined shortcode.<\/p>\n\n\n\n

These shortcodes are found under a new button with the Popup Maker logo in the toolbar:<\/p>\n\n\n\n

\"Popup<\/figure>\n\n\n\n

Click on Subscription Form<\/em> to insert a basic contact form for capturing emails. The text for the fields and privacy disclaimer can be customized by clicking on the form and selecting the edit button. There are a number of options for styles and layout, in addition to text.<\/p>\n\n\n\n

Step 3: Configure Triggers for Your Popup <\/h3>\n\n\n\n

With your popup form created, the next step is to configure its triggers. These determine when the alert box appears. <\/p>\n\n\n\n

On the popup editor screen, scroll down to Popup Settings<\/em> and select Triggers <\/em>from the list. Then click on Add New Trigger<\/em>:<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

The base Popup Maker plugin contains three options here: Click Open<\/em>, Time Delay\/Auto Open<\/em>, and Form Submission<\/em>. You can also select Exit Intent<\/em> as a trigger if you\u2019re on a premium plan\u2014this is the option to use if you want the popup to appear when a user tries to leave your site.<\/p>\n\n\n\n

You can also adjust which pages the alert box appears on under the Targeting<\/em> tab. Make sure to customize this setting if you want to exclude certain pages or device types from seeing the alert.<\/p>\n\n\n\n

Step 4: Style Your Alert Box<\/h3>\n\n\n\n

Finally, you can change the appearance of your new alert box to better match your site\u2019s theme. In the Popup Settings<\/em> area, select Display<\/em>. There, you can change where the popup appears on the screen (including as a top bar), set its size and position, and choose from one of several available themes:<\/p>\n\n\n\n

\"Custom<\/figure>\n\n\n\n

When you\u2019re finished, make sure to select the Publish<\/em> button to save your changes and activate your popup.<\/p>\n\n\n\n

Creating an Alert Message Without a Plugin<\/h2>\n\n\n\n

If you prefer to not use a plugin, you can also create an alert box yourself using some code and a little elbow grease. You\u2019ll need to edit your header.php<\/em> file and add some CSS to your site. For this example, we\u2019ll create an alert bar at the top of the page.<\/p>\n\n\n\n

Step 1: Edit Your header.php File<\/h3>\n\n\n\n

The first thing you\u2019ll need to do is add some code to your header.php<\/em> file. This can be accessed using the WordPress Theme Editor. From your dashboard, navigate to Appearance > Theme Editor<\/em>. Then select Theme Header (header.php)<\/em> from the sidebar on the right:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Copy and paste the following code into the file at the end of the <head> <\/em>section:<\/p>\n\n\n\n

<div class=\"alertbar\">All items 20% off!<\/div><\/code><\/p>\n\n\n\n

Here\u2019s what the file should look like after this addition:<\/p>\n\n\n\n

\"Example<\/figure>\n\n\n\n

This will display the message \u201cAll items 20% off!\u201d in your alert bar. You can customize the text however you like.<\/p>\n\n\n\n

Step 2: Add Custom CSS<\/h3>\n\n\n\n

Finally, you\u2019ll need to use Cascading Style Sheets (CSS)<\/a> to style your alert. You can add CSS using the WordPress Customizer. <\/p>\n\n\n\n

To do so, head to your WordPress dashboard and navigate to Appearance > Customize. <\/em>This will open your site in the Customizer. In the sidebar, select Additional CSS<\/em>. This opens a code box where you can enter custom CSS.<\/p>\n\n\n\n

Paste the following code into the text field:<\/p>\n\n\n\n

.alertbar { <\/code><\/p>\n\n\n\n

    background-color: #A9A9A9; <\/code><\/p>\n\n\n\n

    color: #FFFFFF; <\/code><\/p>\n\n\n\n

    display: block; <\/code><\/p>\n\n\n\n

    line-height: 45px;<\/code><\/p>\n\n\n\n

    height: 50px; <\/code><\/p>\n\n\n\n

    position: relative; <\/code><\/p>\n\n\n\n

    text-align: center; <\/code><\/p>\n\n\n\n

    text-decoration: none; <\/code><\/p>\n\n\n\n

    top: 0px; <\/code><\/p>\n\n\n\n

    width: 100%;<\/code><\/p>\n\n\n\n

    z-index: 100;<\/code><\/p>\n\n\n\n

}<\/code><\/p>\n\n\n\n

Here\u2019s what the alert looks like:<\/p>\n\n\n\n

\"Alert<\/figure>\n\n\n\n

The above code creates a dark grey bar with white text\u2014but you can tweak the colors and size however you like to match your theme. When you\u2019re done, click on Publish<\/em> to save your changes.<\/p>\n\n\n\n

Enhance Your Site With WP Engine<\/h2>\n\n\n\n

Whether you\u2019re looking to increase email signups or need a simple way to notify visitors about special offers, an alert box is an elegant and effective solution. Implementing one on your WordPress site can dramatically increase your conversion rate. <\/p>\n\n\n\n

You can implement an alert box with a WordPress plugin such as Popup Maker<\/a>. You can also code one yourself relatively easily with a bit of CSS. Either way, you\u2019ll get a customizable alert that\u2019s designed to increase signups and conversions.<\/p>\n\n\n\n

If you want to enhance your site even further, learn more about our industry leading WordPress hosting<\/a> and make sure to check out our hosting plans<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"

If your website gets a solid number of visitors, but signups or conversions are lower than you\u2019d like, you\u2019re not alone. There are tons of resources available to help increase your traffic\u2014but getting that traffic to take the right actions on your site is another story.\u00a0\u00a0 One possible solution is using an alert box. This…<\/span><\/span><\/p>\n","protected":false},"author":297,"featured_media":114239,"template":"","resource-topic":[],"resource-role":[896,903],"resource-type":[916],"class_list":["post-114238","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow to Make a WordPress Alert Message<\/title>\n<meta name=\"description\" content=\"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Make a WordPress Alert Message\" \/>\n<meta property=\"og:description\" content=\"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-11T19:55:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/01\/shutterstock_1150078133-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"How to Make a WordPress Alert Message\" \/>\n<meta name=\"twitter:description\" content=\"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/01\/shutterstock_1150078133-1.jpg\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/\",\"name\":\"How to Make a WordPress Alert Message\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2021-01-20T20:07:00+00:00\",\"dateModified\":\"2024-01-11T19:55:31+00:00\",\"description\":\"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Alert Boxes in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521\",\"name\":\"Erin Myers\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g\",\"caption\":\"Erin Myers\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Make a WordPress Alert Message","description":"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Make a WordPress Alert Message","og_description":"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-01-11T19:55:31+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/01\/shutterstock_1150078133-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_title":"How to Make a WordPress Alert Message","twitter_description":"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.","twitter_image":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/01\/shutterstock_1150078133-1.jpg","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/","name":"How to Make a WordPress Alert Message","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2021-01-20T20:07:00+00:00","dateModified":"2024-01-11T19:55:31+00:00","description":"An alert box widget can be a great way to give users notifications on your WordPress site. Learn how to make your own alert box with WP Engine.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/wordpress-alert-box\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create Alert Boxes in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/3a22232b01de39dcf588fb8e421c0521","name":"Erin Myers","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd881e115bc28c81642ec61752db9981ece9ee8b4c81498a9b6276b9cdcaf5e6?s=96&d=mm&r=g","caption":"Erin Myers"}}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2021\/01\/shutterstock_1150078133-2.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer, Marketer","topic":false,"_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/114238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/114239"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=114238"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=114238"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=114238"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=114238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}