Adding a notification bar to your website may contribute to increasing your conversions.
In this tutorial, we are going to show you a better alternative to add a notification bar to your WordPress website without using any plugins.
Why should you use a notification bar?
Notification bars are very useful and they are the perfect alternative to using pop-ups, which are widely considered annoying and obtrusive. In addition, a notification bar can keep your message always visible without distracting readers from your content.
Generally, notification bars can be used to:
- Welcome visitor to your blog/website.
- Remind users about special discounts or offers.
- Display a slick subscription form.
- Display your contact details.
- Highlight the most recent news and updates.
- Link to affiliate products or services.
- Announce freebies and giveaways for your website.
- Link to a specific page on your website.
- Announce upcoming events or Webinars
These are just some possible uses of implementing a notification bar. I am pretty sure that you can adapt it to your particular need. The sky is the limit!
How to add a notification bar without a plugin
Creating a notifications bar without using a plugin isn’t a rocket science. Anyone with just a little knowledge of CSS and HTML can do it. Even if you are new to coding you will be able to add a notification bar to your website by following the steps listed below.
Step #1: Connect to your website root
You can access your server root either by using an FTP client like Filezilla or through your hosting account Cpanel. Then, you will need to download your header.php and styles.css files which are located in wp-content->themes->your-active-theme/.
You can also access these files through your WordPress dashboard. Once you are logged in to your WordPress administration panel, hover over the Appearance tab located on the left menu. Now, a sub menu will show up. Click the Editor link to be taken to your theme’s Editor. On the right hand of your dashboard, you will see a list populated with your active theme files. Find the header.php and styles.css files then open and edit each of them as specified in Step #2 and Step #3.
Step #2: Insert the HTML code in your theme’s header.php file
Now that you have your header.php file opened in your favorite code editor insert the following HTML code just after the opening <body> tag.
Make sure to update the code with your text or message and do not forget to save the file once done.
Step #3: Style your header to your preferences
Now it’s time to give your notification bar an appropriate style. You can make it more interesting and more noticeable by adding a few lines of CSS code. To do that open your theme’s CSS file and insert the CSS code provided below into your CSS file.
The CSS code above will give your notification bar a nice green background and will center your text inside its container. As you can see, the notification will always remain visible at the top of your browser because we have given it a fixed position as well.
In case you prefer to make your notification bar scroll with your pages use the following CSS code instead.
When it comes to mobile phones you may want to hide the notification bar completely. This can be achieved easily by inserting the following code at the bottom of your CSS file.
As you can see, adding a custom notification bar to your WordPress based Website is straight forward. So, give it a try and don’t hesitate to play with the code and customize it to suit your preferences.
If you found this tutorial interesting, do show your love by rating it and sharing it on your social media profiles. Do not forget to post your thoughts using the comments form below.