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.

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

 

 

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

 

 

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

 

*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.

 

 

2. Search Plugins

On top, you see the box “Search plugins”

 

 

3. Type in the search field:

WP notification bar. And click on enter.

 

 

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.

 

 

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!

 

 

6. After you clicked the OK button you have to activate the 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.

 

 

 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.

 

 

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.

 

 

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.

 

 

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;)

 

 

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.

 

 

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.

 

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.

 

 

 

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”

 

| Home | Use of Cookies | Privacy Policy | FAQ | Affiliate Disclosure | Contact |

© Loes Knetsch. All rights reserved.