TUTORIAL

How to create a slider with custom post type in WordPress

When creating websites, we often need solutions that go beyond the basic functions of WordPress. Such a solution is a slider, which often has to take certain properties or styles. In this tutorial I will show how to create your own slider, which will display Custom Post.

The Slider will be created in two ways:

    1. The first way is to create a slider that will display your own type of posts using the owlCarousel plugin. The slider’s task will be to display posts in a responsive slider supporting drag&drop.

system.

  1. The second slider will be a full-width slider, which will have a simple JS script with its own navigation. The slider will store its slides in custom post type and will contain the image and title of the image.

Moreover, for each slider type, we will show the implementation for two page builders – WPBakery and Elementor. The sliders will be implemented on the basis of adding new widgets to previously created plug-ins: REDO JSComposer Additional and REDO Elementor Additional.

Our own WordPress slider – how to create?

What you must know

  1. First of all you need to know the builder’s page WPBakery on which we base our website construction. In our previous guides you will find all the knowledge you need to understand the process of creating widgets for WPBakery.
    Link to the article: REDO JSComposer Additional – plugin adding widget to WPBakery.
    Link to WPBakery plugin: https://wpbakery.com/
  2. If you don’t know WPBaker you will need to know another builder’s page – Elementor. This is one of the best known plugins for creating websites in WordPress system. To understand how our plugin for creating widgets for Elementor works – read the article: Elementor – how to create your own custom post plugin.
    Link to Elementor plugin: https://elementor.com/
  3. You will need to read basic documentation of OwlCarousel plugin, which will allow the slider to work properly.
    Link to the plugin: https://owlcarousel2.github.io/OwlCarousel2/
  4. We rely on the basic programming skills of PHP, and the ability to create code HTML and CSS. If you have read our previous guides, creating a slider shouldn’t be difficult.
    Link to the list of previous articles: Articles.

We create a responsive drag&drop slider with OwlCarousel

The first way will be to create a slider that allows you to display our custom posts using the OwlCarousel plugin. We will implement two widgets – one for WPBakery builder’s page, the other for Elementor.

We will start by creating our own type of post.

We will create a custom post type Opinion

In our case, it will be a custom post type ‘opinion’, which will include:

  • Title – Name of the speaker,
  • Distinguishing picture – Referral thumbnail,
  • Excerpt – Title in the company of the speaker,
  • Content – Content of opinion.

If you do not know how to create your own custom post type, please refer to the article:
Create a view (template) for a custom post in WordPress

We create a widget for WPBakery plugin.

Once we have created the custom post type that we want to display, we move on to creating a widget. Create a slider.php file in the render folder and include it in the main.php file. Inside the file slider.php we add basic configuration of the widget. If you don’t know how to do it read the article: Creating your own plugin that adds a widget to the WPBakery plugin.

In this way we get a working widget displaying all ‘opinion’ posts. We have added two test opinions and displayed them using our widget.

jak-stworzyc-slider-w-wordpress-1

jak-stworzyc-slider-w-wordpress-2

The REDO Additional plug-ins for WPBakery and Elementor can be downloaded here – REDO Additional (6 downloads)

Create a widget for the Elementor plugin

If we are using Elementor, we need to create a widget using our REDO plugin Elementor Additional – if you don’t know how our plugin works I refer to the article: Elementor – how to create your own custom post plugin.
We create slider.php file in render folder and attach it in main.php file. Inside slider.php file we add basic widget configuration.

We receive a properly functioning Elementor – Slider widget.
elementor-slider-1

The REDO Additional plug-ins for WPBakery and Elementor can be downloaded here – REDO Additional (6 downloads)

We create a slider with an owlCarousel

We attach the plugin to the project

The part about creating a widget is already well known to us from previous articles and has not caused us any problem. Now we will move on to owlCarousel plugin application. There are two ways to use the plugin – you can do it. First way is to attach plugin files from external CDN source or physically place files on the server. In this case we will use the option to attach files via CDN links.

The links should be properly attached to the main CSS file and the main JS file.

CSS:

  • <link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css” rel=”stylesheet”>
  • <link href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css” rel=”stylesheet”>

JS:

  • <script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”></script>

Basic slider configuration

Now we have to go back to the code of our slider.php widget and we have to close our opinions in one container that will work as owlCarousel. To do this you need to add foreach before the loop div, which we will call . owl-carousel and we will add .owl-theme to use the basic properties of the owlCarousel plugin.

Our code will look like this:

Now we move on to the initiation of owlCarousel(). In main js file, we add basic plugin configuration:

Radio! We created the slider with owlCarousel.

Our javascript code correctly initiated the owlCarousel() for a previously created div’a .owl-carousel. It has basic slider properties. If we would like to set our slider in more detail, nothing stands in the way. Please refer to the plugin documentation and set the appropriate values.

jak-stworzyc-slider-w-wordpress-3

Slider WordPress with own navigation

We move on to the creation of a slider, which will have basic animation when changing slides and navigation. This type of slider is usually used as the first section of the homepage – we can find its use in our project Pierson-Export.

We create a custom post type “slider”

.
We will store our slides in a custom post type : “slider”. We want the slide to contain the image from the display and the slide title. So we will need two fields:

  • Featured image,
  • Title.

If you don’t know how to create a custom post type – again I refer to the article: Create view (template) for custom post in WordPress.

Widget containing slider – WPBakery, Elementor

If we have already created a custom post type, you should create, as with the first slider type, files for our plugins – depending on the page builder you use, we use the appropriate plugin:

  • WPBakery – REDO JSComposer Additional
  • Elementor – REDO Elementor Additional

You will find the process of creating the widget in these articles:

We move on to creating a widget. In this case, I will do it for WPBakery’s builder page. Setting up the slider for Elementor will be very similar to the slider using owlCarousel, so you can check how to do it by clicking here.

Create a customslider.php file in the render folder and assign it in main.php. Then add the basic widget configuration in the customslider.php file.

The structure of your own WordPress slider

Now we can move on to creating a slider structure. In a previously created div’ie – .slider-container – we create a navigation of our slider which will be displayed in the div’ie – .slider-change. Before displaying the navigation, check that our slider contains enough sliders to create a navigation. The slider must have more slides than 1, so we add a condition:

Then inside the diva .slider-change – we iterate using the foreach, displaying a navigation that will contain links to our slides. Each link must contain an appropriate ID referring to the corresponding slide. So we need to create a $i=0 – it will be responsible for giving the appropriate ID to the navigation elements. We will enlarge it every time we add a navigation element ID. Additionally, the ID will be displayed as a navigation element – increased by 1 navigation code:

Now we come to the slide display. We create a foreach, displaying the $slider. You should create a $x = 0 , which will check that the first element in the array gets a slide-active class – .slide-active. This class will make the slide visible, while slides without this class will not be visible on the screen. Images will be displayed as a background slide. The slide title will be included in the h2 header with .slider-header. Slider code:

The whole PHP code including counters:

Javascript supporting slider navigation

We move on to the creation of a slider script that will handle navigation between the slides. Before that, we need to create a few sample slides with titles and images – in our case it will be three slides.

We will use pure javascript to create the script, because these are very simple instructions that do not require jQuery.

We create two tables:

  • Slider Hygiene Links – myBtns[]
  • Slide table – sliders[]

With querySelectorAll we download our elements:

Now in a loop for each element myBtns[] we add EventListener “click”, checking if we have clicked a link to the slide. If you clicked, check with getElementsByClassName the active navigation link and active slide.

Now delete the active classes and assign them to the corresponding link in the navigation and the corresponding slide. This way you get the whole JS script:

CSS code of our slider

That is it. We have our slider with navigation support working. Now you can move on to styling and adding value to our classes.

The first thing to do is to style our slider, it must have position: relative to properly store our slides, which will have position: absolute and will be displayed on full-width. Accordingly to the slide you need to set background:cover to cover the entire diva surface. By default .slider will have visibility: hidden, only after receiving a class .slide-active with animation fadeIn visibility will change to visible.

We can stylize the navigation in any way we want, just as we can change the way it is displayed in PHP code. Below we add our CSS slider style, which also includes a slide animation.