In my opinion, the USP of WordPress lies in it’s extensibility and how easy it is to customise it to one’s taste or requirements.
And with this small but useful post I’m going to demonstrate that by creating a minimal top notification bar in WordPress just with the help of a hook. You can read more about what WordPress hooks are and how they can be used to customise or modify just about everything in WordPress (well.. not everything).
I’ve written a piece of code below which does a pretty neat job of adding a notification bar to the top of every page/post of a WordPress blog. However, to implement the code, you’ll need:
- Access to your WordPress blog’s file system (to add code to the active theme’s
functions.phpfile). - Basic knowledge of PHP, HTML & CSS to understand how the code implements the notification bar (although I’ll try my best to explain it).
Now, let’s take a look at the code below.
add_action(
'wp_body_open',
function() {
?>
<style>
.header-banner {
background: #ff0000;
padding: 1rem 0;
& p {
max-width: 1260px;
color: white;
margin: 0 auto;
font-weight: 600;
}
}
</style>
<div class="header-banner">
<p><?php _e( 'Top notification banner in WordPress without using any plugin ;)', 'twentytwentyfour' ); ?></p>
</div>
<?php
}
);Github Gist URL: https://gist.github.com/akshitsethi/5d35932b391bcb520b3e8205236a78d6
In order to add the notification bar to your WordPress blog, simply open your active theme’s functions.php file and paste the entire snippet (in the purple box above) to the bottom of it.
Now that you’ve glanced at the code, let’s try and understand how it adds the notification bar.
It starts by hooking to a WordPress action called wp_body_open which runs immediately after WordPress renders the <body> tag of the HTML markup.
The add_action function which contains the entire code takes up to 4 parameters, which are:
- Name of the action to hook to
- A callback function which is essentially the code to execute when the attached hook runs
- Priority – when should the hook be executed?
- Accepted args – the number of arguments the callback function accepts
You must have noticed that in the snippet above, I’m passing only two parameters to the add_action function. That is because, in this case I would like the last two parameters to use the default values and hence I need not bother adding those to the function.
The callback function added to the WordPress hook is simply an anonymous PHP function in which I have just added the notification bar markup i.e. HTML and some styling in between the <style> tags.
The <style> tag contains styling for the .header-banner class and it’s child <p> or paragraph tag. For the HTML markup, it’s just a <div> tag containing a paragraph with some text added to it.
That’s all there is to the code. It’s simple, right?
How about you go ahead and paste the code to the bottom of your functions.php file and see the result for yourself?
Also, please note that this is a bare bones code and the CSS added is matched with the twentytwentyfour WordPress theme. Moreover, it’s not optimised for mobile and would require some extra lines of CSS to achieve that.
Lastly, treat this code as a starting point for creating your own notification bars instead of just using it as is. Go creative by implementing the following:
- Optimise CSS for smaller screens
- Add a link or button to it
- Go creative with styling and find some inspiration on Dribble or Pinterest
- Jazz it up with animation
** I would love to know if you find this post useful and/or how you’ve used the code on your WordPress blog? Please do let me know in the comments below <3
Leave a Reply