Menu Close

Add NivoSlider With Custom Post Type To WordPress Theme

default

Note: This post is outdated.

Today I will teach you how to properly include a jQuery NivoSlider to your WordPress theme in a few easy copy/paste steps. For the purpose of this tutorial I will show you how to create a custom post type “slides” which we’ll use to get all the “posts” for the slider, however, you can easily change the loop to get posts from a certain category, tag…etc.

Step 1: Get The Code From Dev7Studios

Before you do anything you will obviously have to download the latest Javascript and CSS for NivoSlider. You can get this over at the author (dev7studios) by clicking the image below:

Step 2: Add The CSS To Your Style.css File

Next you’ll want to copy all the CSS that you just downloaded for the Nivoslider and paste it into your main style.css file located in your theme’s folder where you are adding the image slider. Just copy and paste at the bottom of your style-sheet – you’ll want to go back afterwards to re-style it the way you want it to look.

Step 3: Add The Javascript For The Slider

Next you should add the Javascript required for the slider to work. You will have to call your nivoslider js that you downloaded earlier from your functions.php and then start up the script in your header.php file.

a. Add JS To Functions.php

Add the following to your functions.php which will first get the main JS file from the Google API and then call the nivoslider JS file which you downloaded in step 1 and should add to your theme’s folder in a sub-folder called “js”

// include jQuery wp_enqueue_script('jquery');
// include nivoslider JS
wp_enqueue_script('nivoSlider', get_stylesheet_directory_uri() . '/js/jquery.nivo.slider.pack.js'); }

b. Start Script

Next you will want to start the script by adding the following javascript in the file right before where your slider will be (take a look at all the awesome options for the Slider at dev7studios and edit accordingly).

Alternatively (and the best way to do it) would be to add this either at the top of your nivo js file or in a new js file and enqueue properly.

<script type="text/javascript"> jQuery(function($){ $(window).load(function() { $('#slider').nivoSlider(); }); }); </script>

Step 4: Add Slides Custom Post Type & Thumbnail Support

To add a new custom post type called “slides” simply 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, do so by inserting the following in your functions.php file.

// activate post-image function
add_theme_support( 'post-thumbnails' );

Step5: 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. I have already created all the code for you, so simply copy and paste the following get_posts loop wherever you want your slider to appear.

<?php 
// get custom post type ==> slides
global $post; $args = array( 'post_type' =>'slides', 'numberposts' => -1, 'orderby' => 'ASC' ); $slider_posts = get_posts($args); ?> <?php // show slider only if slides exist if($slider_posts) { ?> <div id="slider-wrap"> <div id="slider"> <?php // start the loop foreach($slider_posts as $post) : setup_postdata($post); // get image $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'home-slide'); ?> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo $thumbnail[0]; ?>" width="" height="" title="<?php the_title(); ?>" /></a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </div><!--/slider nivoSlider--> </div><!--/slider-wrap --><?php } ?>

Step 6: Add A single-slides.php file to your Theme

As you see in the loop I added a link to the slides so you can have them go to a page with the content added in the editor for that slide. By default WordPress will use your single.php file to showcase the content for the slides. If you want your slide pages to look different you can do so by creating a new file called single-slides.php and designing it the way you want the slide pages to look. You can also remove the links completely and just have an image slider 🙂

View Source
Posted in WordPress