Bootstrap Templates Bundle

Thursday, January 1, 2015

Owl carousel slider shortcode in WordPress for Showing Posts or custom Posts

1.       Download owl-carousel from  http://owlgraphic.com/owlcarousel/
2.       Collect files from zip folder
·         AjaxLoader.gif
·         grabbing.png
·         owl.carousel.css
·         owl.carousel.min.js
·         owl.transitions.css
3.        Create A folder in your theme (Our folder name is “include”)
4.       Put this 5 files in your folder
5.       Then go your function.php file and imported the files
Exemple:

/* Enqueue Boothstrap scripts and styles. */

function reg_scripts() {
         /*owl-carousel*/
 wp_register_script( 'owl-carousel-script', get_template_directory_uri() . '/ include /owl-carousel/owl.carousel.min.js', array(), '', true );
 wp_register_style( 'owl-carousel-style', get_template_directory_uri() . '/ include /owl-carousel/owl.carousel.css' );
 wp_register_style( 'owl-transitions-style', get_template_directory_uri() . ' include /owl-carousel/owl.transitions.css' );
       
         /*ENQUEUE STYLE*/
         wp_enqueue_style( 'owl-carousel-style' );
         wp_enqueue_style( 'owl-transitions-style' );
       
         /*ENQUEUE SCRIPT*/
         wp_enqueue_script( 'owl-carousel-script' );     
        }
        add_action('wp_enqueue_scripts', 'reg_scripts');



Active owl-carousel-

1.       Call a new js files like custom-ready.js and put this file in your js folder
2.       Then go to your function.php file and include the file

Exemple
function reg_scripts() {
                 wp_register_script( 'custom-ready', get_template_directory_uri() . '/js/custom-ready.js', array(), '', true );
                               
/*ENQUEUE SCRIPT*/
                 wp_enqueue_script( 'custom-ready' );
}
3.       Active slider with ready document
    jQuery(document).ready(function() {                               
                jQuery(".owl-carousel").owlCarousel({
                                autoPlay: 3000, //Set AutoPlay to 3 seconds
                                items : 4,
                                navigation : true, // Show next and prev buttons
                });                          
}

Create Short code for owlCaroussel

1.       Create a shortcodes.php file inside inc/shortcodes folder
2.       Again go to your function.php file and imported the file
Exemple

include get_template_directory() . '/inc/shortcodes/shortcodes.php';

3.       Then put the below link inside your shortcodes.php file.


//Sellproperty Property Carousel
function sellproperty_property_carousel(){
                $sellpropertyProperty= '<div id="owl-slider" class="owl-carousel-property">';
                $efs_query= "post_type=property&posts_per_page=-1";
                query_posts($efs_query);
                if (have_posts()) : while (have_posts()) : the_post();
                                global $post;
                                $thumb= get_the_post_thumbnail( $post->ID, 'property-image' );         
                                $sellpropertyProperty.='
                               
                                <div class="item">
                                                <div class="item_thumb">'.$thumb.'</div>
                                                <div class="sp_thumbTitle text-center">
                                                                <a href="'. get_permalink() . '">'. get_the_title () .'</a>
                                                                
                                                </div>
                                </div>';
                endwhile; endif; wp_reset_query();
                $sellpropertyProperty.= '</div>';
                return $sellpropertyProperty;
}

/**add the shortcode for the slider- for use in editor**/
function sellproperty_insert_property($atts, $content=null){
                $sellpropertyProperty= sellproperty_property_carousel();
                return $sellpropertyProperty;
}
add_shortcode('sellproperty_property', 'sellproperty_insert_property');


Finally we create an owl carousel shortcode

[sellproperty_property]

3 comments:

  1. salam walikom not working for mee brother

    ReplyDelete
  2. Nice work! Really useful. One error which stopped it working:


    Change the second line of your js to read this:

    jQuery("#owl-slider").owlCarousel({

    After that, all worked fine. Thanks :D






    ReplyDelete

Murphy - Home Maintenance & Repair Service HTML Template

Murphy is a handyman repair service Bootstrap HTML Template. It is ideal for either all-rounders or professional teams to introduce the...