Many bloggers wrote lengthy tutorial articles. However, the effectiveness of the article is not in the length and depends on the results of your call to actions. WordPress allows you to insert call to action sections using different ways. The most effective and attractive way is to add the top notification bar. If you are looking for how to add top notification bar in WordPress, we explain multiple ways in this article.
Top Notification Bar Examples
Before we proceed, first let us show you some examples of the top notification bar widgets in WordPress. First example is from the popular lightweight theme GeneratePress website. They offer the discount on GeneratePress theme with two call to action buttons in the bar.
Second example is another popular Astra theme website. Here, you can see a special offer text with countdown timer.
You could see hundreds of such examples all over the internet and creating your own on your website is an easy task.
Options to Add Top Notification Bar in WordPress
Here are some of the options you can use.
- Dedicated notification bar plugin
- Multi-purpose plugins
- Using theme options with WordPress hook API
- Using third-party embeds
- Use your own custom CSS
1. Using Dedicated Notification Bar Plugins
We recommend using this option as it is easy to control and customize with the minimum effort. Also, you can get many free plugins for this purpose instead of looking for a premium plugin and here we will explain with Easy Notification Bar plugin. The plugin uses wp_body_open hook API to insert the notification above the body section of your site. Therefore, it will work with any themes that uses latest WordPress standards. First install and activate the Easy Notification Bar plugin.
After that, go to “Plugins > Installed Plugins” section. Click on the “Settings” link under the Easy Notification Bar plugin.
Customizing Plugin Settings
The plugin does not offer a separate settings page. It adds all the options under the default WordPress customizer section. The advantage with this way is that you can easily preview the notification bar on desktop and mobile view before publishing it live.
Here are the options, you can customize with the plugin.
- Enable notification bar – enable this check box to see the live preview of your notification bar on the preview. The advantage here is that you can change the view to desktop, tablet and mobile to confirm the look of the bar without publishing the changes.
- Show close icon – if you want the users to close the bar, enable this box. Otherwise, users can’t close the bar and it will be there always on the top of your pages.
- Close Icon – choose plain or outline icons for the close button.
- Enable sticky – enable to make your notification sticky when users scroll down the content area of your pages.
- Disable on front page only – check this to disable the notification bar only on your homepage.
- Message – the plugin will fill sample message in the box, delete that and add your custom message to show in the bar.
- Background / Text color – apply background and font colors for your bar and text.
- Text align – align the text inside the bar to left, right or center.
- System font family – use this option to load system font for the text content in your notification bar. Otherwise, the plugin will use your theme’s default settings for the notification bar also.
- Font size – enter the font size like 18px to have different text size compared to your body section.
- Button text and link – add text and link for your button
- Link parameters – you can make the button link as nofollow, sponsored and make it open in a new window.
After customizing your settings, click on “Publish” button to see the top notification bar in action on your live site. As you can see the below screenshot, it will look similar to the professional website examples as explained above.
Alternate Option – FooBar
As the name indicates, Easy Notification Bar plugin allows you to create a simple bar on the top without any other options. For example, you can’t disable or enable only on pages where you need. If you need a notification bar for your WordPress site with more options then try FooBar plugin.
- After installing the plugin, it allows you to import the demos which you can edit and reuse.
- You can create notification, cookie notice and call to action all using a single plugin.
- Preview the bar right inside your admin area or in the frontend without actually publishing it.
- Adjust the position, visibility and appearance as per your need.
2. Multi-purpose Plugins
There are some plugins do multiple tasks. For example, you can use OptinMonster plugin to add top notification bar in WordPress though the plugin’s major purpose is lead management. Similarly, you can use WP Review Pro plugin to add notification widget on top, though the plugin is meant for creating reviews. Here, we explain with WP Review Pro and you can check out in WordPress plugin repository for similar plugins.
- Once you have the pro version of WP Review plugin installed on your site, create or edit a page.
- The plugin will add a review meta box in the editor and click on the “Notification Bar” tab.
- Select “Use custom options” against “Enable” and customize the appearance of your notification bar.
3. Use Theme Options
Many WordPress themes offer an easy way to insert a top notification bar without need of any plugin. For instance, the above examples we have shown from GeneratePress and Astra both uses WordPress hook API and custom layout options. Here is how you can create top notification bar in GeneratePress theme without plugin.
- First, prepare you HTML content for the bar.
- Go to “Appearance > Widgets” section and paste your HTML inside a “Custom HTML” element in the “Top Bar” widget area.
- Save your changes and go to “Appearance > Customize” section.
- Navigate to “Top Bar” section and adjust the padding, width and alignment of the bar.
- Preview and publish your changes.
The appearance of the bar depends on your HTML code and you can inline the button and text to appear them in a single line.
4. Using Third-party Embeds
Besides WordPress themes and plugins, you also have third-party options. You can use email subscription from MailChimp or any other provider on the top of your site. This is a best way to collect email from readers complying GDPR and other local laws. Similarly, you can use Hello Bar or similar service to add top notification bar to drive traffic to a landing page.
5. Using Your Own CSS
You can simply add a piece of CSS code above the navigation menu area in your header section. However, this is a rigid option and you have to customize the bar for mobile view. In addition, you can’t change the bar on different pages based on the content. Therefore, we will not explain this in detail.
Factors to Consider Before Choosing Top Notifications Bar Plugin
Though different options are available, you have to consider the purpose before choosing the suitable option for you.
- For email marketing purposes, make sure to check whether the plugin allows integration with email forms. Alternatively, you can choose third-party service providers like MailChimp.
- Showcase your own product coupons or affiliate coupons need beautiful buttons with icons.
- In order to drive traffic to any landing page, you can have simple looking bar.
- Product or any other launches need a timer in the bar.
As you can see, there are lot of options available to insert top notification bar in your WordPress site. we recommend using theme option if available though you need to spend some time in creating HTML code. The free plugins are easy to use but with limited options. The best option is to use premium plugins so that you have a complete control of the notification bar.