Adding Carousel Slideshow at Home Listings Widget Area using EAPLW and Winning Agent Theme

Live Demo

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'   =&gt; <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( '&lt;a href=&quot;%s&quot;&gt;%s&lt;/a&gt;', 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.