How to Create a floating footer on WordPress | Plugins

The idea of ??creating a floating footer on a page is not news to anyone and can be seen on various websites across the internet, including the websites of schools + network. But what we want to bring you this article is to create a floating footer to your website without using any plugin, which as mentioned above is preferable to be filling up your installation with plugins, many of which contain unnecessary code and scripts that will only make the response time and load your website increase and make it a little slower. Although this article is directed to the use of floating footer in WordPress, it can be inserted into any website, since it is made using only HTML, CSS and jQuery!




To complete this tutorial you need to have basic knowledge of programming the level of HTML / CSS and have basic understanding of how the files of a WordPress theme.


1. WHY A FOOTING FLOATING?
The use of a floating footer to your website can be done in order to get the attention of visitors to a particular item, a note, information, or something that you simply want to highlight. Of course there are pre-made solutions to achieve the same objective, with plugins like HelloBar or other within the same genre. The floating footer that we will create and use the website is much simpler than all other existing through plugins, and a static footer that will make a rotation of the articles inserted by jQuery code that we will present later.
The reason why you should use this footer is simply for its light weight while doing the same job. No need to install plugins that contain scripts that will consume resources and server and thus help that the website is not as fast as it could be. However, if you want to have at your disposal advanced features, then yes you will have to resort to a more complex solution that find in a plugin.

2. FIRST STEP: DIV CREATION
As we said in the introduction of the article, this floating footer is created with the use of HTML and CSS along with a touch of jQuery that makes the rotation of the articles. The process involves the creation of DIV’s that will be styled with CSS to define the position, background color, font, and other properties. Finally it is inserted a small jQuery script that will make the rotation between the inserted articles.
Using an FTP client of your choice (we recommend using FileZilla FTP client) connect to the server of your website and the creation of the div’s floating footer, locate the template folder of your website and locate the file footer.php :
How to Create a floating footer on WordPress
Edit the file and enter the following code at the end of it, before the < / body> :
<div class=”fixedbar”>
<div class=”caxiaflood”>
<ul id=”lista_art”>
<li><a href=”http://www.example.com/2012/09/Add-text-on-the-highlighted-image-Articles/”>Add text on the highlighted image Articles</a></li>
<li><a href=”http://www.online-seva.com/2012/09/Increasing-Login-Security-on-WordPress/”>Increasing Login Security on WordPress</a></li>
</ul>
</div>
</div>
In this small piece of code is where you will enter the items you want to be shown in the floating footer. In this example we have 2 items, but you can enter as you like by simply insert one or more new entries in the list , following the example above.

3. stylization of DIV
To make the stylization of the div , determining the background color , transparency, font , size, among other properties , locate the style.css file within your theme folder:
How to Create a floating footer on WordPress
Edit the article and enter the following code :
.fixedbard {Background : # 333 ; 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; }

.caixaflut {text -align : center; width: 920px ; margin: 0 auto }
#lista_art , #tips li { margin: 0 ; padding: 0; list-style : none}
#lista_art {width : 920px ; font-size: 20px ; line-height: 120% ; }
#lista_art li { padding: 15px 0; display: none }
#lista_art li a {color : #fff ; }
#lista_art li a: hover { text-decoration : none; }
In the first line of code is where estilizamos the main div , we set the values ??for the properties of the background color , spacing, family of the font , the size of the font , the z -index , determine the position of float , alignment margin , opacity, among other elements . In this line the element that makes the difference is the position: fixed , it gives the floating aspect footer . We have inserted some transparency so that the content behind the floating rodaºé remains visible.
Once we set the width of the main div is 100 % , hence the need for a second div to make the content is aligned to the center and not to the left . In the second line of code we define some options for secondary div where you enter the text and links , determining the alignment of the text to the center . The remaining lines will determine some details to give the final touch to the floating footer.

4. CODE JQUERY
For the correct functioning of our floating footer need to insert a small jQuery script that will make the rotation of the articles included in the list that we created in section 2 of this article. This code will make it shown a list item in each time the floating footer is loaded. To enter the code, locate the footer.php file within your template folder and enter the following code:
<Script type = “text / javascript”>
this.randomtip = function () {
    var length = $ ( “# lista_art read”) length.;
    var ran Math.floor = (Math.random () * length) + 1;
    $ ( “# Lista_art li: nth-child (” + ran + “)”) show ();.
};
$ (Document) .ready (function () {
    randomtip ();
});
</ Script>
Importantly for the operation of this little script it is necessary that jQuery is being loaded. Usually and in most cases the websites already have jQuery to load, so the use of scripts like the above will work fully. If you want to enter only a footnote, an information or a single item, not the introduction of this script is necessary, since no rotation items.
The only setback that you can find in using this method is the lack of an interface in your admin panel that allows insertion and removal of items from the list, but as we reference, is preferable to the introduction of the method in this way if you want a simple footer avoiding the use of unnecessary plugins. If really want a more advanced solution with other types of options included, then yes you can choose to use a plugin.




LEAVE A REPLY

Please enter your comment!
Please enter your name here