Set up Nivo Slider in WordPress as a text widget

Hey everyone :rainbow: …  I was looking around for plugins that would make my header look better.  My favorite so far is the Nivo Slider.  I was able to run across a tutorial from Dodie on how insert Nivo Slider within the wordpress loop, so it can work for my theme.  Unfortunately, due to my lack of web coding knowledge, it flashed all my images at once in my index page, before the plugin loads.   But having unsuccessfully pulling off the effect, I sort of combined both tutorials instead through trial and error which took me all night (which would probably take web gurus just a few minutes to figure out :) ) and come up with a method of installing the Nivo Slider as a text widget.  And thats what I’ll be showing you today.

the CSS code

If you check the css code from Dev7studios, it actually shows you how to insert this piece of code onto the nivo slider css to prevent images from flashing all at once.  Looking at the code that I have now without adding anything yet,  the important elements in my css are #slider, .nivoSlider, and .nivoSlider img.  Now checking back the tutorial, I added a #slider img in line 07 to mirror the couple of elements below it, and added position:absolute; and display:none; only since .nivoSlider img has the other attributes.  So this is what my css code looks like now, with the new codes added in lines 07 to 09.

#slider {
position:relative;
-moz-box-shadow:0 0 10px #f4f3f1;
background:url("<?php echo WP_PLUGIN_URL . "/wp-nivo-slider/"; ?>images/loading.gif") no-repeat scroll 50% 50% #202834;
}

#slider img {
position:absolute;
display:none;
}

.nivoSlider {
position:relative;
}
.nivoSlider img {
left:0;
position:absolute;
top:0;

}

Now that we fixed our css code to prevent those images from scattering all over the place while the plugin loads, we can move on to the easy part.

Adding the plugin to your widget

Ok next we try to install this one piece of code somewhere on our theme to execute the plugin.

<?php if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); } ?>

Normally, we cant copy and paste this code on a text widget or a post because it wont work.  Luckily, I read about a PHP code widget in the WordPress forums where you can paste php code AND html code combined, as long as theyre enclosed in the proper tags.

After installing PHP code widget, go to your widgets panel.

Drag the widget to any part of the sidebar where you want the plugin to appear.  And paste our single line of nivo slider php code to the widget.  You can add some javascript or other html along with that… the possibilities are endless… :)

So thats how its done when you want the nivo slider as a text widget.  You can just fine tune your css to whatever style you want, without getting lost when you are new to php coding such as myself.  If you want to know more about the Nivo Slider, check out  Dev7studios and Dmartinng.

Happy tweaking!

• Now Accepting Guest Articles with Adsense Share As an added opportunity for bloggers and gamers to branch out and gain you more traffic and exposure, The Game of Life is now accepting guest articles and gameplay videos!  Other than that, each approved article entitles you to boost...
• Enhance Wordpress Posts with Post Layout Pro plugin If you thought you are content with having the freedom to apply custom HTML code anywhere on your wordpress posts, eventually you will try to find ways to implement them without manually repeating the process of copy and paste.  If...
• Earn Money With Games From Mochimedia The last thing I would probably find out in money-making tips is to try and earn money with games.  I was simply browsing for some cool flash games for my Gaming Arena page and I found Mochimedia to have a...
• Jailbreak iOS4 using PwnageTool 4.0.1 [ad#200-x-200-image-ads-within-post] I found an article that was just updated yesterday on how to jailbreak iOS4 on iPhone 3GS, 3G and iPod touch 2G.  However, if you use Windows, you can try using Sn0wbreeze 1.6.1. Steps to fixing 1604 iPhone restore...