The WPResidence theme offers a versatile slider system for showcasing properties. This guide will explain the `wpestate_present_theme_slider` function, the three available slider types, the files involved in their implementation, and where to find the relevant CSS/SCSS files.

1. wpestate_present_theme_slider Function

The `wpestate_present_theme_slider` function is the main entry point for displaying the theme slider. It’s typically located in the `header-media-theme-sliders.php` file.

Function Overview:


function wpestate_present_theme_slider() {
$theme_slider = wpresidence_get_option('wp_estate_theme_slider_type');
if($theme_slider == 'type2') {
wpestate_present_theme_slider_type2();
return;
} else if($theme_slider == 'type3') {
wpestate_present_theme_slider_type3();
return;
}
// Default slider (type1) logic here
$theme_slider = wpestate_return_ids_theme_slider();
if(empty($theme_slider)) {
return;
}
// ... (code for default slider)
}


Step-by-step breakdown:

1. The function first checks the theme slider type set in the theme options.
2. If it’s ‘type2’ or ‘type3’, it calls the corresponding function and exits.
3. For the default slider (type1), it continues with the main function body.
4. It retrieves the property IDs for the slider using `wpestate_return_ids_theme_slider()`.
5. If no properties are set for the slider, the function exits.
6. It then retrieves various theme options and sets up the slider structure.

2. Slider Types

2.1 Default Slider (Type 1)

This is the classic slider type, implemented directly in the `wpestate_present_theme_slider` function.

Key Features:

• Uses Bootstrap’s carousel structure
• Displays property details, price, and features
• Includes navigation arrows and indicators

Files Involved:

• `header-media-theme-sliders.php`: Main implementation
• `header_media_slider_template_1.php`: Template for individual slides

2.2 Slider Type 2

This slider type is implemented in the `wpestate_present_theme_slider_type2` function.

Key Features:

• Uses the Slick slider library
• Displays multiple properties side by side
• Includes custom navigation arrows

Files Involved:

• `header-media-theme-sliders.php`: Contains the `wpestate_present_theme_slider_type2` function
• `header_media_slider_template_2.php`: Template for individual slides

2.3 Slider Type 3

This slider type is implemented in the `wpestate_present_theme_slider_type3` function.

Key Features:

• Uses the Owl Carousel library
• Full-width slides with property details overlay
• Includes thumbnail navigation

Files Involved:

• `header-media-theme-sliders.php`: Contains the `wpestate_present_theme_slider_type3` function
• `header_media_slider_template_3.php`: Template for individual slides

3. CSS/SCSS Files

The styling for the theme sliders is typically found in the following SCSS files:

• `scss/components/header-media/_header-media.scss`: General styles for header media
• `scss/components/header-media/header-media-slider-type-1.scss`: Styles for the default slider (Type 1)
• `scss/components/header-media/header-media-slider-type-2.scss`: Styles for Slider Type 2
• `scss/components/header-media/header-media-slider-type-3.scss`: Styles for Slider Type 3

Key Styling Elements:

Type 1 (Default) Slider:


.theme_slider_wrapper {
&.theme_slider_1 {
// Styles for Type 1 slider
}
}


Type 2 Slider:


.theme_slider_wrapper {
&.theme_slider_2 {
// Styles for Type 2 slider
}
}


Type 3 Slider:


.theme_slider_3 {
// Styles for Type 3 slider
}


4. Customizing the Sliders

To customize the sliders, you can:

1. Modify the PHP template files to change the structure or content of the slides.
2. Edit the SCSS files to change the styling of the sliders.
3. Use WordPress hooks and filters to modify the slider behavior or add new features.

Example: Adding a New Field to Type 2 Slider

In `header_media_slider_template_2.php`:


<div class="prop_new_details">
<!-- Existing content -->
<div class="property_status">
<?php echo esc_html(get_post_meta($postID, 'property_status', true)); ?>
</div>
</div>


Then in `header-media-slider-type-2.scss`, add styling for the new element:


.theme_slider_wrapper {
&.theme_slider_2 {
.property_status {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px 10px;
border-radius: 3px;
}
}
}


5. Performance Considerations

When working with the theme sliders, keep in mind:

• Image optimization is crucial for fast loading times.
• Consider lazy loading techniques for better performance.
• Be mindful of the number of properties displayed in the slider to maintain smooth operation.

This guide provides a comprehensive overview of the WPResidence theme slider system, including its implementation, customization options, and associated files. By understanding these components, you can effectively modify and extend the slider functionality to suit your specific needs.