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(
        '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()):    	
    ?>
    <div class="flexslider">
	  <ul class="slides">
	  	<?php while($slider->have_posts()): $slider->the_post(); ?>
	    <li 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 endwhile; ?>
	  </ul>
	</div>

    <?php    	
    wp_reset_postdata();
	endif;
    $output = ob_get_clean();
 
    return $output;
}

Shortcode to use:

[wpkslider]

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.