Adding carousel slider on home page of AP theme


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.



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

C. Paul

Creating Genesis Framework related themes, plugins, articles and troubleshooting the issues. Also I am doing the freelance work for clients.

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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.