Holiday Notice Bar

[brittbr2]

Sticky Bar
How about a stick bar, similar to the Quick Notice plugin but one we coded ourselves? We can also make it stick to the top of the page on scroll easily.

The first step is creating a plugin, let me show you how:

In your plugins directory, create a new folder named “my-sticky-bar”. Inside that folder create a file named “my-sticky-bar.php” and paste the following content into it:

<?php /** 
 * Plugin Name: My Sticky Bar 
 * Plugin URI: http://yourwebsite.com 
 * Description: My Christmas Project - creating a sticky bar 
 * Version: 1.0.0 
 * Author: Your Name 
 */

Once you save this file you should be able to activate the plugin via the Plugins section in the WordPress admin. It doesn’t do anything yet but we’ll soon fix that!

We need to do two things: use PHP and HTML to output our message and use CSS to style it.

In the “my-sticky-bar.php” file use the following code to add the necessary HTML in the correct place:

view plaincopy to clipboardprint?
add_action( 'wp_footer', 'my_sticky_bar_display' );
function my_sticky_bar_display() {
echo "<div id='my-sticky-bar'>Merry Christmas Everyone!</div>";
}
The first line is a WordPress hook, it tells WordPress to execute the “my_sticky_bar_display” function just before the end of the body. It’s fine to load the HTML for our bar at the end of the page. It isn’t that important and can be repositioned via CSS.

At this stage you should be able to see your message at the bottom of your site, without any formatting. To add formatting we’ll have to attach a stylesheet by enqueueing it.

In the same file:

vi
add_action( 'wp_enqueue_scripts', 'my_sticky_bar_styles' );
function my_sticky_bar_styles() {
wp_enqueue_style( 'my-sticky-bar', plugin_dir_url( __FILE__ ) . '/my-sticky-bar.css');
}
Enqueueing is a way of adding scripts and styles modularly to WordPress. No need to understand all that though — if you paste this into the plugin file and create the “my-sticky-bar.css” file you can start adding your styles. Let’s do that now.

#my-sticky-bar {
position: absolute;
top: 0px;
width: 100%;
text-align: center;
color: #fff;
background: #810400;
padding: 11px 0;
text-transform: uppercase;
letter-spacing: 2px;
}
Best of all, if you replace “absolute” with “fixed” the message will stick to the top of the window and will follow users around when they scroll.



This method is great because you have full control over everything! For example, how about keeping this plugin active all the time but only showing the message on the 25th of December? No problem, just modify the my_sticky_bar_display function slightly.

view plaincopy to clipboardprint?
add_action( 'wp_footer', 'my_sticky_bar_display' );
function my_sticky_bar_display() {
if( date( 'd' ) == 25 && date( 'm' ) == 12 ) {
echo "<div id='my-sticky-bar'>Merry Christmas Everyone!</div>";
}
}