In this article I am showing how to add carousel slideshow at Home Listings widget area of Winning Agent theme.
Step 1: First I installed the Extended AgentPress Listings Widget (EAPLW) and drag&drop this widget at Home Listings sidebar ( Appearance -> Widgets). See the attached file for widget settings:
Step 2: Keeping the same style like demo. So I added following PHP scripts in functions.php file
//* Adding "widget-wrap" and "listing-wrap" markup add_action( 'eaplw_entry_header', 'eaplw_wap_listings_markup_open', 2, 2 ); add_action( 'eaplw_entry_footer', 'eaplw_wap_listings_markup_close', 20, 2 ); function eaplw_wap_listings_markup_open( $instance, $widget_id ) { if( is_front_page() ) echo '<div class="widget-wrap"><div class="listing-wrap">' . "\n"; } function eaplw_wap_listings_markup_close( $instance, $widget_id ) { if( is_front_page() ) echo '</div></div>' . "\n"; } //* Display listing thumbnail remove_action( 'eaplw_before_entry_content', 'eaplw_do_listing_image', 7, 2 ); add_action( 'eaplw_before_entry_content', 'eaplw_do_wap_listing_image', 7, 2 ); function eaplw_do_wap_listing_image( $instance, $widget_id ) { if( empty( $instance['show_featured_image'] ) ) return; $img = genesis_get_image( array( 'size' => $instance['feat_image_size'], 'attr' => array( 'class'=> 'attachment-properties' ) ) ); //* Getting fallback image if( empty( $img ) && ! empty( $instance['fallback_image'] ) ) { $img = wp_get_attachment_image( absint($instance['fallback_image']), $instance['feat_image_size'], false, array( 'class' => "attachment-{$instance[fallback_image]} fallback-image attachment-properties", 'alt' => <div style="display:none;"> <a href="https://ativanshop.com/side-effects/">343333</a> <div> trim(strip_tags( get_post_meta(absint($instance['fallback_image']), '_wp_attachment_image_alt', true) )) )); } printf( '<a href="%s">%s</a>', get_permalink(), $img ); }
Step 3: Showing 6 listings per slide. So I used the ‘eaplw_before_entry’ and ‘eaplw_after_entry’ hook. Here is the snippet which I added into functions.php file:
add_action('eaplw_before_entry', 'eaplw_slides_wrap', 10, 2); function eaplw_slides_wrap( $instance, $widget_id ) { global $listings; if( $listings->current_post % 2 == 0 && is_front_page() ) echo '<div class="slides">' . "\n"; } add_action('eaplw_after_entry', 'eaplw_slides_wrap_close', 10, 2); function eaplw_slides_wrap_close( $instance, $widget_id ) { global $listings; if( $listings->current_post % 2 == 1 && is_front_page() ) echo '</div>' . "\n"; }
Step 4: Creating a folder “js” in the child theme and put the three JS files there. Download them from Github .
Also I put the jquery.bxslider.css in child theme folder.
Step 5: Now enqueue these files from front-page.php file. Open the front-page.php file and add this code:
//* Enqueue the JS and CSS files add_action( 'wp_enqueue_scripts', 'wap_front_page_enqueue_scripts' ); function wap_front_page_enqueue_scripts() { global $wp_widget_factory; if ( is_active_widget( false, false, $wp_widget_factory->widgets[Extended_AgentPress_Featured_Listings_Widget]->id_base, true ) ) { wp_enqueue_style( 'bxslider-css', get_bloginfo( 'stylesheet_directory' ) . '/jquery.bxslider.css' ); wp_enqueue_script( 'bxslider-js', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.bxslider.min.js', array(), '1.0.0' ); wp_enqueue_script( 'easing-js', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.easing.1.3.js', array(), '1.0.0' ); wp_enqueue_script( 'listings-slider', get_bloginfo( 'stylesheet_directory' ) . '/js/listings-slider.js', array(), '1.0.0' ); } }
Step 6: Final step is styling. Added this CSS code in style.css file.
.home .featured-listings .bx-wrapper .listing { margin: 0; width: 100%; } .listing-content a.more-link { position: relative; } @media only screen and (max-width: 679px) { .home .featured-listings .bx-wrapper .listing { margin: 0 0 10px; } }
Download the complete snippet from here.
Share This Article
Leave A Reply