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' => [
'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.