{"id":16799,"date":"2020-12-01T15:00:04","date_gmt":"2020-12-01T14:00:04","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16799"},"modified":"2020-12-08T13:30:19","modified_gmt":"2020-12-08T12:30:19","slug":"wordpress-alert-bar","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-alert-bar\/","title":{"rendered":"What is an Alert Bar and How to Create One in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]An alert bar is <strong>a great way of notifying your visitors<\/strong> of items needing their urgent attention. This could be anything, from breaking news to special offers and promotions. You can find uses for this function regardless of the kind of website you are running or designing, and there is no shortage of solutions.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will discuss how to create an alert bar in WordPress, but also in which situations you may find an alert bar <strong>useful for yourself and helpful to your users<\/strong>. If you are unsure what a WordPress alert bar is or whether your WordPress website needs it at all, read through the following sections. If you want to get down to the brass tacks, go immediately to our how-to.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-wordpress-alert-bar\">What is a WordPress Alert Bar?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-to-use-wordpress-alert-bar\">When to Use a WordPress Alert Bar<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-wordpress-alert-bar-using-plugin\">How to Create a WordPress Alert Bar Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-wordpress-alert-bar\"><\/a>What is a WordPress Alert Bar?<\/h2>\n<p>[\/vc_column_text][vc_column_text]An alert bar is <strong>a thin band or banner which stretches across a website without blocking its content<\/strong>. It is typically situated at the top of the page, and might consist of text, hyperlinks, call-to-action buttons, and a hide or close button. On mobile devices, it is most often located at the bottom of the page, within easy reach of the user\u2019s thumb.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It may well be the first thing a visitor sees, and, if used, deserves your special attention.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Alert-Bar.jpg\" class=\"attachment-full size-full\" alt=\"Alert Bar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Alert-Bar.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Alert-Bar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Alert-Bar-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-to-use-wordpress-alert-bar\"><\/a>When to Use a WordPress Alert Bar<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you need to <strong>let your visitors know about something important<\/strong>, something requiring their undivided attention, an alert bar is a great tool.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For instance, <strong>you may have an important update<\/strong> to the way in which you interact with your users every day. You could be introducing a new service, changing your office hours, changing your street address or opening a new brick-and-mortar location. You could also be changing your terms and conditions, in which case you really need to make sure that you have done all you can to notify your visitors in advance. You might be using cookies. An alert bar is a good way of advising your visitors of that.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You want to <strong>avoid your visitors being unpleasantly surprised<\/strong>. Of course, you may use it as a greeting to new users, and supply it with a link to your website\u2019s help or FAQ section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you are running any kind of a news website, be it general or specialized (for sports, games, or local), chances are a hugely newsworthy event is going to come up at one point or another and your visitors may rush to you for more information. You can <strong>deliver them the big news using an alert bar<\/strong> \u2013 also useful for important service information and local emergencies (weather warnings, traffic jams and the like). Do you have serialized content on your website, such as video or podcasts? You can use an alert bar to alert your visitors to a new episode.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It is, of course, obvious why <strong>a webstore could benefit from advertising time-limited or one-time offers<\/strong>, special discounts, and promotions. There is no reason why you shouldn\u2018t make use of the alert bar to inform your users of a deal they\u2018d be sorry to miss, in the same way you use your website\u2018s e-commerce functionalities to feature a product.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In each and every one of these above cases, you want to be sure you did all you could to alert your visitors of something you really think they shouldn\u2018t miss. <strong>The important thing to have in mind, of course, is not to overuse it<\/strong>. Alerts particularly suffer from the law of diminishing returns. They need to register with your users as unusual, as extraordinary, or they will simply stop working.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-wordpress-alert-bar-using-plugin\"><\/a>How to Create an Alert Bar Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]The plugin we will be using is the <a href=\"https:\/\/wordpress.org\/plugins\/easy-notification-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\">Easy Notification Bar<\/a> plugin. Note that this plugin requires WordPress 5.2.0 or newer to work. In any case, we suggest you always use the latest stable version of WordPress and to check regularly whether each plugin you use is compatible with it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have installed and activated the plugin, you need to find it on your<strong> Installed Plugins<\/strong> screen and click on the <strong>Settings<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Easy Notification Bar Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The Easy Notification Bar takes next to no time to configure. You will find all the configuration options on the left-hand side. You can also see the preview on the right.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first checkbox is used to <strong>Enable<\/strong> the <strong>Notification Bar<\/strong> and it is left checked by default. The next checkbox enables you to display your alert bar on the<strong> Front Page Only<\/strong>. We want our alert bar to be visible from anywhere on the website, but you can check this if you feel the alert bar to be too obtrusive.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Message<\/strong> box is where you enter your text. For the sake of this demonstration, we will pretend we have just started a new Twitter account. We will therefore change the default text to: <em>We are on Twitter now! Click here and follow us for regular updates \u2192<\/em>. The arrow will point to the link to our Twitter account once we\u2018re done.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will also switch up the<strong> Background Color<\/strong> the better to stand up against our websites colour scheme. We will use a dark green (#0E9B18). The white text clearly stands out, so we will not be changing the <strong>Text Color<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can choose to<strong> Align Text<\/strong> however you like: <strong>Center<\/strong>, <strong>Left<\/strong>, or <strong>Right<\/strong>. We will leave it in the center. The checkbox immediately below concerns the use of the System font family in your alert bar. We will leave it unchecked, as it will then inherit the font from our theme. We want the alert bar to stand out from, but not to clash with the rest of the website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing.jpg\" class=\"attachment-full size-full\" alt=\"Easy Notification Bar Customizing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Scrolling down, we see a<strong> Font Size<\/strong> field. We will leave it blank, meaning it will stick to the default values of our text size for the website (we like our theme just the way it is), but you can change it to whatever you feel will look good for your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Button Text<\/strong> is what will appear as the hypertext for your button. Ours will simply read<em> OUR TWITTER<\/em>. The <strong>Button Link<\/strong> field, obviously, is where you paste the link you want, if you are using it. If this field is left blank, your button will not appear \u2013 useful if you are only using the alert bar for notifications, rather than to link to somewhere.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next, the two checkboxes at the bottom are there if you want to <strong>Add<\/strong> a <strong>nofollow tag<\/strong> to your link (<a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-nofollow-links-in-wordpress\/\">the nofollow tag<\/a> can be useful for SEO in certain cases, but we will leave it unchecked), and the <strong>Open button link in new tab<\/strong> button, which we will check. We would like to gain more Twitter followers, but we don\u2018t want visitors to navigate away from our website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-2.jpg\" class=\"attachment-full size-full\" alt=\"Easy Notification Bar Customizing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you can use the device controls to see what your alert bar will look like on tablet or mobile.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-Mobile.jpg\" class=\"attachment-full size-full\" alt=\"Easy Notification Bar Customizing Mobile\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-Mobile.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-Mobile-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/12\/Easy-Notification-Bar-Customizing-Mobile-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you are satisfied, you need to scroll all the way up to the top of the plugin\u2018s setting menu and <strong>Publish<\/strong> the bar. And, just like that, your WordPress alert bar is ready.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you have seen, setting up an alert bar is not difficult, doesn\u2019t take a lot of time, and need not cost any money. If your website\u2019s content or your services could benefit from this added functionality, there\u2019s no reason not to use it. In fact, we have only shown you the very basics. If you want to make your alert bar really pop, we suggest you try a premium plugin with a greater set of configuration options.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Just keep it concise and don\u2019t overuse it \u2013 an alert is for the extraordinary, be it your own updates, important news, or special offers. Your visitors will appreciate it if you make this attention-grabbing feature worth their while. If it isn\u2019t they will ignore it at best, or, more likely, find it annoying. And who wants that for their website?<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Have something important to say? Why not emphasize it with an alert bar? We will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":16840,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-16799","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=16799"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16799\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/16840"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}