Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Floating Announcement Bar With Button

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

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!

If you find a post helpful and feel like rewarding my effort with the price of a beer, please donate here

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!
Read More About Me...

3 thoughts on “Floating Announcement Bar With Button

      1. Just checking in to see if you were able to tell us how to make some of these modifications if some of us are interested in making this sticky or placed in a different location.

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content