Do you want to create a custom slider in WordPress without a plugin? Slider is the most common element of the WordPress Content Management System. In WordPress, we can control the slider dynamically. We will show two ways to create a slider.
Slider is made with jQuery. Slider means a block of content that can be spinning. It can be dynamic or the next previous button and both systems can be applied.
Create a Slider by Post Type:
Post Types means different types of content in WordPress. Our mission is to create a slider. So, we will create a post type named “slider”. Let’s see our workflow.
- Create a post type without slug and editor.
- Create a shortcode with a slider post type query.
- Place your shortcode where you want.
Create a Post Type: We needed to create a post type for the slider. We will show a slide item based on a post item. When you have added a post item for our post type. Slide items will automatically be added. How to Create Custom Post Types in WordPress (3 ways)
Let’s create a post type, Use this code:
add_action( 'init', 'wp_register_post_type_slider' ); function wp_register_post_type_slider() { $args = [ 'label' => esc_html__( 'Slider', 'text-domain' ), 'labels' => [ 'menu_name' => esc_html__( 'Slider', 'wpknifer' ), 'name_admin_bar' => esc_html__( 'Slider', 'wpknifer' ), 'add_new' => esc_html__( 'Add Slider', 'wpknifer' ), 'add_new_item' => esc_html__( 'Add new Slider', 'wpknifer' ), 'new_item' => esc_html__( 'New Slider', 'wpknifer' ), 'edit_item' => esc_html__( 'Edit Slider', 'wpknifer' ), 'view_item' => esc_html__( 'View Slider', 'wpknifer' ), 'update_item' => esc_html__( 'View Slider', 'wpknifer' ), 'all_items' => esc_html__( 'All Slider', 'wpknifer' ), 'search_items' => esc_html__( 'Search Slider', 'wpknifer' ), 'parent_item_colon' => esc_html__( 'Parent Slider', 'wpknifer' ), 'not_found' => esc_html__( 'No Slider found', 'wpknifer' ), 'not_found_in_trash' => esc_html__( 'No Slider found in Trash', 'wpknifer' ), 'name' => esc_html__( 'Slider', 'wpknifer' ), 'singular_name' => esc_html__( 'Slider', 'wpknifer' ), ], 'public' => true, 'exclude_from_search' => false, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_nav_menus' => true, 'show_in_admin_bar' => true, 'show_in_rest' => true, 'capability_type' => 'post', 'hierarchical' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite_no_front' => false, 'show_in_menu' => true, 'supports' => [ 'title', 'thumbnail', 'custom-fields', ], 'rewrite' => true ]; register_post_type( 'slider', $args ); }
This post type supports Title, Thumbnail, etc. Also, no Taxonomies will be needed.
Create Slider Output with Shortcode: We have a post type named “slider”. Now we are going to create an output for the slider. We will create a shortcode for the slider. Then you will just place the shortcode where you needed. We will create a slider by using Flexslider.
At first, enqueue some CSS and JS files for the slider. CSS:
wp_enqueue_style( 'flexslider', 'https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/flexslider.css');
And JS:
wp_enqueue_script( 'occasio-navigation', 'https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.0/jquery.flexslider.js', array( 'jquery' ), '2.7.0', true );
Custom JS:
jQuery(document).ready(function($) { $('.flexslider').flexslider({ animation: "slide" }); });
Use this code on functions.php for your slider output:
add_shortcode( 'wpkslider', 'wpk_slider_shortcode' ); function wpk_slider_shortcode( $atts ) { $atts = shortcode_atts( array( 'id' => 'wpk-flexslider', 'class' => '', 'post_type' => 'slider', 'posts_per_page' => 5, ), $atts, 'wpkslider' ); $slider = new WP_Query(array( 'post_type' => $atts['post_type'], 'post_status' => 'publish', 'posts_per_page' => $atts['posts_per_page'], )); ob_start(); if($slider->have_posts()): $count = 1; ?> <div id="<?php echo esc_attr($atts['id']); ?>" class="flexslider <?php echo esc_attr($atts['class']); ?>"> <ul class="slides"> <?php while($slider->have_posts()): $slider->the_post(); ?> <li class="slide-<?php echo intval($count); ?>" style="position: relative;"> <img src="<?php echo get_the_post_thumbnail_url();?>" height="500" /> <h2 style="position: absolute; color: #fff; width: 100%; height: 100%; z-index: 99; top: 0; left: 0; display: flex; justify-content: center; align-items: center; "><?php the_title(); ?></h2> </li> <?php $count++; endwhile; ?> </ul> </div> <?php wp_reset_postdata(); endif; $output = ob_get_clean(); return $output; }
Shortcode to use:
[wpkslider]
Or, You can use attributes Like id and class.
[wpkslider id="wpk-slider" class="wpk-slider"]
We used it as a simple design for our slider.
Conclusion:
Sometimes we need to work with clients. We will need to create a slider. We will try to Create a Custom Slider in WordPress without Plugin. You can create a slider for a custom project.
We hope you like this article. If you have any problem. You can place a comment.
You have noted very interesting details ! ps nice website .
Thanks
A great tutorial for beginners. Working excellently on my client website.
Thanks
This is the correct weblog for anybody who desires to seek out out about this topic. You understand a lot its nearly onerous to argue with you (not that I actually would want匟aHa). You positively put a new spin on a topic thats been written about for years. Nice stuff, just nice!
Thanks
It’s very easy to find out any matter on web as compared to textbooks,
as I found this piece of writing at this web site.
Thnaks
An impressive share, I just given this onto a colleague who was doing just a little analysis on this. And he in truth bought me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the treat! However yeah Thnkx for spending the time to discuss this, I really feel strongly about it and love reading extra on this topic. If potential, as you become experience, would you thoughts updating your blog with more particulars? It is extremely useful for me. Big thumb up for this weblog submit!
Thanks,
Hey are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you need any coding expertise to make your own blog? Any help would be really appreciated!
I am a professional WordPress theme and Plugin developer
I am a professional WordPress theme and Plugin developer
I’m impressed, I have to say. Actually hardly ever do I encounter a blog that’s each educative and entertaining, and let me tell you, you will have hit the nail on the head. Your thought is excellent; the problem is one thing that not sufficient people are talking intelligently about. I’m very blissful that I stumbled throughout this in my seek for one thing relating to this.
Hey there are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you need any html coding knowledge to make your own blog? Any help would be greatly appreciated!
Hey, Thanks for the comment. I am a professional WordPress theme and plugin developer. If you want to run a blog, At first you need to know what type of blog you want to run. If you want to run this type of blog you need to know WordPress. But I think, you need to know the basic admin panel about WordPress for any kind of site.
Hey there! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I’m using the same blog platform as yours and I’m having difficulty finding one? Thanks a lot!
Thanks for the comment I write an article about this.
Very good written information. It will be helpful to anyone who employess it, as well as myself. Keep up the good work – can’r wait to read more posts.
I found your article very helpful. The slideshow is working perfectly.
I was wondering if there is any way to add some attributes to the shortcode [wpkslider] ?
Similar to the [gallery ids="..." ] wordpress default gallery shortcode with ids=”…”., where only images with those ids would be included in the slideshow.
As of now all slides are included in the slideshow. Let’s say we have multiple slideshows and we would like to include certain images on different slideshows?
Thank you again!
First Thanks for the comments.
You can use attributes in shortcode. I use only two attributes Like
[wpkslider id="wpk-slider" class="wpk-slider"]
. As per Your comment, I will explain this.I got the idea and I will extend this article.