Create a custom post type slider in wordpress without plugin
There are various slider plugins a theme can use to add sliders to a specific post type.
Plugins can fail to meet your demand.
The quick solution to design a carousel the way you want is to create a custom post type slider without a plugin.
The customized slider can be created by having an array that defines the name of the specific taxonomy.
The WordPress class WP_Query takes the array argument for retrieving post titles and images.
To cut off the story, here are the steps.
Define the post type name.
Specify the name representing types of posts to display its images and titles in the sliders.
The name is defined in the array.
The array and all codes in this post are written in an index.php
$arg = array('post_type'=>'2021_Books');
The taxonomy to add in the slider is ‘2021_Books’
Then, create an object of WP_Query class.
The constructor will take the values of the $arg array.
$thePostsQuery = new WP_Query($arg);
This is a new concept that has not been featured in the article add a slider to WordPress
And some procedures of this page have been copied from the post on how to create a carousel bootstrap in WordPress.
Design slider
The slider in here uses a bootstrap carousel
Create a carousel container that has the following attributes.
- id
- class
- data-ride
Like this.
1.<div id="#customPostTypeWordpress" class = "carousel slide" data-ride="carousel">
2.<ol class="carousel-indicators">
3.</ol>
4.<div class="carousel-inner">
5.</div>
6.<a class="carousel-control-prev" href="#customPostTypeWordpress" role="button" data-slide="prev"> 7.<span class="carousel-control-prev-icon" aria-hidden="true"> 8.</span> 9.<span class="sr-only">Previous</span> 10.</a> 11.<a class="carousel-control-next" href="#webappscarousel" role="button" data-slide="next"> 12.<span class="carousel-control-next-icon" aria-hidden="true"></span> 13.<span class="sr-only">Next</span> 14.</a>15.</div>
This sketch design of the bootstrap slider.
The next procedure is to integrate the WordPress data to bootstrap HTML for the slider.
Add the slider post thumbnail images
After line-4, add a while loop for retrieving post type images.
The loop will bring the last five post images of a specific post category.
In order to control a loop create a variable and set it to zero.
The variable increments five times in a while loop.
This is how to do it.
<?php $postImagesIndex=0; if($thePostsQuery->have_posts()):?>
Introduce a loop.
<?php while($thePostsQuery->have_posts() && $postImagesIndex<=4): $thePostsQuery->the_post(); ?>
The loop checks if there are post and the variable $postImagesIndex is less than four.
Then, use has_post_thumbnail() to check if the posts contain the featured images.
<?php if($thePostsQuery->has_post_thumbnail()):?>
After this line, display all the images in the slider by calling the WordPress the_post_thumbnail() function.
<?php $thePostsQuery->the_post_thumbnail();?>
This line populates the images of the last five posts of a particular taxonomy.
A slider should have a caption.
A short message describing the image.
The post title stands as a caption in this slider.
Add the post title as a slider caption
The slider displays the post title within the image container.
The bottom area of the image will show the image caption (post title).
The bootstrap classes to set the caption are carousel-caption, d-none, d-dm-block.
You should write a <div> tag with these classes before implementing the titles.
<div class="carousel-caption d-none d-md-block">
Then, call a WordPress function special for retrieving post titles.
<h3> <a href="<?php $thePostsQuery->the_permalink();?>"><?php $thePostsQuery->the_title();?></a></h3>
The caption must be a link to a single post.
To set the link in the anchor tag, the attribute href is to $thePostsQuery->the_permalink()
Don’t forget to close.
</div>
Create slider controls
The slider can move images and caption left side or right side.
This simplifies a user to navigate to any image post easily.
Creating clickable previous and next buttons enables a user to control a slider.
The bootstrap classes which creates the controls are carousel-control-prev and carousel-control-prev-icon.
Creating left slide control.
<a class="carousel-control-prev" href="#customPostTypeWordpress" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
Creating the right slide control
<a class="carousel-control-next" href="#customPostTypeWordpress" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
The slider controls are always created outside the while loop.
Create slider indicators
The reader has to know the current displaying image.
The slider indicates the current image by having ranges of small circles.
The most bolded circle tells a particular image count is now showing in the carousel slider.
In bootstrap, carousel-indicators is a class that creates circles as an indicator.
After Line-2, write the following codes.
<?php for($i=0;$i<=4;$++):?>
<li data-target="##customPostTypeWordpress" data-slide-to="<?php echo $i;?>" class="active"></li>
<?php endfor;?>
Things to note.
<li> builds an individual indicator.
The slider is going to show five images hence five indicators are required.
That is why a for loop that counts five times has been deployed.
The list item tag should have the bootstrap class active.
And also,
data-slide-to attribute that takes the values of a loop.
Close a while loop
Close a loop after the closure div tag of the <div class="carousel-inner"> tag.
Here is how to close it.
<?php endwhile;?>
Also, there was an if-condition statement that was checking available posts.
The if-condition must be closed as well.
<?php endif;?>
