Answers for "How to Create a “Sticky” Floating Footer Bar in WordPress"

How to Create a “Sticky” Floating Footer Bar in WordPress

(function($) {
this.randomtip = function(){
    var length = $("#tips li").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#tips li:nth-child(" + ran + ")").show();
};
 
$(document).ready(function(){   
    randomtip();
});
})( jQuery );

How to Create a “Sticky” Floating Footer Bar in WordPress

<div class="fixedbar">
  <div class="boxfloat">
    <ul id="tips">
        <li><a href="https://www.wpbeginner.com/">WPBeginner Link is the First Item</a></li>
        <li><a href="http://www.wordpress.org/">WordPress.org is the Second Item</a></li>
    </ul>
  </div>
</div>

How to Create a “Sticky” Floating Footer Bar in WordPress

function wpb_floating_bar() {
    wp_enqueue_script( 'wpb-footerbar', get_stylesheet_directory_uri() . '/js/floatingbar.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpb_floating_bar' );

How to Create a “Sticky” Floating Footer Bar in WordPress

/*WPBeginner 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;
}