Skip to main content

WordPress Featured Posts using Nivo Slider


Today we will look in to how to create a wordpress featured posts slider using Nivo Slider. 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.
wordpress featured posts
First, we will look in to creating a input to select the wordpress posts that to be included in to the Featured posts slider.
All the below codes should go inside your theme’s functions.php file.

Create option to select posts for Featured Slider

Source code   
    

  1. 
add_action("admin_init", "selection_meta_box");
    

    2. 

  2. 
 
    

    3. 

  3. 
function selection_meta_box(){
    

    4. 

  4. 
add_meta_box("featured-post", "Set Featured", "featured_post", "post", "side", "low");
    

    5. 

  5. 
}
    

    6. 

  6. 
 
    

    7. 

  7. 
function featured_post(){
    

    8. 

  8. 
global $post;
    

    9. 

  9. 
$meta_data = get_post_custom($post->ID);
    

    10. 

  10. 
$featured_post = $meta_data["_featured_post"][0];
    

    11. 

  11. 
$selected = ($meta_data["_featured_post"][0] == "yes") ? 'checked' : '';
    

    12. 

  12. 
echo "<p>";
    

    13. 

  13. 
echo "<input $selected type='checkbox' name='featured_post' value='yes' />";
    

    14. 

  14. 
echo "<label>Select this post as Featured.</label>";
    

    15. 

  15. 
echo "</p>";
    

    16. 

  16. 
}
    

    17.
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.
Source code   
    

  1. 
//change post-type to your custom post type
    

    2. 

  2. 
add_meta_box("featured-post", "Set Featured", "featured_post", "post-type", "side", "low");
    

    3.
Or if you want to enable this option to all your post types,
Source code   
    

  1. 
$post_types_array = get_post_types();
    

    2. 

  2. 
foreach ( $post_types_array as $post_type ) {
    

    3. 

  3. 
add_meta_box("featured-post", "Set Featured", "featured_post", $post_type, "side", "low");
    

    4. 

  4. 
}
    

    5.
Now we need to save the selected posts in to the database.
Source code   
    

  1. 
add_action('save_post', 'save_post_details');
    

    2. 

  2. 
 
    

    3. 

  3. 
function save_post_details(){
    

    4. 

  4. 
global $post;
    

    5. 

  5. 
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
    

    6. 

  6. 
return;
    

    7. 

  7. 
$featured_post = trim($_POST["featured_post"]);
    

    8. 

  8. 
update_post_meta($post->ID, "_featured_post", $featured_post);
    

    9. 

  9. 
}
    

    10.

Adding post thumbnail support to the theme

Source code   
    

  1. 
add_theme_support( 'post-thumbnails' );
    

    2. 

  2. 
if ( function_exists( 'add_image_size' ) ) {
    

    3. 

  3. 
add_image_size( 'sliding-images', 800, 400, true );
    

    4. 

  4. 
}
    

    5.
The function add_image_size() will create a separate custom sized image for our 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 to query Featured posts

Source code   
    

  1. 
function show_featured_posts($numbers) {
    

    2. 

  2. 
global $post;
    

    3. 

  3. 
//get $numbers of featured posts
    

    4. 

  4. 
$featured_posts_array = get_posts( 'post_type=any&meta_key=_featured_post&meta_value=yes&numberposts=$numbers&post_status=publish');
    

    5. 

  5. 
}
    

    6.
From the above query, we are getting the latest featured posts in post date order. Let we add the image loop in the same function.
Source code   
    

  1. 
function show_featured_posts($numbers) {
    

    2. 

  2. 
global $post;
    

    3. 

  3. 
//get $numbers of featured posts
    

    4. 

  4. 
$featured_posts_array = get_posts( 'meta_key=_featured_post&meta_value=yes&numberposts=$numbers&post_status=publish');
    

    5. 

  5. 
$output .= '<div class="slider-wrapper theme-default">';
    

    6. 

  6. 
$output .= '<div class="ribbon"></div>';
    

    7. 

  7. 
$output .= '<div id="slider" class="nivoSlider">';
    

    8. 

  8. 
foreach ($featured_posts_array as $post) :  setup_postdata($post);
    

    9. 

  9. 
$nivo_title = "#nivo".get_the_ID(); //assign the postID as title of the image
    

    10. 

  10. 
if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) {
    

    11. 

  11. 
$output .= get_the_post_thumbnail(get_the_ID(), array(800,400), array( "class" => "post_thumbnail", 'title' => $nivo_title )); }
    

    12. 

  12. 
$caption .= "<div id='nivo".get_the_ID()."' class='nivo-html-caption'>
    

    13. 

  13. 
<h2><a href='".get_permalink()."'>".get_the_title()."</a></h2>
    

    14. 

  14. 
".get_the_excerpt()."
    

    15. 

  15. 
</div>";
    

    16. 

  16. 
endforeach;
    

    17. 

  17. 
$output .= '</div>';
    

    18. 

  18. 
$output .= $caption;
    

    19. 

  19. 
$output .= '</div>';
    

    20. 

  20. 
return $output;
    

    21. 

  21. 
 
    

    22. 

  22. 
//reset WP query
    

    23. 

  23. 
wp_reset_query();
    

    24. 

  24. 
}
    

    25.
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.
Next step of our tutorial is importing the necessary nivo files in to the wordpress theme folder.

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 folderyourdomain/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.

Include Nivo slider files to the theme

Source code   
    

  1. 
function include_my_scripts() {
    

    2. 

  2. 
wp_deregister_script( 'jquery' );
    

    3. 

  3. 
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    

    4. 

  4. 
wp_register_script( 'nivopack', get_bloginfo('template_directory').'/js/jquery.nivo.slider.pack.js');
    

    5. 

  5. 
wp_enqueue_script( 'jquery' );
    

    6. 

  6. 
wp_enqueue_script( 'nivopack' );
    

    7. 

  7. 
}    
    

    8. 

  8. 
 
    

    9. 

  9. 
add_action('wp_enqueue_scripts', 'include_my_scripts');
    

    10. 

  10. 
 
    

    11. 

  11. 
add_action('wp_print_styles', 'add_my_stylesheets');
    

    12. 

  12. 
function add_my_stylesheets() {
    

    13. 

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

    14. 

  14. 
wp_register_style('nivo_main_style', get_bloginfo('template_directory').'/js/nivo-slider.css');
    

    15. 

  15. 
wp_enqueue_style( 'nivo_theme_style');
    

    16. 

  16. 
wp_enqueue_style( 'nivo_main_style');
    

    17. 

  17. 
}
    

    18. 

  18. 
 
    

    19. 

  19. 
//Call the Nivo function in to the footer
    

    20. 

  20. 
add_action('wp_footer', 'nivo_functioncall');
    

    21. 

  21. 
function nivo_functioncall() {
    

    22. 

  22. 
echo '<script type="text/javascript">
    

    23. 

  23. 
$(window).load(function() {
    

    24. 

  24. 
$("#slider").nivoSlider();
    

    25. 

  25. 
});
    

    26. 

  26. 
</script>';
    

    27. 

  27. 
}
    

    28.
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
Source code   
    

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

    2.

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.
Source code   
    

  1. 
<?php if(function_exists('show_featured_posts')) echo show_featured_posts('5'); ?>
    

    2.

Why not implement a shortcode?

Source code   
    

  1. 
function tg_featured_posts($atts, $content = null) {
    

    2. 

  2. 
extract(shortcode_atts(array(
    

    3. 

  3. 
"numbers" => '5'
    

    4. 

  4. 
), $atts));
    

    5. 

  5. 
echo show_featured_posts($numbers);
    

    6. 

  6. 
}
    

    7. 

  7. 
add_shortcode('featured', 'tg_featured_posts');
    

    8.
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 for a good start of creating a WordPress Featured Slider.
If you want this slider with more options and as a wordpress plugin, check the premium plugin by Dev7studios Nivo
75 DownloadsPost to Twitter

Comments

Post a Comment

Popular posts from this blog

உடல் எடையை குறைக்க வேண்டுமா ?

இன்றைய அவசர உலகின் மிக பெரிய பிரச்சனையாக இருப்பது உடல் எடை அதிகரிப்பது தான்.மனம் போன போக்கில் உணவு கட்டு பாடு இல்லாமல் கண்டதையும் உள்ளே தள்ளுவதும்,உக்காந்த இடத்திலேயே கணணி முன் நேரத்தை விரயமாக்குவதும் தான் இந்த பிரச்சனைக்கு மூல காரணமாகும். அது சரி இந்த பிரச்சனையை எப்படி இல்லாமல் செய்வது அல்லது உடல் எடையை எவ்வாறு குறைப்பது என்பதை பற்றி பாப்போம் , பல வருட ஆரய்சிக்குபின் மருத்துவர்கள்   உடல் எடைய குறைக்க மிகவும் சுலபமான உடற்பயிற்சியை கண்டுபிடித்துள்ளனர்.இது  100% பயனளிக்க கூடியது, எந்த இடத்திலும் எந்தநேரத்திலும் மிக சுலபமா செய்ய கூடிய உடற் பயிற்சியாகும்.இந்த உடற்பயிற்சிகள் படத்துடன் கீழே தரப்பட்டுள்ளது நீங்களும் முயற்சித்து பாருங்கள கண்டிப்பாக பலன் கிடைக்கும்... முதலில் நாற்காலியில் உட்கார்ந்து இட  பக்கம் பார்கவும் .. ..        அடுத்து  நாற்காலியில் உட்கார்ந்து வல  பக்கம் பார்கவும்  ....  நண்பர்கள் யாரவது மச்சி வாடா சின்ன பீஸ் ,இங்க பாரு சூப்பர் அய்டம்னு சொல்லி கால்ல விழுந்து கூப்பிட்டலோ மேற்கூறிய உடற் பயிற்சிகளை முயற்சித்து பார்கவும் கண்டிப்பாக பலன் கிடைக்கும் .
Post a Comment
Read more

38 (new) web tools to keep you busy

For many of us, the internet represents our daily job, income resource or biggest hobby. Every day we check our emails, read our feeds, visit our websites, find and discuss new things and GOD knows what else. It requires a lot of tools to do all this stuff and sometimes, we forget to search for easier solutions losing valuable time or keeping down the production graph. It's very hard to keep track with everything that's new and popular and this is why we do monthly searches for the best web tools out there. Enjoy!  45+ Web Operating Systems "There are many more web operating systems hoping to bring all your usual desktop applications online in one place - here are more than 45 of our favorites."  15 Ways To Create Website Screenshots "15 Ways To Create Website Screenshots"  Open Source Windows "The promise of open source software is best quality, flexibility and reliability. The only way to have TRUE "Open Source Windows"is
Post a Comment
Read more

40 Fresh & Beautiful Examples of Websites With Large Backgrounds

Using large sized pictures or illustrations as your website’s background adds a great visual appeal to your website’s design. Many web designers use large images as backgrounds as more and more users are now opting for high resolution monitors and high speed internet connections. Here’s a showcase of 40 Fresh and amazing websites that are using large background images. 1.  The Pixel Blog 2.  Copimaj Interactive 3.  Flourish Web Design 4.  Abduction Lamp 5.  Morphix Design Studio 6.  Final Phase 7.  Make Photoshop Faster 8.  WebSarga 9.  Suie Paparude 10.  Duirwaigh Studios 11.  BlackMoon Design 12.  Sepitra 13.  Le Blog de Gruny 14.  Piipe 15.  Mozi Design Studio 16.  Electric Current 17.  Lora Bay Golf 18.  Life Style Sports 19.  ligne triez 20.  Oliver Kavanagh 21.  World of Merix Studio 22.  Le Web Defi 23.  How host 24.  Productive Dreams 25.  Gary Birnie 26.  Glocal Ventures 27.  GDR UK 28.  Absolute Bica 29.  Le Nordik 30.  Leaf Tea Shop & Bar 31.  Paul Smith 32.  EwingCole
Post a Comment
Read more