How to Create a “Sticky” Floating Footer in WordPress

A floating footer in WordPress allows you to promote upcoming posts, ideas and links to information. It also gives you the opportunity to show readers special information you want them to see. Floating footer bars, or “Sticky” footer bars are when the there is bar at the bottom of the visitors browser that moves with them down the website as they scroll. It is always visible.

By using a floating footer you can bring more attention to your featured posts, emails or whatever you wish to highlight. A floating footer is a static bar that does not close, but can be set up to rotate content continually, highlighting important information, posts sites, events, or anything you think could be important to the readers of your blog or page. Floating footers are another feature of WordPress designed to make the life of someone running a blog or page less complicated and give you another degree of control over the content on your page or blog.

There are quite a few different options when choosing a floating footer, and each has different features depending on what your needs are. If you want a footer that is easy, quick and efficient then this is the method for you. To use the floating footer in WordPress begin by creating a div with the CSS property in the fixed position, then use JQuery math code to enable the items added to the footer to be on a rotating modulation.

Creating a Floating Footer

• Open Footer.php file
• Add the codes below; codes should be added right before the closing of the body statements above all the scripts.
• Next step is to add the CSS

WPLearningLab Link is the First Item
WordPress.org is the Second Item

Note:

• You can add as many items as you like, but only one per page.

Adding the CSS

1. Open Style.CSS file
2. Paste in following codes

/*-- WPLearninglab Footer Bar --*/

fixedBar{background: #000; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:fixed; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold;}

.boxfloat{text-align:center; width:920px; margin:0 auto}

#tips, #tips li{margin:0; padding:0; list-style:none}

#tips{width:920px; font-size:20px; line-height:120%;}

#tips li{padding: 15px 0; display:none}

#tips li a{color: #fff;}

#tips li a:hover{text-decoration: none;}

• Now have main fixedBar.div
• Sets colour scheme and main styling
• Most important class is position:fixed element
• Set Z-index property, very high
• Youtube embeds can mess up and override your footer

Youtube Embeds

Youtube embeds can mess up the position of the footer, but they can be overrriden. Youtube videos can override other content on your page, especially if you have drop-down boxes, floating bars or light box pop-up. Embedded videos in WordPress has no wmode=transparent value by default, that means videos have higher priority than other elements on your page. By following the instructions below:

function add_video_wmode_transparent($html, $url, $attr) {
  if ( strpos( $html, "
How to add a JQuery Code


Notes:

Edit your footer.php file to add/remove list items
If you have trouble placing codes try changing the placements by putting them before or behind other scripts position
Once set up, CSS will have main fixedBar.div, which is where color and style are set
Opacity set at 0.95 for transparency, if you want more solid block you can change the setting
Width of .fixedBar.div is 100%, need to create a wrap or all content will be left-aligned, div .boxfloat can work as a wrap class
Width can be adjusted

Conclusion
Floating footers provide an easy and convenient way to keep your readers updated and informed about anything and everything. From important dates, up-coming events, emails, blogs and everything in between.
The above is just one of many methods to create and maintain a floating footer.  Some are easy and quick such as WordPress, however there are other methods that are more advanced and offer far more features.  Whatever your requirements, you will be able to find a method to suit your needs.