Adding a custom slider to your WordPress theme can enhance the look and functionality of your site, especially when showcasing featured content like movies, products, or blog posts. In this tutorial, we’ll walk through how to create a slider in a WordPress theme, using custom post types and metadata, and ensure everything is styled and functional with custom CSS and JavaScript.
Step 1: Create the Slider Class
First, define the Slider class to handle fetching the posts, rendering the slider HTML, and enqueuing the required assets.
Here’s a breakdown of the class:
<?php
/**
* Slider class.
*
* @package ScreenTime
*/
namespace Rtth\Home;
use Helpers\Singleton_Trait;
use WP_Query;
/**
* Slider class.
*/
class Slider {
use Singleton_Trait;
/**
* Initialize the class.
*/
public function __construct() {
$this->enqueue_scripts();
}
/**
* Enqueue necessary scripts and styles for the slider.
*/
public function enqueue_scripts(): void {
wp_enqueue_style( 'custom-slider-css', RTTH_THEME_URI . '/assets/css/homepage/slider.css', array(), RTTH_VERSION );
wp_enqueue_script( 'custom-slider-js', RTTH_THEME_URI . '/assets/js/homepage/slider.js', array( 'jquery' ), RTTH_VERSION, true );
}
/**
* Render the slider.
*/
public function render(): void {
$query_args = array(
'post_type' => 'rt-movie',
'posts_per_page' => 5,
'tax_query' => array(
array(
'taxonomy' => 'rt-movie-label',
'field' => 'slug',
'terms' => 'slider',
),
),
);
$movies_query = new WP_Query( $query_args );
if ( ! $movies_query->have_posts() ) {
return;
}
?>
<div class="custom-slider">
<div class="slider-wrapper">
<div class="slides">
<?php
while ( $movies_query->have_posts() ) :
$movies_query->the_post();
$poster = get_post_meta( get_the_ID(), 'rt-movie-meta-carousel-poster', true );
$title = get_the_title();
if ( ! $poster || ! $title ) {
continue;
}
$poster_url = wp_get_attachment_url( $poster );
?>
<div class="slide">
<img src="<?php echo esc_url( $poster_url ); ?>" alt="<?php echo esc_attr( $title ); ?>" draggable="false" />
<div class="slide-text">
<h2 class="slide-text-title"><?php echo esc_html( $title ); ?></h2>
<p class="slide-text-excerpt"><?php echo esc_html( get_the_excerpt() ); ?></p>
<p class="slide-text-basic">
<?php
$release_date = get_post_meta( get_the_ID(), 'rt-movie-meta-basic-release-date', true );
$content_rating = get_post_meta( get_the_ID(), 'rt-movie-meta-basic-content-rating', true );
$runtime = get_post_meta( get_the_ID(), 'rt-movie-meta-basic-runtime', true );
if ( ! empty( $runtime ) && is_numeric( $runtime ) ) {
$runtime = floor( $runtime / 60 ) . 'H ' . ( $runtime % 60 ) . 'M';
}
printf( '<span>%s</span> ● ', esc_html( $release_date ) );
printf( '<span>%s</span> ● ', esc_html( $content_rating ) );
printf( '<span>%s</span>', esc_html( $runtime ) );
?>
</p>
<div class="slider-action-buttons">
<?php
$genres = get_the_terms( get_the_ID(), 'rt-movie-genre' );
if ( $genres ) {
foreach ( $genres as $genre ) {
printf( '<span class="slider-button">%s</span>', esc_html( $genre->name ) );
}
}
?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<div class="dots-navigation"></div>
</div>
<?php
wp_reset_postdata();
}
}
Step 2: Enqueue CSS and JavaScript for the Slider
In the enqueue_scripts method, we are enqueueing the necessary CSS and JS files:
wp_enqueue_style( 'custom-slider-css', RTTH_THEME_URI . '/assets/css/homepage/slider.css', array(), RTTH_VERSION ); wp_enqueue_script( 'custom-slider-js', RTTH_THEME_URI . '/assets/js/homepage/slider.js', array( 'jquery' ), RTTH_VERSION, true );
Ensure you have these files in your theme directory and they contain the required styles and functionality to make the slider interactive.
Step 3: Render the Slider in Your Theme
To render the slider on your homepage or any other page, simply call the render() method in your template file:
<?php use Rtth\Home\Slider; Slider::get_instance()->render(); ?>
This method will output the slider HTML wherever you place the above code.
Step 4: Add CSS and JavaScript for the Slider
Here’s an example of CSS (slider.css):
.custom-slider {
position: relative;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease;
}
.slide {
min-width: 100%;
box-sizing: border-box;
position: relative;
}
.slide img {
width: 100%;
height: auto;
display: block;
}
.slide-text {
position: absolute;
bottom: 20px;
left: 20px;
color: white;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
In your JS file (slider.js), you can handle the slider functionality:
(function ($) {
$(document).ready(function () {
let currentIndex = 0;
const slides = $('.slides');
const totalSlides = $('.slide').length;
setInterval(() => {
currentIndex = (currentIndex + 1) % totalSlides;
slides.css('transform', `translateX(-${currentIndex * 100}%)`);
}, 3000);
});
})(jQuery);
Step 5: Customizing the Slider
You can expand the slider functionality by adding:
- Navigation buttons: Left and right arrows to control the slide movement.
- Dots: Indicate the current slide.
- Autoplay: Automatically cycle through the slides.
- Responsive Design: Adjust the layout for different screen sizes.
The slider fetches posts from a custom post type (rt-movie), applies custom styles, and includes dynamic content like movie titles, posters, and metadata. This approach allows for a flexible and maintainable solution for adding a slider to your WordPress theme.