Create a Slider Using Post type (1)

How to create a custom slider in WordPress without a plugin

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. 

  1. Create a post type without slug and editor.
  2. Create a shortcode with a slider post type query.
  3. 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' => [
'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', '');

And JS:

 wp_enqueue_script( 'occasio-navigation', '', array( 'jquery' ), '2.7.0', true );

Custom JS:

jQuery(document).ready(function($) {
    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'],
    $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>
    endwhile; ?>
    $output = ob_get_clean();
    return $output;

Shortcode to use:


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. 


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. 


  1. 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!

  2. 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!

  3. 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!

  4. 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.

    1. 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.

  5. 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!

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *