Nivo Slider for WordPress

Some time ago I installed in my blog with the following address el popular Nivo Slider that allows you to make a wonderful image slider. This extended plugin can be seen at . Now, if you go to the download section, you can see that the version for jQuery is free but for WordPress you have to pay to use it.

For all that, if it's free for jQuery and not for WordPress, and if we also eliminated the installation of a WordPress plugin, with the consequent saving of resources why not do it ourselves ?, that was my thought when I installed it in my blog, and with the present, I invite you all to decubráis how easy it is and and you encourage to install it manually following the guidelines that I will tell you about next.
The first thing we do is load jQuery in our theme, for which we have two options:

  • Always use the latest version of jQuery, using an html link
  • Download the latest version of jQuery and place it in a folder of the theme

For the first case l or what we should do is place the following lines of code in our file funtions.php

In the second case , we must download the javaScript file from jQuery from this link and I advise you to use the minimized version to save space and improve the time of ac rga of the page. The downloaded file, which at the time of writing this post would be jquery-1.8.1.min.js, we place it for example in a folder called scripts so that if our subject is called ] issueTest have the following path /wp-content/themes/temaPrueba/scripts/jquery-1.8.1.min.js.
In this case, the code that is there implement in the file functions.php it would be the following:

As can be seen, in both cases, we have placed a conditional, in such a way that it loads jQuery, only when we are not in the administration area. This is because jQuery, is already installed by default with the WorPress load, for the administration area, and consequently as the version that we upload and the one that has WordPress by default are possibly different, it is convenient to make this distinction to avoid possible conflicts.
Well, with this we already have the foundations placed now let's go to the specific installation part of the Nivo Slider and for this the first thing we have to do is download the plugin of jQuery called Nivo Slider going to the page that appears when clicking on this link .
The downloaded file is compressed in zip format, and will have to unzip it. We owe to fix a bit on the structure of the directories and the files it contains, and also in the folder called demo there is an example that can serve as an example to reproduce its structure and the formation of the necessary code in the sheet we are creating.

For now, what we have to do is copy the files jquery.nivo.slider.js and jquery.nivo.slider. pack.js which are the ones that contain the javascript instructions corresponding to our folder that we have named scripts also in this folder will go the file nivo-slider.css which contains the presentation code (style sheet), and we will also copy the folder themes that appears in the unzipped document that we have downloaded.
To clarify how the dependence on files and directories, I leave you to to the left a image of my directory structure as I have it, indicating with an arrow the necessary files of Nivo Slider, which will surely clarify a lot what was commented in the previous paragraph.
Well, now in the file header.php of our theme we must indicate the css files that should be used when displaying the html page, specifically, for this I have the following instructions:

Also in the footer file. php I have included the instruction that includes the java file script that makes the Nivo Slider effect, along with the necessary instructions for it, in particular I added the following, before the label that indicates the completion of the body of the page.

I have used the function bloginfo ('template_url') from WordPress, which gives us the patch hast to the scripts folder.

Finally what remains is add a set of tags which contain the images we want to show, and which should be included in the place of the page that we want to appear (I included it in the file header.php because the image slider appeared in the header of each page of the blog), with the following structure:

With all this editing, the slider effect of the images should come out and in addition to a more efficient way than if we load the plug in, which also costs us money.

Well then that's it, I hope it works for you, and of course I recommend that you make a safeguard of your site before making these changes, as appropriate to do whenever important modifications are incorporated to the website.

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you: