How to Add a Top Notification Bar in WordPress?

Many bloggers have written lengthy tutorial articles. However, the effectiveness of an article is not in length and depends on the results of your call to action. WordPress allows you to insert call-to-action sections in a variety of ways. The most efficient and attractive way is to add a top notification bar. If you are looking for how to add a top notification bar in WordPress, we will explain a few ways in this article.

Popular Notification Bar Examples

Before we continue, first let us show you some examples of Top Notification Bar Widgets in WordPress. The first example is taken from the site of the popular lightweight theme GeneratePress. They offer a discount on the GeneratePress theme with two call to action buttons in the bar.

The second example is another popular Astra themed site. Here you can see the text of the special offer with a countdown timer.

You can see hundreds of such examples all over the web, and creating your own on your website is a simple task.

Options for Adding a Top Notification Bar in WordPress

Here are some of the options.

• Dedicated notification bar plugin
• Multipurpose plugins
• Using Theme Options with the WordPress Hooks API
• Using Third Party Embeds
• Use your own CSS

1. Using Special Notification Bar Plugins

We recommend using this option as it is easy to control and configure with minimal effort. Also, you can get many free plugins for this purpose instead of looking for a premium plugin, and here we will explain using the Easy Notification Bar plugin. The plugin uses the wp_body_open hook API to insert a notification above the main body of your site. Hence, it will work with any themes that use the latest WordPress standards. First, install and activate the Easy Notification Bar plugin.

After that, go to Plugins > Installed Plugins. Click the “Settings” link under the Easy Notification Bar plugin.

Setting Plugin Options

The plugin does not offer a separate settings page. It adds all options to the default WordPress customizer section. The advantage of this way is that you can easily preview the notification bar on desktop and mobile before you publish it live.

Here are the options you can customize with the plugin.

• Enable Notification Bar – Check this box to see a preview of the Notification Bar in Preview mode. The advantage here is that you can change the view to desktop, tablet, or mobile to check how the panel looks without publishing the changes.
• Show close icon – If you want users to close the panel, check this box. Otherwise, users won’t be able to close the bar and it will always be at the top of your pages.
• Close Icon – Select simple or outline icons for the close button.
• Enable Pinning – Enable to have your notification sticky when users scroll down the content area of ​​your pages.

• Disable on home page only – Check this box to disable the notification bar on the home page only.
• Message – The plugin will fill in the sample message in the field, remove it and add your own message to display in the panel.
• Background/Text Color – Apply background and font colors to the panel and text.
• Text Alignment – Aligns the text inside the panel to the left, right, or center.
• System Font Family – Use this setting to load the system font for text content in the notification bar. Otherwise, the plugin will also use your default theme settings for the notification bar.
• Font Size – Enter a font size, such as 18px, to make the text size different from your main section.

• Button text and link – add text and a link for the button
• Link Options – You can make the button a nofollow sponsored link and open it in a new window.

Once you’ve configured your settings, click the ‘Publish’ button to see the top notification bar in action on your live site. As you can see in the screenshot below, it will look similar to the professional website examples above.

Alternative option – FooBar

As the name suggests, the Easy Notification Bar plugin allows you to create a simple bar on top without any other options. For example, you can’t disable or enable only on the pages you need. If you need a notification bar for your WordPress site with more options, try the FooBar plugin.

• After installing the plugin, you can import demos that you can edit and reuse.

• You can create notification, cookie notification and call to action using one plugin.

• Preview the panel directly in your admin area or frontend without actually publishing it.
• Adjust position, visibility and appearance to suit your needs.

2. Multi-Purpose Plugins

Some plugins perform multiple tasks. For example, you can use the OptinMonster plugin to add a top notification bar to WordPress, although the main purpose of the plugin is lead management. Similarly, you can use the WP Review Pro plugin to add a notification widget on top, although the plugin is designed to generate reviews. Here we explain using WP Review Pro and you can check the WordPress plugin repository for similar plugins.

• Once you have the professional version of the WP Review plugin installed on your site, create or edit a page.
• The plugin will add a meta viewport to the editor and click on the “Notification Panel” tab.
• Select “Use custom options” next to “Enable” and customize the appearance of the notification bar.

3. Use Theme Options

Many WordPress themes offer an easy way to embed a top notification bar without any plugins. For example, the examples above from GeneratePress and Astra use the WordPress API and custom layout options. This is how you can create a top notification bar in the GeneratePress theme without a plugin.

• First prepare the HTML content for the panel.
• Go to Appearance > Widgets and paste your HTML into the Custom HTML element in the Top Bar widget area.

• Save your changes and go to Appearance > Customize.
• Go to the “Top Bar” section and adjust the padding, width and alignment of the strip.

• Review and publish your changes.

The appearance of the panel depends on your HTML code, and you can embed the button and text so that they appear on the same line.

4. Use of third-party embeds.

Besides WordPress themes and plugins, you also have third-party options. You can use an email subscription from MailChimp or any other provider at the top of your site. This is the best way to get email from readers who comply with the GDPR and other local laws. Similarly, you can use Hello Bar or a similar service to add a top notification bar to drive traffic to your landing page.

5. Use your own CSS

You can simply add a CSS code snippet above the navigation menu area in the header section. However, this is a hard option and you need to set up the panel for mobile viewing. Also, you can’t change the bar on different pages depending on the content. Therefore, we will not explain it in detail.

Factors to Consider Before Choosing a Top Notification Bar Plugin

Although there are different options available, you should consider the purpose before choosing the option that is right for you.

• For email marketing purposes, be sure to check if the plugin supports email form integration. In addition, you can choose from third party service providers such as MailChimp.
• To showcase your own grocery coupons or partner coupons, you need beautiful icon buttons.
• To drive traffic to any landing page, you can have a simple dashboard.
• For the product or any other launches, you need a timer on the panel.

Final words

As you can see, there are many options for inserting a top notification bar into your WordPress site. we recommend using the theme option if available, although you do need to spend some time building the HTML. Free plugins are easy to use but with limited features. The best option is to use premium plugins so that you have full control over your notification bar.