How to Create Image Slider without Plugin (almost)
In this tutorial I am going to show you how you can easily create your own WordPress image carousels or sliders without overloading your website with tons of plugins.
A quick disclaimer though – in case you’re using Block Editor (Gutenberg), then probably a better idea would be to create a block for that purpose or to install Simple Carousel Block created by me.
But in this tutorial we are going to use just custom fields (or options) and an external carousel JavaScript library.
Slider Options
First things first, somehow we have to provide your website users with possibility to add images to the slider in WordPress admin interface.
The main question you have to ask yourself here is – how many slider are going to be on your website? If it is just the only slider on let’s say homepage, you can use site options for slider settings, if you’re going to display multiple sliders on different website pages, then post custom fields is what you are going to work with.
I think I am better going to work with options since Gutenberg is over there and probably for pages it is better to use some kind of slider block. Guys, would you like a tutorial about creating a Gutenberg block for slider? Let me know in comments.
In order to create a neat options page you can use two of my tutorials – this one is about options pages themselves and this one about gallery field.
As for me guys, in 9 situations out of 10 I am using my own Simple Fields plugin to create that kind of stuff.
So, I begin with inserting this simple code into functions.php
(more about that).
add_filter( 'simple_register_option_pages', function( $option_pages ) {
$option_pages[] = array(
'id' => 'slider_settings',
'title' => 'Slider Settings',
'menu_name' => 'Slider',
'fields' => array(
array(
'id' => 'my_slider',
'label' => 'Slider Images',
'type' => 'gallery',
)
),
);
return $option_pages;
} );
And as a result I have a settings page like this where I can not only add images but also change their order.

Image Sizes
Have you already uploaded the images? Wait! 😁
We had to decide what slider size is going to be there. My slide images would be 940×198, so I am going to insert the following line of code into functions.php file:
add_image_size( 'mishaslidersize', 940, 198, true );
Now you can upload the images. In case you already have them uploaded and can not re-upload them again for some reason, I recommend to use AJAX Thumbnail Rebuild plugin to regenerate the sizes.
Add Slider to Site Pages
Now, once we have slider settings configure, we can proceed to adding it on our website pages. Before doing anything we have to decide what JavaScript library we are going to use. There are plenty, some of them use jQuery, the other ones – do not. It is up to you to decide. Below is the list of the slider/carousel libraries I used and I like:
- Swiper
- Slick (jQuery)
- OwnCarousel (jQuery)
All of them are amazing and of course responsive.
I am going to use a jQuery one, because there is one moment to keep in mind I would like to show you.
If you prefer not to use jQuery, take a look at my Simple Carousel Block, it uses Swiper.
Enqueueing JavaScript and CSS assets
Let’s begin with this code.
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'slickstyle', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', false, null );
wp_enqueue_script( 'slickscript', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array( 'jquery' ), null, true );
} );
The key thing to consider here is that if you’re using a jQuery-based slider, you have to add jquery
library in dependencies in wp_enqueue_script()
function. Then it doesn’t matter if your WordPress theme is already using jQuery or not, it will be included just once!
You can also add one more custom JS file here where you are going to initialize the slider, but it is not necessary, you can still do it in website footer with wp_footer
hook.
Displaying the slider
Actually I know one very old WordPress default theme – Twenty Ten and it has nice header image. So I am going to make a slider of it.
I added the below code into the theme header.php
. To be more specific I replaced the original code there needed for displaying the header image.
$image_ids = get_option( 'my_slider' );
if( $image_ids ) {
echo '<div id="misha_slider">';
foreach( $image_ids as $image_id ) {
echo wp_get_attachment_image( $image_id, 'mishaslidersize' );
}
echo '</div>';
}
And also we need slider initialization. As I mentioned before you can do it with wp_footer
action hook.
jQuery( function( $ ) {
$('#misha_slider').slick({
autoplay: true,
autoplaySpeed: 1000,
arrows: false
});
} );
Here we go.
Have I already mentioned? 🙃 That you can check out my plugin – carousel slider block for Gutenberg. Worth mentioning that it allows you to create slides with text or almost anything, not only with images.

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Going to try
Nivo was a great app however it works only with jQuery 1.9.1
Its not working with current editions
many many thanks bro. working for me. wp version 4.4.1
great post. help my project done!. Thanks
Hello there,
I was looking for something like this, really, but I need to know if it is posible to add the functionality of lightbox plus navigation.
Could you please point me in the right direction to achieve this?
Thank you very much.
Hello!
Lightbox + Navigation? Did you try Fancybox?
Hello Misha,
I am looking for carousel for client/partner logo. With dynamic multiple image upload functionality.
May you please guide us by new post on it.
Thanks
Hello,
Slick or Owl Carousel 2 are good enough.
Sorry… how do I actually upload images but not insert them into the post?
I think Unattach and Re-attach Media Attachments plugin could help you.
Hi Misha,
Thank you for the post. For me it shows the images as an unordered list. Do you have an idea what I might have done wrong?
Gr,
Yannick
Hey,
Could you please show me a screenshot of your browser console?
Hi Mischa,
Thank you for you amazingly quick reply. I have just managed. The owl.carousel.css and owl.carousel.min.js where already present in the theme. After I have placed them directly in the theme file, the slider worked properly.
Can you give me a tip on how to place at the bottom of the post? So far I have managed only to place it above the post navigation but below the post author.
Gr,
Sure, in that case insert your slider code after
the_content()
function.Great, many thanks for the help!