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

10 comments

  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!

Leave a Reply

Your email address will not be published.