Adding carousel slider on home page of AP theme

carousel-effect-aplistings

Original request was :

I’ve been trying to create a slider with 2-3 rows – 3 listings per row, so that 6 or 9 listings show at a time, then move on to the next slide. I’m wondering if there is a way to combine your tutorial with your latest Extended Agent Press Listings Widget plugin to achieve that? If it takes more work, would you be willing to help me with this? How much do you charge? ~ Lisa

 

Step 1:

Putting some js and css files in AgentPress Pro theme folder.

  1. Download and move the jquery.bxslider.css in agentpress-pro folder
  2. Download and move the jquery.bxslider.min.js, jquery.easing.1.3.js and listings_slider.js files in agentpress-pro/js folder

 

Step 2:

Enqueue the above JS and CSS files for home page only. Open the front-page.php file and search this function “agentpress_front_page_enqueue_scripts” . Add the following codes into that function:

//* Enqueue JS and CSS files for Carousel Effect
  	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 3:

In this tutorial I am using Extended AgentPress Listing Widget plugin. Also Lisa purchased and using this plugin on her site. See the screenshot for widget settings.

eaplw-widget-settings

 

Step 4:

Add the following the PHP script in functions.php file. Hooks eaplw_before_entry and eaplw_after_entry are available in EAPLW plugin. So this code will only work if you have EAPLW plugin.

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 )
    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 )
    echo '</div>' . "\n";
}

 

Step 5:

Add the CSS code in style.css file.

.full-width .featured-listings .bx-wrapper .listing {
  margin: 0 0 20px;
  width: 100%;
}

@media only screen and (max-width: 679px) {
  .full-width .featured-listings .bx-wrapper .listing {
    margin: 0 0 10px;
  }
}

Download the full pack from Github.

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *