In this tutorial we will learn how to create custom post type slider in WordPress. If you are thinking about to create slider WordPress without plugin then, this is the tutorial for you.
We are going to create custom post type named “slider” and then use it to store caption and image and finally fetch it at the desired location in the front end. Mostly below the navigation bar in our website.
Let’s get started
What we are going to do ?
- Create custom post type named “Slider”.
- Remove slug and WP Editor field from our custom post type.
- Add Featured Image Support if using a custom built theme.
- Add Custom Meta box addon to save link (if necessary).
- Fetch the custom post type (slider) content in the front end.
Step 1 :- Create Custom Post Type Called Slider
Let’s break down on what we are going to need inside a slider.
- Title.
- Caption.
- Link
By default WordPress gives the ability to add title, description, excerpt, slugs into custom post type. We are not going to need slug and editor field since we are using title,excerpt and featured image field to store our information. Lets create custom post type first.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/** * Create Custo Post Type for Slideres */ function create_slider_post_type() { $labels = array( 'name' => __( 'Sliders' ), 'singular_name' => __( 'Sliders' ), 'all_items' => __( 'All Sliders' ), 'view_item' => __( 'View Slider' ), 'add_new_item' => __( 'Add New Slider' ), 'add_new' => __( 'Add New Slider' ), 'edit_item' => __( 'Edit Slider' ), 'update_item' => __( 'Update Slider' ), 'search_items' => __( 'Search Slider' ), 'search_items' => __('Sliders') ); $args = array( 'labels' => $labels, 'description' => 'Add New Slider contents', 'menu_position' => 27, 'public' => true, 'has_archive' => true, 'map_meta_cap' => true, 'capability_type' => 'post', 'hierarchical' => true, 'rewrite' => array('slug' => false), 'menu_icon'=>'dashicons-format-image', 'supports' => array( 'title', 'thumbnail','excerpt' ), ); register_post_type( 'slider', $args); } add_action( 'init', 'create_slider_post_type' ); |
Step 2 :- Remove Slug support from custom post type
We are not going to make the post feature of slider visible is the front end except in homepage so, we are removing it. As for editor, we can use it to store caption and excerpt for the link. But i would like to make things cleaner and more maintainable.
So, we are going to make custom fields for the link on the next step. You can use the editor by simply comment out the remove_post_type_support( 'slider', 'editor' ); below.
|
1 2 3 4 |
add_action( 'init', function() { remove_post_type_support( 'slider', 'editor' ); remove_post_type_support( 'slider', 'slug' ); } ); |
Step 3 : Add featured Image Support
This step may not be required for you, as most of the theme that you buy from the store automatically comes in featured image support enabled.
If you are using custom theme then, you need to add some piece of code inside the functions.php file in WordPress. Else it will not show the featured image option inside your admin panel while creating a slider post.
|
1 2 3 4 5 6 7 |
function cih_theme_support(){ add_theme_support( 'post-thumbnails' ); add_image_size( 'slider_image','1024','720',true); } add_action('after_setup_theme','cih_theme_support'); |
Step 4 : Add Link Field Creating Custom Meta-Box Field in WordPress Admin
Note : You can skip this step, if you want to use editor as the caption and excerpt as link holder.
Lets create new custom field for link field inside a slider post type.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
function sliderLink_add_meta_box() { add_meta_box('slider_link','Slider Link','slider_link_callback','slider'); } function slider_link_callback( $post ) { wp_nonce_field('slider_link_save','slider_link_meta_box_nonce'); $value = get_post_meta($post->ID,'_slider_link_value_key',true); ?> <input type="text" name="slider_link_field" id="slider_link_field" value="<?php echo esc_attr( $value ); ?>" required="required" size="100" /> <?php } add_action('add_meta_boxes','sliderLink_add_meta_box'); function slider_link_save( $post_id ) { if( ! isset($_POST['slider_link_meta_box_nonce'])) { return; } if( ! wp_verify_nonce( $_POST['slider_link_meta_box_nonce'], 'slider_link_save') ) { return; } if( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) { return; } if( ! current_user_can('edit_post', $post_id)) { return; } if( ! isset($_POST['slider_link_field'])) { return; } $slider_link = sanitize_text_field($_POST['slider_link_field']); update_post_meta( $post_id,'_slider_link_value_key', $slider_link ); } add_action('save_post','slider_link_save'); |
If you have gone properly through this tutorial then, new post type slider would appear just below the comments section in WordPress admin dashboard.
If you click on it., default with removed WP-Editor and custom field will show up. Go head enter your details and save it. Upload your image from the featured image section.
Step 5 : Fetching Custom Post Type Data Into the Front End
Now, its time to fetch the data of custom post type into the front end. I will use the sample slider that i got from bootsnipp and integrate in my front end. If you have already your slider prepared. Then you need to make the changes accordingly. Take a look at below code very carefully.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div class="container"> <div class="row"> <?php $arg = array( 'post_type' => 'slider', 'posts_per_page' => 5, 'order' => 'ASC' ); $slider = new WP_Query($arg); $j = 0; $post_count = wp_count_posts('slider')->publish; ?> <!-- Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <?php for($i=0;$i<$post_count; $i++): ?> <li data-target="#carousel-example-generic" data-slide-to="<?php echo $i; ?>" class="active"></li> <?php endfor; ?> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <?php while($slider->have_posts()) : $slider->the_post(); ?> <div class="item<?php echo $j==0 ? ' active': '';?>"> <?php if(has_post_thumbnail()): the_post_thumbnail('slider'); endif; ?> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to <strong><?php the_title() ?></strong></span> </h2> <br> <h3> <a href="<?php echo get_post_meta(get_the_ID(),'_slider_link_value_key', true); ?>"><span><?php the_excerpt(); ?></span></a> </h3> </div> </div><!-- /header-text --> </div> <?php $j++; endWhile; wp_reset_query(); ?> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- /carousel --> </div> </div> |
Remember that i am using bootstrap as a front end framework. You need to integrate it too if you are copying slider code that have been used above
Finally the CSS :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
.container { margin-top: 20px; } /* Carousel Styles */ .carousel-indicators .active { background-color: #2980b9; } .carousel-inner img { width: 100%; max-height: 460px } .carousel-control { width: 0; } .carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; } .carousel-control.left span { padding: 15px; } .carousel-control.right span { padding: 15px; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; } .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { left: 0; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { right: 0; } .carousel-control.left span, .carousel-control.right span { background-color: #000; } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 20%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #fff; } .header-text h2 { font-size: 40px; } .header-text h2 span { background-color: #2980b9; padding: 10px; } .header-text h3 span { background-color: #000; padding: 15px; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-theme { color: #fff; background-color: transparent; border: 2px solid #fff; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #fff; border-color: #fff; } |
This is it for the tutorial creating custom slider in WordPress. If you have another problem integrating slider in WordPress, let me know via comments or contact page.
Hi
Great Tutorial
Please can you tell me how to add another field on slider for adding small images (logos of products) displayed on slider
Thank you
Yes, we can but i first want to know where do you want to display those logos ? Already there will be image that you want to slide. Will the image will be placed overlapping the current featured image?
how am i going to add this to my wordpress
Write all the codes above the page inside function.php. In sidebar you will see a custom post type where you can add title with featured image. It will act as slider image. Later you can use for loop as mentioned in the post inside your slider for looping.
Did you post a link where I can see the finished slider (I could not find it.) Maybe you forgot?
No Since, it is not a HTML slider and WordPress slider to create the demo for it would need to create a fresh WordPress site which is not possible to show only for demo purposes. However after all the steps you followed and added new sliders you can copy the (Step 5 : Fetching Custom Post Type Data Into the Front End) anywhere in the page like header footer or single.php wherever you want to display your slider.
Hello Sir,Thanks for the detailed tutorial as I am beginner to wordpress, I dont know where to add HTML and CSS of slider.
You can codes where ever you want in your template file. In general the slider would be in your homepage which is
index.php. If you want to in single post like the blog post it should be added insidesingle.phpelse if its separate page then, it should be inside your page template.I created everything just right, and it’s working, but when I click on the next slide, it does nothing, even if I have more than 1 slide created, and if I leave the ‘posts_per_page’ => 5, it lists all the slides one below the other. How can I proceed?
Can you inspect element and check if the element is present in Dom or not. Reasons could be either the all data have not been fetched from the server or there is some issue with bootstrap slider.
The two things you can check is carousel functionality and number of records is greater than one or not.