How to Create WordPress Featured Posts using Nivo Slider


Nivo slider is a popular jQuery plugin for creating beautiful slider effect for you website. Today we will teach you how to create a wordpress featured posts slider using Nivo Slider Plugin. If you have a wordpress based blog or website, you may wish to highlight a set of interesting posts of your blog or website on your homepage. You may have already searched for a wordpress plugin to do that. But this can be done without using a plugin just a few wordpress treak and tricks do that for you.

Step 1

First we will creating a input to select the wordpress posts that to be included in to the Featured posts slider.

Just copy & past given below code inside your theme’s functions.php file.

    add_action("admin_init", "selection_meta_box");

    function selection_meta_box(){
    add_meta_box("featured-post", "Set Featured", "featured_post", "post", "side", "low");
    }

    function featured_post(){
    global $post;
    $meta_data = get_post_custom($post->ID);
    $featured_post = $meta_data["_featured_post"][0];
    $selected = ($meta_data["_featured_post"][0] == "yes") ? 'checked' : '';
    echo "
";
    echo "<input type="checkbox" name="featured_post" value="yes" />";
    echo "<label>Select this post as Featured.</label>";
    echo "

";
    }

This will create a meta box inside the post editor with a checkbox option to choose which posts need to be included in to Featured posts slider.

What if you want this option also for your Custom Post types? Simply change the post type parameter in the add_meta_box function.

    //change post-type to your custom post type
    add_meta_box("featured-post", "Set Featured", "featured_post", "post-type", "side", "low");

Step 2 – Saving Post in Database

Now we need to save the selected posts in to the database.

    add_action('save_post', 'save_post_details');

    function save_post_details(){
    global $post;
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
    return;
    $featured_post = trim($_POST["featured_post"]);
    update_post_meta($post->ID, "_featured_post", $featured_post);
    }

Step 3 – Adding post thumbnail support to the theme

    add_theme_support( 'post-thumbnails' );
    if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'sliding-images', 800, 400, true );
    }

The function add_image_size() will create a separate custom sized image for your slider.

Note: You need to set a featured image using the “Featured image” feature by wordpress. Otherwise, the slider will not work.

This will allow us to select which image from the post gallery to display on the slider.

    function show_featured_posts($numbers) {
    global $post;
    //get $numbers of featured posts
    $featured_posts_array = get_posts( 'meta_key=_featured_post&meta_value=yes&numberposts=$numbers&post_status=publish');
    }

From the above query, we are getting the latest featured posts in post date order.

Step 4 – Adding image loop in the same function

    function show_featured_posts($numbers) {
    global $post;
    //get $numbers of featured posts
    $featured_posts_array = get_posts( 'meta_key=_featured_post&meta_value=yes&numberposts=$numbers&post_status=publish');
    $output .= '</pre>
<div class="slider-wrapper theme-default">';
 $output .= '
<div class="ribbon"></div>
';
 $output .= '
<div id="slider" class="nivoSlider">';
 foreach ($featured_posts_array as $post) : setup_postdata($post);
 $nivo_title = "#nivo".get_the_ID(); //assign the postID as title of the image
 if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) {
 $output .= get_the_post_thumbnail(get_the_ID(), array(800,400), array( "class" => "post_thumbnail", 'title' => $nivo_title )); }
 $caption .= "
<div id="nivo&quot;.get_the_ID().&quot;" class="nivo-html-caption">
<h2><a href="&quot;.get_permalink().&quot;">".get_the_title()."</a></h2>
 ".get_the_excerpt()."</div>
";
 endforeach;
 $output .= '</div>
';
 $output .= $caption;
 $output .= '</div>
<pre>
';
    return $output;

    //reset WP query
    wp_reset_query();
    }

So now we got the function to output the selected Featured posts. This function will return the selected featured posts and with this you can integrate any slider of your choice by changing the class name or ID of the div tags.

Step 5 – Put Nivo Slider files in to theme folder

Download latest Nivo Slider version from http://nivo.dev7studios.com/ Copy and paste the ‘themes’ folder from the extract in to your wordpress theme folder yourdomain/wp-content/themes/theme-name/. Copy and paste jquery.nivo.slider.pack.js and nivo-slider.css to your ‘js’ or ‘lib’ folder. You need to be aware of where you are placing the files because you need to set the correct path to these files in the later part.

Step 6 – Include Nivo slider files to the theme

    function include_my_scripts() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_register_script( 'nivopack', get_bloginfo('template_directory').'/js/jquery.nivo.slider.pack.js');
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'nivopack' );
    }

    add_action('wp_enqueue_scripts', 'include_my_scripts');

    add_action('wp_print_styles', 'add_my_stylesheets');
    function add_my_stylesheets() {
    wp_register_style('nivo_theme_style', get_bloginfo('template_directory').'/themes/default/default.css');
    wp_register_style('nivo_main_style', get_bloginfo('template_directory').'/js/nivo-slider.css');
    wp_enqueue_style( 'nivo_theme_style');
    wp_enqueue_style( 'nivo_main_style');
    }

    //Call the Nivo function in to the footer
    add_action('wp_footer', 'nivo_functioncall');
    function nivo_functioncall() {
echo '<script type="text/javascript">// <![CDATA[
    $(window).load(function() {
    $("#slider").nivoSlider();
    });

// ]]></script>';
    }

The new version of Nivo slider offers 3 set of slider themes ‘default’, ‘orman’ and ‘pascal’. You can change between these themes by changing the theme css file.

wp_register_style('nivo_theme_style', get_bloginfo('template_directory').'/themes/default/default.css');

Step 7 – Place the slider on desired location

Final thing, call the output function show_featured_posts() from your desired location. For example, if you have the index.php as your front page, then paste the following code after the line get_header() in your index.php file.

    <!--?php if(function_exists('show_featured_posts')) echo show_featured_posts('5'); ?-->

Why not implement a shortcode?

    function tg_featured_posts($atts, $content = null) {
    extract(shortcode_atts(array(
    "numbers" => '5'
    ), $atts));
    echo show_featured_posts($numbers);
    }
    add_shortcode('featured', 'tg_featured_posts');

Now you can put the shortcode [featured numbers=”5″] anywhere in your posts or pages to display the Featured posts Slider, change the numbers value to any number you want.

I hope this tutorial will help you in creating your custom WordPress Featured Slider.

If you want this slider with more options and as a wordpress plugin, check the premium plugin by Dev7studios Nivo.

Download Source

Join Our Email Newsletter

Like what you read here in this blog post? Get free blog updates in your Email!

When signing up you will initially receive a confirmation email requiring your approval to complete the Subscribtion.

Up to 90% off over 6,000 courses!

Comments

  1. ledsk816 says

    Hello! I need to add custom shield to the slider and the category name. How can I call they at this part of the functions:

    foreach ($featured_posts_array as $post) : setup_postdata($post);
    $nivo_title = “#nivo”.get_the_ID(); //assign the postID as title of the image
    if ( function_exists(“has_post_thumbnail”) && has_post_thumbnail() ) {
    $output .= get_the_post_thumbnail(get_the_ID(), array(620,320), array( “class” => “post_thumbnail”, ‘title’ => $nivo_title )); }
    $caption .= ”
    “.get_the_title().”
    “I WANT CATEGORY HERE”
    “I WANT CUSTOM SHIELD HERE”
    “;
    endforeach;

    The custom shield is that:

    ID,$key,true); ?>

    I would like to know too, how to change the size of thumbnail. I tried to change the size in function but dont works, the size are the default always (800,600) I want (620,320)

    And have an uncaught TypeError on the js archive “jquery.nivo.slider.pack” the slide is not sliding for next post.

    If you can reply fastly, I’ll be very grateful!

  2. says

    i haven’t tried the tutorial yet, hope it will work for me right with no much issues arising, thanks Suresh, followed you on G+, thansks for this tut it was exactly what i was looking for.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>