Welcome Developers !. Today, we are going to build a notification bar at the head of a web page with WordPress. We made a custom design of the top bar without plugins, which looks fast, light, and clean. Add the perfect top bar to improve the SEO of our website.
Currently, many plugins implement a notification bar in the top header in WordPress. After installing several, we have decided to create our own without installing a plugin.
Why install a notification bar in WordPress without plugins?
Mainly due to the speed improvement on our WordPress website. It is known that the fewer plugins we have, the better performance our site will have. The plugins for notification bar place on the header have a multitude function and code that our website has to load. Even if we do not use it, that is why we carry out a clean installation of our top bar.
Plugins to install a notification bar in the WordPress header
Here, some plugins that we have used in our tests and that we list, starting with the best:
- Easy Notification Bar: The simplest and lightest plugin. In our case, with a problem in the styles of our design.
- Hello bar- A complete notification bar for WordPress. Multitude of functions for your top bar, making our website in WordPress slower.
- WPFront Notification Bar: We like its weight and speed. It continues to generate problems in the CSS of our theme.
- WP Notification Bars: The best plugin to mount a notification bar in WordPress. We left it in the fourth position since, in our case, it broke the style of our website; it does not serve us.
- Top Bar: It is one of the most straightforward and complete plugins. It has a high weight on our website.
Once the study of the best plugins to install your notification bar in WordPress, we are going to do a clean installation without plugins of ours.
How to install our notification bar in WordPress?
First, we are going to generate the code of our notification bar that we will install without the need for plugins. This plugin allows us to maintain the performance of our website with WordPress, which is the main reason why we chose to build our notice in the header.
Before starting, we will need to modify the code of our website. If you do not have technical knowledge of web development, we recommend contacting a WordPress developer expert, install your notification bar by modifying the code. If you do not have the resources and time, it is important to have a WordPress website maintenance company to solve doubts and possible problems on your website.
Next, we leave you the code that we use, and it served us for our WordPress theme:
Top bar text Button text
What our code looks like:
Top bar textButton text
Where to put the code?
We must go to the part of the files of our template. The data is on «Appearance»->«Theme Editor«.
Once inside we look for the file to modify «header.php»And click on it to modify it. We look for the labeland paste our code just below:
If you need to change colors:
- The first background is the general color of the background.
- The second background is the color of the button's background.
- You can change the font in «font-family: regular ROBOT;«, Remember to enter some compatible with your theme.
- Button link in «href = »https://webdedestino.com/»«. We use the latest Google best practice recommendations with «rel = »noopener»«.
If you need any extra modification like:
- Set the notification bar fixed when you scroll down on your web page.
- Change colors.
- Generate links.
- Add social media icons.
- We surprise by your idea, and we will make it possible ???.