WPFront notification bar

Today, with this WordPress plugin tutorial I want to show you how to add a WP notification bar. You can see the blue bar above the header. That is the notification bar I am going to show to you. Before you add any plugin, you have to realize that every extra plugin can slow up your site.

wordpress icon

Every plugin can create a conflict.

And when you want to remove them, when they are not working the way you want to, they can affect the way your site works.

So before adding a plugin, we are going to make a backup for your website in 3 steps.

Backup website

1. Go to tools


wordpress plugin tutorial back up website


2. Go to export and choose All content, and click on Download Export file.


wordpress export website


3. Click on save (sorry my computer speaks dutch:) after saving you can find your files in the folder “Downloads”


wordpress save export website

*nb. For a full back-up, you need to use an FTP program or a plugin, to be able to save all files to your computer

Test plugins

When you are in the position to have a test website, it’s always sensible to test plugins you want to use first. To see if they are doing what you expect from them. And to look if they will not mess up your website. It would be terrible when your website stops working through a conflicting plugin. And it comes in handy too when you want to try out settings. Sometimes, the settings are on a universal level, and difficult to understand for regular folks.

The add new –  WordPress plugin tutorial


1.Add new plugin

At first, you have to go to your dashboard. Go to the plugin tab. On top, you see Add New. Click on that button.


wordpress tutorial add new plugin



2. Search Plugins

On top, you see the box “Search plugins”


wordpress tutorial search new plugin

Plugin: Search Plugin


3. Type in the search field:

WP notification bar. And click on enter.


WPFront notification bar plugin tutorial

WP notification bar


4. Look for the next plugin.

“WPFront notification bar” plugin, developed by Syam Mohan. Check if it is Compatible with your version of WordPress. If so, click on Install Now.

WPFront Notification bar



5. Warning

When you have clicked the button, sometimes, you will get a warning like this, and then I have the habit to talk to the computer 🙂 Yes I am sure!


wordpress plugin warning


6. After you clicked the OK button you have to activate the plugin.


activate wordpress plugin

7. Now we have to bring in the content we want to display on the website.

Therefore, we go to the dashboard where the word Notification is added.


find your plugin in the WP dashboard menu


 8. At the top, you see the color scheme.

We will come back to that. We scroll down to the Notification message. Whatever you want to display you can fill in.


WPFront Notification bar settings


9. You can always adjust your text, or promote something else.

You can fix the bar, so it will stay on screen while scrolling. And where do you want the text? Play with it and see which position is the nicest one.

You can change your text anytime.


Notification bar text messages


10. Where do you want your visitors to go?

Fill in the Call to action box, Click here, or Buy Now ore On Sale or something. Then add the HTTPS:// link in the Button URL box.

*nb. I use the “Pretty link lite” plugin, to make affiliate links more attractive. It’s also very handy because you can give those links a memorable name, without all those numbers attached.


affiliate link in notification bar


11. It is time to look at the result! Go to your website and see!

This is on top of this website. The text may vary, though;)

WPFront notification bar



12. The standard bar is red.

I did not like the red color, it does not combine well with my theme. So, I have adjusted the color. Therefore, I went to 2createawebsite.com to find suitable colors. On the main page, you choose a Hex color scheme generator.


Hex color chart easy to use


13. Hex color scheme generator.

This is the generator we are going to use. You can use the slider and thereafter the color field, in the box will appear a code.

Choose hex colors easily with # and rgb numbers


14. WPFront Notification settings

We are back in the settings of the Notification bar. The color scheme. We are going to fill in the code we copied in the box you see below. For example, I adjust only the Background Color. Of course, the Border and Text Color can be changed too. As well as the color from the Call to action button.


use any #color you like



I wish you a lot of fun playing with text and colors and I hope you enjoyed this WordPress plugin tutorial.

I like to see your result! So please leave a comment below!

More interesting posts:


“WordPress plugin tutorial, add notification bar”

We can teach anyone to build a successful business online



(Visited 189 times, 1 visits today)

Hey, nice to meet you. I am Loes and I love to work, create and make money on the internet. My vision for the future is promising because the activities and sales go to triple over the next few years. You can take advantage of it too. Step into the world of affiliate marketing today, and work towards financial freedom for you and for your family. If you would like to learn how to build your own Wordpress website, click here to open your free account today!

  1. Irene Anum says:

    God bless you Loes for all your tutorials. which i find Very helpful. very creative where the tutorials are ‘hidden.

    • Loes says:

      Hello Irene, thank you very much, I hope the tutorials are not to much “hidden”, perhaps I should put them up on the mainmenu, sometimg to consider, I think, thanks for your feedback, Loes

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>