Nivo Slider dynamic
How to Nivo Slider Dynamic in WordPress
You may know that nivo slider is a most common slider for website. This nivo slider jquery version is free to use everyone. In this tune show how to this jquery slider dynamic in WordPress.
To dynamic nivo slider we need to register a custom post, because we are add slide from the custom post. To register a custom post we can taking below code in theme functions.php
<div class="de2">function unique_name_for_custom_post() {</div>
<div class="de1"></div>
<div class="de2"> register_post_type( 'slider',</div>
<div class="de1"> array(</div>
<div class="de2"> 'labels' => array(</div>
<div class="de1"> 'name' => __( 'Slider' ),</div>
<div class="de2"> 'singular_name' => __( 'Slide' ),</div>
<div class="de1"> 'add_new' => __( 'Add New' ),</div>
<div class="de2"> 'add_new_item' => __( 'Add New Slide' ),</div>
<div class="de1"> 'edit_item' => __( 'Edit Slide' ),</div>
<div class="de2"> 'new_item' => __( 'New Slide' ),</div>
<div class="de1"> 'view_item' => __( 'View Slide' ),</div>
<div class="de2"> 'not_found' => __( 'Sorry, we couldn't find the Slide you are looking for.' )</div>
<div class="de1"> ),</div>
<div class="de2"> 'public' => true,</div>
<div class="de1"> 'publicly_queryable' => true,</div>
<div class="de2"> 'exclude_from_search' => true,</div>
<div class="de1"> 'menu_position' => 4,</div>
<div class="de2"> 'has_archive' => true,</div>
<div class="de1"> 'hierarchical' => true,</div>
<div class="de2"> 'capability_type' => 'post',</div>
<div class="de1"> 'rewrite' => array( 'slug' => 'slide' ),</div>
<div class="de2"> 'supports' => array( 'title', 'editor', 'custom-fields', 'thumbnail' )</div>
<div class="de1"> )</div>
<div class="de2"> );</div>
<div class="de1"></div>
<div class="de2"> }</div>
<div class="de1">add_action( 'init', 'unique_name_for_custom_post' );</div>
If you need to crop each slide for every slider same width and height, need to given thumbnail support. For thumbnail support can take below code in your theme functions.php
<div class="de2"> add_theme_support( 'post-thumbnails', array( 'post', 'slider') );</div> <div class="de1"> add_image_size( 'slider-image', 670, 325, true );</div> <div class="de1">//here 670 is width & 325 is height</div>
Now need to dynamic HTML markup. Normally Nivo slider HTML markup will be like this:
<div class="slider-wrapper theme-light"> <div class="nivoSlider" id="slider"> <img src="<?php echo get_template_directory_uri(); ?>/images/nemo.jpg" alt="This site developed by Rasel Ahmed" title="This site developed by Rasel Ahmed"/> <img src="<?php echo get_template_directory_uri(); ?>/images/toystory.jpg" alt=""/> <img src="<?php echo get_template_directory_uri(); ?>/images/up.jpg" alt="" title="#htmlcaption"/> <img src="<?php echo get_template_directory_uri(); ?>/images/walle.jpg" alt=""/> </div> <div class="nivo-html-caption" id="htmlcaption"> <p>This is html caption. This is <a href="http://rrfoundation.net">link</a></p> </div> </div>
This markup replace by the below markup
<div class="slider-wrapper theme-light"> <div id="slider" class="nivoSlider"> <!-- This query for slider images --> <?php global $post; $args = array( 'posts_per_page' => -1, 'post_type'=> 'slider' ); $myposts = get_posts( $args ); foreach( $myposts as $post ) : setup_postdata($post); ?> <img src="<?php $slide_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider-image' ); echo $slide_image[0]; ?>" alt="" title="#<?php the_ID(); ?>"/> <?php endforeach; ?> </div> <!--This code for slider caption query --> <?php global $post; $args = array( 'posts_per_page' => -1, 'post_type'=> 'slider' ); $myposts = get_posts( $args ); foreach( $myposts as $post ) : setup_postdata($post); ?> <div id="<?php the_ID(); ?>" class="nivo-html-caption"> <?php the_content(); ?> </div> <?php endforeach; ?> </div>
There is two simple query for dynamic slider image & slider caption. If can not understand comment here.
Comments are closed
