0

I'm trying to create a slider that displays slides with info from custom post type posts (Testimonials). I have a page template set up that generates divs with the post content, but what's the best way to tackle the slider element?

P.S. I'd like the slides to display in a random order too, if possible.

Here's the code for my page template:

<?php
/**
 * Template Name: Testimonials Page
 */

get_header(); ?>

<div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/content', 'page' );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End of the loop.
            ?>

        </main><!-- #main -->
    </div><!-- #primary -->

<div class="home-page-testimonials">
    <h1>Don't just take our word for it...</h1>
 <?php
    $args = array( 'post_type' => 'testimonials' );
    $the_query = new WP_Query( $args );
    $thumbnailURL;
    ?>
    <?php if ( $the_query->have_posts() ) : ?>
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
    <div class="home-page-testimonial">
        <img class="home-page-testimonial-icon" src="<?php if ( has_post_thumbnail() ) {
                                    $thumbnailURL = the_post_thumbnail_url( array(120,120) );
                                } else {
                                    $thumbnailURL = get_stylesheet_directory_uri() . "/images/DefaultTestimonialIcon.png";
                                }
                                echo $thumbnailURL; ?>">
        <div class="home-page-testimonial-info">
        <div class="entry-content">
            <h2><?php the_title(); ?></h2>
            <?php if ( ! empty( get_post_meta($post->ID, "_testimonialURL", true) ) ) {
                echo '<p class="home-page-testimonial-link"><a href="' . get_post_meta($post->ID, "_testimonialURL", true) . '" target="_blank">' . get_post_meta($post->ID, "_testimonialWebsiteName", true) . '</a></p>';
            } ?>
            <div class="home-page-testimonial-quote"><?php the_content(); ?></div>
        </div>
        </div>
    </div>
    <?php wp_reset_postdata(); endwhile; endif;
    ?>

</div>

1

Since WP loaded with jQuery by default, you might be able to modify this script http://www.jqueryscript.net/rotator/Simple-Text-Slider-Rotator-with-jQuery-CSS.html to create a testimonials sliders.

For randomizing your query, just put

'orderby'        => 'rand'

in your $args variable like this:

$args = array( 
'post_type' => 'testimonials', 
'orderby'        => 'rand');

There are way more arguments you can learn from here: https://codex.wordpress.org/Class_Reference/WP_Query

Hope this would help.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.