Tutorial: Create a fixed announcement bar for your website

The HTML

The first thing to do is indeed to create the html for displaying our fixed bar. To do so, place the following code at the very end of your html document, before the closing </body> tag.

If you’re using WordPress, you have to edit the footer.php file of the theme you’re using.

<div id="dabar">
    <strong>Don't miss out any post!</strong> <a href="#">Subscribe to our newsletter</a>
</div>

The CSS

Once done with the html bit, open your .css file and paste the following code, then adapt the value of the background and color properties to fit your site color scheme.

#dabar{
	background: rgb(252, 70, 30);
	color: #fff;
	display: block;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 10px 0px;
	text-align: center;
}

#dabar a{ 
        color: #fff; 
        text-decoration:underline; 
        font-weight: normal; 
}

There’s really nothing complicated here. We just basically set up a 100% width on the #dabar element, and use the position: fixed and bottom: 0 properties to make the div fixed at the bottom of the page.

If you’d rather have your bar fixed on the top, simply replace bottom: 0 by top: 0.

Now that we added the basic css styling, we still have a few fixes to make to ensure that our bar is gonna look good. The first thing to do is to take care of mobile devices. Obviously, we don’t want our bar to be seen on smaller devices such as smartphones, as it would take a big amount of space and bother reading.

In your .css file, just add the following. If your site is already using media queries, you should just add the #dabar{ display: none; } part to your existing media query.

@media only screen and (max-width: 767px) {
    #dabar{ 
        display: none;
    }
}

One last thing: As the bar is fixed at the bottom of the screen, it’s hiding a bit of your site footer. To prevent this, just find your footer element in your .css style and add a padding as shown below:

#footer{
    padding-bottom: 25px;
}

PHP to display random messages

At the point of the tutorial, we have our message bar. That’s great, but wait, it can be a lot better.

If you’re using the message bar to display promotional offers, you might want to alternate which offer is being displayed to your visitors. Using a little PHP, we can achieve this in no time.

If you’d like to display alternate messages, replace the html code with the following:

<?php 
    $items = array( 'Message #1', 'Message #2' ); 
    shuffle($items); 
?> 

<div id="dabar"><?php echo $items[0]; ?></div>

What we’ve done is really simple: first, we created an array containing all our messages. We then use the shuffle() PHP function to randomize the array. And finally, the first value of the array is displayed.

WordPress users: Display your latest post

If you’re using WordPress, you can use your message bar to display your latest published post. To do so, replace the html code with the following:

<div id="dabar">
<?php
    $args = array( 'numberposts' => '1', 'post_status' => 'publish' );
    $posts = wp_get_recent_posts( $args );
    printf( 'Latest post: <a href="%1$s">%2$s</a>',
             esc_url( get_permalink( $posts[0]['ID'] ) ),
             apply_filters( 'the_title', $posts[0]['post_title'], $posts[0]['ID'] )
    );
    
?>
</div>