There are many plugins available at the plugin store, with the help of that you can build testimonial, there are some free and there are some paid plugins but the most important thing is that, that one plugin will fulfill your requirement or not. so it depends on client requirements that what kind of testimonial plugin they will prefer. But here is a catch that whatever plugin you want to install, Is that plugin will not harm your site by malware or not affect at site speed.
There are a few points regarding the plugin:-
- Is plugin downloaded by a trusted or well-known source?
- Is the plugin safe and will not affect your site security?
- is plugin will not affect your site performance?
Considering all the mention things. I would suggest that you have to build up your own testimonial section on the WordPress website. There is no rocket since to build custom testimonial slider in WordPress without a plugin. I will mention a few steps to making your own custom testimonial slider in WordPress.
Here are the Codepen Demo and Github Demo for testimonial slider, which one we will convert into WordPress custom slider using custom post type.
Step 1:
function custom_post_types() {
//testimonial post type
register_post_type('testimonial',
array(
'labels' => array(
'name' => __('Testimonial'),
'singular_name' => __('testimonial'),
),
'public' => false,
'has_archive' => false,
'show_ui' => true,
'rewrite' => array( 'slug' => 'testimonial' ), // my custom slug
'menu_icon' => 'dashicons-format-quote',
'supports' => array( 'title', 'editor', 'thumbnail'),
)
);
}
add_action('init', 'custom_post_types');
Put this code in your functions.php file and save then you can see in your dashboard's left sidebar an option which name will Testimonial. see the screenshot bellow
Step 2:
Put this code in your functions.php file and save that code will make a shortcode to use at any page and any section [testimonial limit="2"].
the limit will decide how many testimonials you want to show in the slider.
Download Code from github
the limit will decide how many testimonials you want to show in the slider.
Download Code from github
The code is not visible properly here so I attached a link to download this part of code.
Step 3:
Now time to put some CSS and JS to buildup some visual impact of custom testimonial slider.
CSS Library:
- https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css
- https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css
- https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
And here is CSS for styling testimonial layout:
/*testimonial*/
.testimonial-area {background: url(https://srmahour.github.io/custom-testimonial-slider-and-blog/images/testimonial-bg.jpg) no-repeat;padding: 30px 0;background-size: cover;background-position: center;background-attachment: fixed; min-height: 100vh;}
.testimonial-area p {color: #000;font-weight: 500;}
.testimonial-area .heading h2 {color: #000;}
.testimonial {padding: 20px;background: #fff;position: relative;transform: scale(0.8); padding-top: 100px;margin-top: 100px; transition: all 0.3s linear; border-radius: 4px;}
.testimonials .slick-slide.slick-current.slick-active.slick-center .testimonial {transform: scale(1);}
.author-img {position: absolute;width: 150px; max-height: 150px; border-radius: 200px;overflow: hidden;border: 5px solid #fff;top: -75px;left: 0;right: 0;margin: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.1); background: #fff;}
.author-quote h4 {font-size: 20px;font-family: 'Dosis', sans-serif;letter-spacing: 0.5px;}
.author-quote {text-align: center;}
.author-quote blockquote i {color: #ffbe00;font-size: 22px;padding: 0 5px;}
.author-quote blockquote {line-height: 30px;color: #676767;margin: 15px 0;}
ul.slick-dots li button {font-size: 0;height: 14px;width: 14px;padding: 0;border-radius: 100px;border: 0;background: #5745ae;border: 2px solid #fff; transition: all 0.3s ease;}
ul.slick-dots li {display: inline-block;margin: 0 3px;}
ul.slick-dots {list-style: none;padding: 0;margin: 0;text-align: center;}
ul.slick-dots li.slick-active button {width: 30px;}
.slick-arrow:after {content: "\f053";font-family: 'FontAwesome';font-size: 22px;}
.slick-arrow {position: absolute;top: 0;bottom: 0;height: 40px;width: 40px;font-size: 0;margin: auto;border: 0;background: rgba(255,255,255,0.5); z-index: 1;cursor: pointer;}
.slick-next.slick-arrow{left:inherit ; right: 0;}
.slick-next.slick-arrow:after{content:"\f054";}
.testimonials .slick-list.draggable {padding: 0 20px !important;}
/*end*/
.heading h2 {position: relative;font-weight: 600;font-family: 'Dosis', sans-serif;text-transform: uppercase;padding: 0 0 10px;color: #231f20;}
.heading h2:before {position: absolute;content: '';height: 1px;width: 150px;background: #ffbe00;left: 0;right: 0;bottom: 1px;margin: auto;}
.heading h2:after {content: '';height: 3px;width: 50px;background: #3c377b;position: absolute;left: 0;right: 0;margin: auto;bottom: 0;}
.heading p {color: #000;}
.heading {text-align: center;padding: 20px 0;max-width: 750px;margin: 0 auto;}
/*media*/
@media (max-width:574px){
.testimonials .slick-list.draggable {padding: 0!important;}
}
you can download this css code form here. codepen
JS Library:
And here is JS code to start rotating testimonial slider. you can download this one code form Codepen
//testimonial slider
$('.testimonials').slick({
slidesToShow: 3,
slidesToScroll: 1,
speed: 300,
dots:true,
centerMode: true,
centerPadding: '0px',
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
arrows:false
}
}
]
});
Finally:
Now add some testimonials in the dashboard using testimonial section and use testimonial shortcode in page to place testimonial slider where ever you want. see the screenshot:
[testimonial limit="2"]
Here you can download complete HTML code of Testimonial Slider from my GitHub account or Codepen account Download Code
you can use this WordPress custom post type Testimonial slider's shortcode with any page builder plugin like DIVI, WP Bakery, or Elementor
Comments