Nivo Slider is a WordPress plugin used to control slideshows on WordPress Pages and posts.
(Assuming the plugin is installed) you can find the Nivo Slider control panel in the main WordPress Dashboard under Nivo Slider. It is possible to add any number of sliders to a site, but it is recommended to stick to 1 per page.
Create a new Nivo Slider
To add a new Nivo Slider, navigate to Nivo Slider > Add New. This opens an editing screen where you can (a) upload and manage slideshow images, and (b) manage the controls, sizes & effects for each slideshow.
- Add a title for your slider. To keep things simple I recommend creating sliders with the same name as the page they’ll be inserted on.
- Set the width and height of your images. This can be done in the Slider Size field. Dimensions are stated in pixels (checke your theme documentation to see what the sizes should be, or if I built the theme, refer to any other slider and copy the settings).
- Set the Slider Theme setting to Nivo Slider Default Theme. Any custom styles I add to a WordPress theme assume this is the slider theme you are using.
- All other settings basically just control the effects you can use, the time between slides and navigation options. Play with these to find the right setting for you (again, if I built the theme, refer to any other slider and copy the settings).
- Upload your images. Now that you’ve set your slider image sizes in the Slider Size field, you know what size your images need to be. Make sure they’re cropped to the right size to avoid Nivo Slider messing with your layout. Uploading images to the slider uses the WordPress media uploader, so if you’ve ever added an image to a post/Page, the process is the same.
- If you want to add titles to your slides, click on the pencil overlaid on a slide’s image thumbnail. You can add a title (displayed at the bottom of a slide), as well as a link (if someone clicks on the slide, it’ll redirect to this link).
- Hit the Publish button and your slider will be generated.
- Take note of the slider shortcode that is generated when you publish the slider. If you look below the Publish button you’ll see a shortcode that looks something like this:
[nivoslider id="672"]. The number 672 is a unique ID for a slider. Every slider you create will have a different ID.
Add a Nivo Slider to WordPress Pages/posts
Now that your slider has been created, you need to edit the page you want a slider to appear on. The way you do this depends largely on the design of your WordPress theme and where you want your slider to be placed. On themes I built, there are normally 2 ways to add a slider.
- Add a slider to a custom field. When sliders appear outside the page content, I usually add them to custom fields on the right of the WYSIWYG editor. Look for a box called Slider Reference and paste in just the ID (e.g. 672).
- Add a slider in your content (this is the default way to do it if I didn’t build your theme). Simply copy the shortcode your slider generated and paste it into the WordPress Page/post WYSIWYG editor where you want it to appear.
- Update your Page/post to save your work.
Nivo Slider is a premium plugin for WordPress available for purchase here. Of course, if you’re a client of mine, I’ve already bought it on your behalf.