Adding a top notification bar to WordPress without plugin

Follow my blog with Bloglovin

Adding a notification bar to your website may contribute to increasing your conversions.

You can easily place a notification bar in your WordPress website by using a plugin like WP Notification Bar or WPFront Notification Bar. However, using too many add-ons will make your website slower because they usually inject extra CSS and javascript files into the source code.

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.

Wordpress files editor tool

WordPress files editor tool

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.

HTML
<div id="notification-bar">
How to add a top notification bar to WordPress without plugin <a href="https://Wordpresshive.com/">DOWNLOAD NOW</a>
</div>

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.

CSS
notification-bar {
background: #7ac49b;
color: #fff;
font-size:16px;
position: fixed;
z-index:100;
top: 0px;
width: 100% !important;
padding: 12px 30px;
text-align: center;
}

notification-bar a {
color: #fff; 
font-weight: bold;
}

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.

Custom WordPress notification bar without plugin

Custom WordPress notification bar without plugin

In case you prefer to make your notification bar scroll with your pages use the following CSS code instead.

CSS
notification-bar{
background: #7ac49b;
color: #fff;
font-size:16px;
top: 0px;
width: 100% !important;
padding: 12px 30px;
text-align: center;
}

notification-bar a {
color: #fff; 
font-weight: bold;
}

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.

CSS
@media only screen and (max-width:480px) {
notification-bar {
display: none;
}
} 

Conclusion

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.

How to Add a Notification Bar to Your WordPress Website Without Using a Plugin
5 (100%) 4 votes