How to Add a jQuery NivoSlider to Your WordPress Theme
Are you looking to add a stunning image slider to your WordPress website? The jQuery NivoSlider is a popular choice that can help you create an eye-catching slideshow. In this tutorial, we will show you how to add the NivoSlider to your WordPress theme in just a few easy steps.
Step 1: Download the Code from Dev7Studios
The first step is to download the latest JavaScript and CSS for NivoSlider from the author, Dev7Studios. You can get this by clicking on the image provided on their website.
Step 2: Add the CSS to Your Style.css File
Once you have downloaded the code, copy all the CSS and paste it into your main style.css file located in your theme’s folder. You can add it at the bottom of your style-sheet and then re-style it later according to your preferences.
Step 3: Add the JavaScript for the Slider
Next, you need to add the JavaScript required for the slider to work. You will have to call your NivoSlider JS file that you downloaded earlier from your functions.php and then start up the script in your header.php file.
To do this, add the following code to your functions.php file:
// include jQuery
wp_enqueue_script(‘jquery’);
// include NivoSlider JS
wp_enqueue_script(‘nivoSlider’, get_stylesheet_directory_uri() . ‘/js/jquery.nivo.slider.pack.js’);
Then, start the script by adding the following JavaScript in the file right before where your slider will be:
jQuery(function($){
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
});
Step 4: Add Slides Custom Post Type & Thumbnail Support
To add a new custom post type called “slides,” insert the following code within your functions.php file:
//Register post type for slider
add_action( ‘init’, ‘create_post_types’ );
function create_post_types() {
register_post_type( ‘slides’, array(
‘labels’ => array(
‘name’ => _x( ‘Slides’, ‘post type general name’ ),
‘singular_name’ => _x( ‘Slide’, ‘post type singular name’ ),
‘add_new’ => _x( ‘Add New’, ‘Slide’ ),
‘add_new_item’ => __( ‘Add New Slide’ ),
‘edit_item’ => __( ‘Edit Slide’ ),
‘new_item’ => __( ‘New Slide’ ),
‘view_item’ => __( ‘View Slide’ ),
‘search_items’ => __( ‘Search Slides’ ),
‘not_found’ => __( ‘No Slides found’ ),
‘not_found_in_trash’ => __( ‘No Slides found in Trash’ ),
‘parent_item_colon’ => ”
),
‘public’ => true,
‘exclude_from_search’ => true,
‘supports’ => array(‘title’,’thumbnail’,’editor’),
) );
}
If your theme doesn’t have it already, you will want to add support for WP thumbnails by inserting the following code in your functions.php file:
// activate post-image function
add_theme_support( ‘post-thumbnails’ );
Step 5: Create & Add the Loop for Your Slider
Now that you have all the JS/CSS in place and have created your custom post type for slides, you need to call your posts wherever you want to show your slider. Copy and paste the following get_posts loop wherever you want your slider to appear:
// get custom post type ==> slides
global $post;
$args = array(
‘post_type’ =>’slides’,
‘numberposts’ => -1,
‘orderby’ => ‘ASC’
);
$slider_posts = get_posts($args);
?>
if($slider_posts) { ?>
foreach($slider_posts as $post) : setup_postdata($post);
// get image
$thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘home-slide’);
?>
