Five Easy Steps To Implement Nivo Slider On Your WordPress Page

By November 6, 2015Creative

Many of you may have heard of Nivo Slider and want to integrate it into your WordPress powered website. The only downside to it is that if you want the plugin for WordPress you have to pay for it. In this blog I explain how you can use the charge-free version in 5 simple steps.

This small tutorial will allow you to integrate the slider with some addition of html, php and css for styling purposes. You can download the zip file of the slider here.

You will need FTP access in order to upload the files to their corresponding locations. This method will allow you to add slides through the backend of WordPress without the need of hard coding your images/slides into the page.

You get the following files and folders with the package.

Screen Shot 2015-10-30 at 8.40.03 AM

Note: You don’t need to upload the demo content, the following files are the ones that need to be uploaded. The javascript files can be placed inside the javascript folder just make sure to reference to the right location.

Reference Location Below:

themes (folder and content)

jquery.nivo.slider.js

jquery.nivo.slider.pack.js

nivo-slider.css

Step 1:

First create a custom post type. This adds the (UI) to the backend of WordPress and makes it look nice and clean. The red text is what is displayed in the (UI) of WordPress and it looks something like the image below, in this case the section called “Slides” is what the code outputs.
Screen Shot 2015-10-30 at 8.55.35 AM

Code Example:

/*………….CUSTOM POST TYPE…………….*/

add_action(‘init’, ‘slide_register’);

 

function slide_register() {

$args = array(

‘label’ => __(‘Slides‘),

‘singular_label’ => __(‘Slide‘),

‘public’ => true,

‘add_new’ => __(‘Add Slide‘),

‘edit_item’ => __(‘Edit SLide‘),

‘view_item’ => __(‘View Slide‘),

‘search_items’ => __(‘Search Slide‘),

       ‘not_found’ => __(‘No Slides Found‘),

       ‘not_found_in_trash’ => __(‘No Slides Found in Trash‘),

‘show_ui’ => true,

‘show_in_menu’ => true,

‘capability_type’ => ‘post’,

‘hierarchical’ => false,

‘supports’ => array(‘title’, ‘thumbnail’),

‘rewrite’ => array( ‘slug’ => ‘slides’, ‘with_front’ => true ),

‘_builtin’ =>  false, // It’s a custom post type, not built in!

);

register_post_type( ‘slides‘ , $args );

}

Leave the green text intact this is used in the HTML content to call out the slides.

Step 2:

Search for this line in the functions.php in the admin section of your WordPress install. You need to add the red text into this section. Yours will look different all you need to concentrate on adding is the red text.

Code Example:

// This theme uses post thumbnails

if ( function_exists( ‘add_theme_support’ ) ) { // WP 2.9 or Greater

 add_theme_support( ‘post-thumbnails’ );

 set_post_thumbnail_size( 100, 80, true ); // Normal Post Thumbnail

 add_image_size( ‘recent’, 188, 83, true ); // Home Page Recent Article Thumbnails

 add_image_size( ‘slider’, 960, 350, true ); // Home Page Slider

 add_image_size( ‘port-thumb’, 680, 200, true ); // Portfolio Thumbnail

 add_image_size( ‘portfolio-thumb’, 240, 120, true ); // NEW Portfolio Thumbnail

 add_image_size( ‘blog-thumb’, 230, 130, true ); // Blog Thumbnail

 add_image_size( ‘ads-thumb’, 107, 107, true ); // Ads Thumbnail

 add_image_size( ‘blog-img’, 630, 530, true ); // Blog Picture

 add_image_size( ‘head-banner’, 960, 250, true ); // Head Page Banner

 add_theme_support( ‘automatic-feed-links’ );

}

Step 3:

This part of the process needs to be added to the main index page of your website, mine was a custom page called page-home.php. This is because I have a custom built home page, you can always add it to the index.php page. It all depends where do you want to place the slider. You can also change the amount of slides that are shown by changing the numerical value of the posts_per_page=?. I would suggest keeping it at a max of 5.

Code Example:

<div id=”slider” class=”nivoSlider”>

<?php $sliderpics = new WP_Query(‘post_type=slides&order=DESC&orderby=post_date&posts_per_page=5‘);

while ($sliderpics->have_posts()) : $sliderpics->the_post();

the_post_thumbnail(‘slider‘);

endwhile; ?>

</div>

Remember that green text with the word “slides” in it? Well this is where it is used and it actually places the image you want in the slider on the page itself.

Step 4:

Now you need to call out the js and css files inside the header.php document through the backend of WordPress. Please note that I placed the js files inside a folder named “js” and the css inside a folder called “css”.

Code Example:

<script src=”<? bloginfo(‘template_url’); ?>/js/jquery.nivo.slider.pack.js” type=”text/javascript”></script>

<link rel=”stylesheet” href=”<? bloginfo(‘template_url’); ?>/css/nivo-slider.css” type=”text/css” media=”screen” />

<link rel=”stylesheet” href=”<? bloginfo(‘template_url’); ?>/css/default.css” type=”text/css” media=”screen” />

Step 5:

The next snippet of code needs to be placed in the footer of the footer.php file. This is what controls the slider and the way that it works pauses and loads the images. You don’t need to use all the functionality that is located after the “.nivoSlider({“ that just shows the different options.

Code Example:

<script type=”text/javascript”>

$(window).load(function() {

$(‘#slider’).nivoSlider({

effect: ‘random’,                 // Specify sets like: ‘fold,fade,sliceDown’

  slices: 15,                     // For slice animations

   boxCols: 8,                     // For box animations

   boxRows: 4,                     // For box animations

   animSpeed: 500,                 // Slide transition speed

  pauseTime: 3000,                 // How long each slide will show

   startSlide: 0,                     // Set starting Slide (0 index)

   directionNav: true,             // Next & Prev navigation

   controlNav: true,                 // 1,2,3… navigation

  controlNavThumbs: false,         // Use thumbnails for Control Nav

  pauseOnHover: true,             // Stop animation while hovering

  manualAdvance: false,             // Force manual transitions

  prevText: ‘Prev’,                 // Prev directionNav text

   nextText: ‘Next’,                 // Next directionNav text

   randomStart: false,             // Start on a random slide

   beforeChange: function(){},     // Triggers before a slide transition

   afterChange: function(){},         // Triggers after a slide transition

   slideshowEnd: function(){},     // Triggers after all slides have been shown

   lastSlide: function(){},         // Triggers when last slide is shown

   afterLoad: function(){}         // Triggers when slider has loaded

});

});

</script>
The end result is an integrated “Free” version of the Nivo Slider that is easy to work with via the UI. This allows you to save the cost of the actual plugin but if you want to buy the plugin be my guest. I’m not associated with the developers of Nivo Slider this is just my way of integrating the slider into WordPress, which in return allows for a person that is not a developer to easily add images to the slider.

© 2017 | All rights reserved Hawke Media.