Today I’ll show you how to add a custom post type to a split slider from Smart Slider for WordPress and visualize it beautifully. As you know, WordPress as a CMS (content management system) is a very powerful platform to create stunning websites, blogs and e-commerce shops. With its thousands of plugins, WordPress is the most popular CMS in the world.
Smart Slider Plugin for WordPress
One of the greatest plugins is Smart Slider, a very powerful slider system for WordPress. With Smart Slider you can create beautiful sliders within minutes. No matter if you’re looking for full screen, full width, nested or testimonial sliders: Smart Slider does what most WordPress users aren’t capable of. You can easily manage your sliders in a dashboard, add text, pictures and even special effects without any coding.
When it comes to individual coding, Smart Slider allows you to embed custom code, which is not always as easy as it seems. Today I am going to show you how you can embed a custom post type in a Split Screen Slider.
1. Create a custom post type
There are several ways you can create custom post types in WordPress.I don’t want to dive too deeply into this topic right now. You can either write your own code or you can use a plugin for that. I created a custom, small plugin for that.
If you’d like to know more about my plugins, especially about my custom post type plugin, send me an email.
In my case, my custom post type is called ‘testimonials’. Here’s a screenshot with a piece of that code.
After installing and activating your custom post type plugin or after adding it to your PHP files, you’re ready for the next step.
2. Create a Split Screen Slider with Smart Slider
The Split Screen Slider by Smart Slider is a beautiful, stunning slider system that will wow your users. Of course, it can be a little tricky to set it up and especially for smaller view ports, such as 1600x900px you might have to do some CSS coding in order to display the slider properly. We’re going to optimize this slider for FullHD (1920×1080) and larger screens, up to 4K today.
- 2.1 Go to the Smart Slider Dashboard within your WordPress Admin Dashboard
- 2.2 Choose ‘New Project’ –> ‘Start with Template’ and type in ‘Split Slider’, finally choose the one with the ‘Luxury Cabin’ heading and hit ‘Import’. Smart Slider will now import all slider template files automatically. Now you’re set and ready to start designing your slider.
For now, you can simply leave the slider as it is because our goal is to embed your custom post type first. Here’s a screenshot of the slider where I want to embed the custom post type – it’s the 2nd slide
3. Use Advanced Custom Fields and create your custom post type meta
We want to display the custom post type similar to the standard post grid in WordPress Elementor. It’s supposed to show the individual title and a description. You can add as many fields as you would like. This example here should only show title and description.
- Install the plugin ‘Advanced Custom Fields’
- Use the plugin and create your first ‘Field Group’ – I call it ‘Custom Testimonials’
- Setup the field ‘Description’ as a paragraph. You can also setup other fields but this is not necessary at this time
- As for location rules, you choose ‘equal to’ ‘Custom Post Type, in my case ‘Testimonial’
- Finally, create your first custom post like you were adding a new blog post. Choose a title for it and enter some information in the custom field you created ‘description’.
- Note: I would recommend not to use the ‘content’ area since you will likely use that to show its content if someone clicks on your post type.
4. Add a piece of code to your functions.php
In order to display your custom post type screen, we have to add some code work to your functions.php. Now that we’ve got the custom post type and the custom fields it’s time to do the hard stuff :-).
Firstly, go to your functions.php and add this piece of code:
<?php
// Create Shortcode to Display Testimonial Post Types within Split Slider
function phil_create_shortcode_testimonials_post_type(){
$args = array(
'post_type' => 'testimonial', // use your own name for that
'posts_per_page' => '3', // you can set your own amount of posts
'publish_status' => 'published',
'orderby' => 'meta_value',
'order' => 'DESC', // I want to show the latest posts first
);
$query = new WP_Query($args);
if($query->have_posts()) :
while($query->have_posts()) :
$query->the_post() ;
$result .= '<div class="testi-item">';
$result .= '<div class="testi-img">' . get_the_post_thumbnail() . '</div>';
$result .= '<div class="testi-name">' . get_the_title() . '</div>';
$result .= '<div class="testi-descr">' . get_field('description') . '</div>';
$result .= '</div>';
endwhile;
wp_reset_postdata();
endif;
return $result;
}
add_shortcode( 'testimonials-list', 'phil_create_shortcode_testimonials_post_type' );
// shortcode code ends here
?>So, what do we have here? I simply created a short code by adding the function for that. I tell WP to set the arrays ‘post type’, the amounts of posts to be shown at the same time and the order. After that I tell WP to check whether there are posts in the specific post type and if yes, ‘show the $results’ styled with the specific CSS classes.
The ‘get_’ arguments are quite common to fetch data within WordPress.
- It’s the item itself
- The post thumbnail is supposed to show up (if there is one)
- The title of your specific custom post type
- Finally, your new field ‘description’ is supposed to show up.
That’s it, now let’s head to the CSS file to style the DIV classes a little bit 🙂
4. Styling your post stream within SmartSlider
Now that we’ve added the code to your functions.php it’s time to slightly style your post stream. I use the following classes for that:
- ‘testi-item’ –> For the entire container
- ‘testi-img’ –> For the thumbnail
- ‘testi-name’ –> For the title
- ‘testi-descr’ –> For the custom field description (in my case, what the client says about me)
Let’s take a look at the CSS code for that:
.testi-item{
width: 100%;
margin:50px auto 0px auto;
clear: both;
margin-bottom: 20px;
overflow: auto;
border-bottom: #eee thin solid;
padding-bottom: 20px;
}
.testi-img img{
width: 200px;
float: left;
margin-right: 25px;
}
.testi-name{
font-size: 35px;
}
.testi-client{
width: 100%;
padding: 20px 150px 20px 0px;
line-height: 1.5;
font-size: 16px;
font-style: italic;
font-weight: 300;
}So, as I said, you need to style the custom post type stream a bit. You can play around with this code. For my purposes, this piece of code works well. But what about smaller screens? Or even larger screens? How about that? Now that we’ve added the CSS code to the style.css file of our Child theme, we have to add the @media screen argument.
5. Adding the @media screen to your CSS code
The @media screen argument is great to set up the view port. While many WordPress users are used to using Elementor with its responsive features, many Web Developers and Web Designers are more used to writing the code individually – so do I. I love the @media screen and I am going to show you how to display your stream beautifully on both smaller and larger screens.
Let’s take a look at this code – I’ve adjusted the CSS classes that we added to the style.css before:
@media screen and (min-width: 1921px){
.testi-item{
width: 100%;
margin:50px auto 0px auto;
clear: both;
margin-bottom: 20px;
overflow: auto;
border-bottom: #eee thin solid;
padding-bottom: 20px;
}}
@media screen and (max-width: 1920px){
.testi-item{
width: 100%;
margin:15px auto 0px auto;
clear: both;
margin-bottom: 20px;
overflow: auto;
border-bottom: #eee thin solid;
padding-bottom: 20px;
}}
.testi-img img{
max-width: 200px;
float: left;
margin-right: 25px;
}
.testi-name{
font-size: 35px;
}
@media screen and (max-width: 1920px){
.testi-client{
width: 100%;
padding: 20px 0px 20px 0px;
line-height: 1.5;
font-size: 16px;
font-style: italic;
font-weight: 300;
}}
@media screen and (min-width: 1921px){
.testi-client{
width: 100%;
padding: 20px 150px 20px 0px;
line-height: 1.5;
font-size: 16px;
font-style: italic;
font-weight: 300;
}}So, we’ve added the @media screen to some of the classes but not to all – why is that? Let me first explain what these classes will do:
- the ‘testi-client’ class will have other paddings on larger screens than on smaller ones
- so does the ‘testi-item’ class.
Why didn’t I add the @media screen to the other classes? This is because I have another two CSS classes that I created in order to show the entire container smaller OR larger, depending on the screen size. The two clases I created are named: ‘testimbckgrnd’ and ‘btnsmaller’.
The last step will take you a minute or so to achieve this. Please add the last piece of code for today to your style.css
@media screen and (max-width: 1920px){
.testimbckgrnd {
transform: scale(0.8);
text-align: left;
transform-origin: left;
}}
@media screen and (max-width: 1920px){
.btnsmaller {
margin-top: -25px !important;
}}The first class tells WP and your browser to scale the entire container to 0.8 of its actual size. We want to stay on the left side and we do not want our container to ‘slide’ to the right which is why we add ‘transform-origin: left’ – otherwise it would happen that your container would look a little strange.
The btnsmaller class is for the button within the slider so that it will look suitable for the scaled down container.
Your Slider with your custom post type is ready for launch
Well, that’s it guys. You’re all set. I hope you enjoyed this tutorial to embed a custom post type in a Smart Slider and especially in a Split Slider.
If you have any questions about this please do not hesitate to contact via email or Facebook.
