Building a Hello Bar Above WordPress

Many have installed plugins to have a bar at the top of their website to ask a question, whether this is to get feedback from readers, look for writers with expertise in the content or other links. I wasn’t interested in adding a plugin to handle a small one time configuration so I built a quick code set which is customizable with CSS to allow anyone to add a bar with a button to their site.

This will require the [ Code Snippets ] plugin which allows you to add small chunks of code and is a core way I add functionality to the site. This along with [ HFCM ] are installed on every website I build onto for their abilities to change settings without child themes or specialized, one off, plugins.

Why Add A Header Announcement?

The core reason for myself is I find lots of nice limited time deals or have quality plugins I would like everyone to have a chance to see. One day it may become a button specifically to hire writers for the site so I can start to have people apply who love writing about the subject.

The options are only limited by your imagination, the button could route to a store, a page specifically for email sign ups, anything you deem valuable to your site that you would like to present to users who come to the page.

Create Your Announcement Bar

1. Open [ Code Snippets ]
2. Click [ New Snippet ]
3. Title: Announcement Bar
4. Paste in Code Below
5. Set to Run: Frontend Only
6. Update Message Section In Pasted Code: Affiliate Link: Interested In a Useful Tables For Amazon Products and More? Check Out:
7. Update Button URL in Pasted Code: https://amalinkspro.com/ref/68/
8. Update Button Display Text: Amalinks Pro

function build_Announcediv_function() {
 	echo'<div id="AnnouncementDiv" class="FloatAnnounce">';
	echo'<h3 class="myAnnounceHeader">Affiliate Link: Interested In a Useful Tables For Amazon Products and More? Check Out:</h3><a class="AnnounceButton" href="https://amalinkspro.com/ref/68/">Amalinks Pro</a>';
	echo'</div>';
}
add_action('wp_head', 'build_Announcediv_function');

add_action( 'wp_head', function () { ?>
	<style>
	#AnnouncementDiv {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    background-color: #38b449;
    justify-content: center;
    align-items: center;
}				
h3.myAnnounceHeader {
    padding-right: 50px;
    font-size: small;
    padding-bottom: 10px;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
}
	a.AnnounceButton {
    border: 1px solid transparent;
    border-radius: 3px;
    background: #363940;
    color: #fff !important;
    font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
    line-height: 1;
    padding: 8px 18px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: small;
    font-style: normal;
}
		  
	</style>
<?php } );

The purpose of this for anyone running Acabado is to give a specific call to action you would like to have show on each page for your visitors. The uses of this are limited only by your imagination, if you have a course you could list it, if slow in sales change this to a “special” 15% off coupon.

I would love to hear in the comments how you use it and if it helps get your site some added benefit as maybe it can then help others out too!

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!