NivoSlider + Custom Post Type in WordPress Theme

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


// 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:


$(window).load(function() {




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’);


Stay in Touch


Related Articles