Blog, WordPress, WordPress Plugins, WordPress Shortcode

Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code

I was writing an article on detecting mobile devices and offering a redirection to a device-optimised design when I started toying with different ideas on how to display floating messages. The purpose of the floating message, as it related to our article, was to alert visitors to a device-optimised design that would provide an escape from a desktop-designed prison. In looking at various other plugin options I was a little blown away by the complex solutions available that usually offered far more features than most people ever needed. If all you want is a simple fixed bar like the one you're seeing on this page, you can implement it in just a few lines of code.

Sometimes, the simple and lightweight solutions are often the best.

In our first snippet of code, a fixed bar (as you can see at the bottom of this page) will be added to every page on your WordPress website.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code

http://www.beliefmedia.com/floating-footer-header

Color examples: rgba(1, 1, 1, 0.8) or #09A3E2

function beliefmedia_floating_message_footer($lineheight = '35', $color = 'rgba(1, 1, 1, 0.8)') {

echo '<div style="position: fixed; z-index: 5; bottom: 0; width: 100%; color: #ffffff; line-height: ' . $lineheight . 'px; text-align: center; padding-bottom: 10px; padding-top: 10px; -webkit-box-shadow: 0px 0px 8px 0px #000000; -moz-box-shadow: 0px 0px 8px 0px #000000; box-shadow: 0px 0px 8px 0px #000000; background-color: ' . $color . '; color: ' . $color . ';"><div style="color: white; text-decoration: bold; font-size: 14px;">This is a test of a message that you\'ll see when using our code...</div></div>';

}

add_action('wp_footer', 'beliefmedia_floating_message_footer');

Alter the message and you're good to go. Remember to comment single quotes in your text with a backslash (\').

The color can be provided as an argument. We've used rgba(1, 1, 1, 0.8) by default. RGBA color values are an extension of RGB color values with an alpha channel - which specifies the opacity of the object. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Sometimes a solid #hex color with a smaller line height is more appropriate.

Post or Page Specific Messages

Sometimes it's important to only offer specific messages on only certain pages and our second function will facilitate this. To keep the function as lightweight as possible, you'll have to update the message array containing specific post IDs and messages that relate to the particular page where you want a fixed message bar to render.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code

http://www.beliefmedia.com/floating-footer-header

function beliefmedia_floating_message_footer_pages() {

global $wp_query;

$post_id = $wp_query->post->ID;

$messagearray = array(

'5' => 'Message for this page..',

'20' => 'Another message',

'55' => '... and another message.'

);

if ( (array_key_exists($post_id, $messagearray)) && (!is_front_page()) && (is_single()) ) {

echo '<div style="position: fixed; z-index: 5; bottom: 0; width: 100%; color: #ffffff; line-height: 35px; text-align: center; padding-bottom: 10px; padding-top: 10px; -webkit-box-shadow: 0px 0px 8px 0px #000000; -moz-box-shadow: 0px 0px 8px 0px #000000; box-shadow: 0px 0px 8px 0px #000000; background-color: rgba(1, 1, 1, 0.8); color: rgba(1, 1, 1, 0.8);"><div class="beliefmedia_fixedbar" style="color: white; text-decoration: bold; font-size: 14px; color:#FFFFFF;">' . $messagearray["$post_id"] . '</div></div>';

}

add_action('wp_footer', 'beliefmedia_floating_message_footer_pages');

When writing shortcodes I'll generally write inline CSS to negate the need and overhead associated with adding CSS to another file (or adding it to a custom plugin). However, a* links form part of the selector (outside the wiggly brackets) which is implicit to the current element, or div - while inline styles only have rules. So, if you're like me and your default link text conflicts with the color of the message bar, you must upload the following CSS to the CSS file attached to your custom functions plugin to style the message bar's links.

<?php

Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code

http://www.beliefmedia.com/floating-footer-header

div.beliefmedia_fixedbar a:visited {

color: #ffffff;

}

div.beliefmedia_fixedbar a:link {

color: #ffffff;

}

div.beliefmedia_fixedbar a:hover {

color: #ffffff;

}

In a very dull manner, all our links are white.

Page Specific Messages, Otherwise a Default Message

If you wanted to return a specific message for certain pages and a default message on others, use the following (it's the same function as above with an else statement). If required you should use the CSS style code from above.

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin.

<?php

Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code

http://www.beliefmedia.com/floating-footer-header

function beliefmedia_floating_message_footer_page($lineheight = '35', $color = 'rgba(1, 1, 1, 0.8)') {

global $wp_query;

$post_id = $wp_query->post->ID;

$messagearray = array(

'5' => 'Message for this page..',

'20' => 'Another message',

'55' => '... and another message.'

);

if ( (is_single()) && (!is_front_page()) ) {

$default_message = 'This is the default message to show on every page';

$message = (array_key_exists($post_id, $messagearray)) ? $messagearray["$post_id"] : $default_message;

echo '<div style="position: fixed; z-index: 5; bottom: 0; width: 100%; color: #ffffff; line-height: ' . $lineheight . 'px; text-align: center; padding-bottom: 10px; padding-top: 10px; -webkit-box-shadow: 0px 0px 8px 0px #000000; -moz-box-shadow: 0px 0px 8px 0px #000000; box-shadow: 0px 0px 8px 0px #000000; background-color: ' . $color . '; color: ' . $color . ';"><div class="beliefmedia_fixedbar" style="color: white; text-decoration: bold; font-size: 14px; color:#FFFFFF;">' . $message . '</div></div>';

}

add_action('wp_footer', 'beliefmedia_floating_message_footer_page');

Fixed Message Bar at the Head of Your Webpage

In all cases you can fix the message bar to the head of your document by altering your CSS. Change:

style="position: fixed; bottom: 0; ...

... to this:

style="position: fixed; top: 0; ...

Simple. We've just altered bottom to top.

Considerations

As you can tell, the fixed message bar at the head of tail end of your website is a simple addition that's not always deserving of yet another plugin. If your requirements are more needy, we will be full-featured releasing a plugin soon. Keep abreast of our free FooterBanner plugin by subscribing to our Facebook page.
We'll be providing a similar example that'll replace the floating sharebar (for social links).
Because you can render anything in the floating footer, you might consider rendering countdowns, weather, live video countdowns, user-specific information, email subscriptions, social links etc. Our mortgage clients often use it to display daily interest rates on their product pages.
Consider adding code that'll cause the bar to display only certain time periods when events dictate its use.

Download

Download the sample functions below. Once downloaded, copy the appropriate file (and CSS) into your custom functions file.

Title: Floating Footer or Header Bar in WordPress
Description: Add a Fixed (Floating) Footer or Header Bar in WordPress in One Line of Code.
Download • Version 0.2, 1.5K, zip, Category: WordPress Shortcodes

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.