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!

• 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...
• Free Blog Traffic with Related Websites Plugin Are you frustrated with paid advertising where you get less traffic than what you paid for?  Do you want your posts to be advertised forever instead of a certain time period for free?  There is a cool plugin called Related...
• Flash to iPhone Packager Moving Forward Apple made an announcement last Thursday that they have uplifted guideline restrictions for third-party developers to create applications with Flash to iPhone Packager. This is great news for developers as some new AIR applications for iOS devices are being approved by...
• How To Change Gravatar Size In Thematic Comments I was looking at the comment section of my theme and thought I change gravatar size in thematic comments. Why?  I love big avatars and I want to see everyone's lovely faces.  And me being graphic and all, I love details....