Okay, trendy WordPress enthusiasts, you all know the advantages of a notification bar on your site, don’t you? Not only is it an excellent way to make announcements, but it also helps engage blog readers, boost CTR and promote affiliated products. The only problem is that those third-party plugins for creating notification bars on sites usually have very poor web performance; the solution is doing it without them. And the good news, it’s not complex HTML. Read on to find out how you can find ways to add WordPress notification bar without plugin.
- Ways to Add WordPress Notification Bar Without Plugin
- Step .1 Open Header. pHP file for editing
- Step. 2 Change your header to display the message you want
- Make CSS tweaks So The Notifications Bar Looks Good
- What if you don't have Custom CSS
- Step 3. Notifications bar as Permanent, If you Like.
- About the hide_on_mobile class
- Wrap-up
Ways to Add WordPress Notification Bar Without Plugin
Adding a notification bar using HTML is simple and fast. There’re no cookies or close buttons to deal with. here are the steps to follow. Just make sure to eliminate any unnecessary gaps in the code and then insert where directed. Your notification bar should be up and running immediately you are done.
Step .1 Open Header. pHP file for editing
Depending on the theme you use, this first step will vary slightly, but the end goal is the same; you want to tweak the code in the file a little bit. So, open the file for editing.
On your WordPress dashboard, navigate to Appearance > Theme Editor and locate the header.php file.
Step. 2 Change your header to display the message you want
Under </head> type the following code
<div id="dbar" class="hide_on_mobile">The Message
You Want the Header to Say.</div>
Note the words in red; this is where you put that custom message you want displayed. Also, you can choose to tweak the ‘hide_on_mobile’ if you want, as will be explained later. For now, just the above code is enough to get you started.
Make CSS tweaks So The WordPress Notifications Bar Looks Good
CSS is short for Cascading Style sheets; that’s unimportant; what you need to know is you can use it to tweak the appearance of your website without the need for advanced coding knowledge. Here’s the code to add custom CSS and make it look good; feel free to play with different colors and font sizes to see how the website theme finally comes out.
#dabar {
background: 2c3644;
color: #9C33FF;
font-size: 20px;
top: 0 px:
left:0 px:
width: 100 % !important;
padding:25px 0px;
text aligns: left;
}
#dabar a {
color: #ffffff;
border bottom: 1 px dotted;
}
What if you don't have Custom CSS
If you don’t have custom CSS, don’t panic, you can add the code to your WordPress Customizer the steps below:
Step 3. Notifications bar as Permanent, If you Like.
Automatically, the notification bar is static and disappears when readers scroll. However, you can change it to behave any way you want. You need to put in values for the position and Z-index. For example, here is the CSS code to make it fixed and not disappearing when users scroll down.
#dabar {
background: 2c3644;
color: #9C33FF;
font-size: 20px;
position: fixed;
z-index: 1;
top: 0px;
left:0px;
width: 100 % !important;
padding:25px 0px;
text align: left;
}
#dabar a {
color: #ffffff;
border-bottom: 1px dotted;
}
Feel free to try different fonts and colors to suit your style.
About the hide_on_mobile class
So, in the second step, we talked about the hide_on_mobile class and mentioned that you could tweak it. This class hides the notification bar on mobile devices. You can also use the code below:
@media only screen and (max-width:480px) {.hide_on_mobile {display:none !important;}}
Max-width sets the maximum width of the notification bar as 480px.
Ways to Add WordPress Notification Bar Without Plugin Wrap-up
That’s it, WordPress users, a notification bar on your site has various advantages, from enabling announcements to engaging users and marketing products or showing published posts. The good news is you can do it without 3rd party tools.
WordPress prides itself on being user-friendly. That means even people without an understanding of coding concepts can create a functional and exciting website. With the above steps, you should add a notification bar to your WordPress without the need for plugins. 3rd party tools will only slow your browser down. Have fun in your endeavors.
