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 sliders and carousels without overloading your website with tons of plugins.

A quick disclaimer though – if you’re using Gutenberg editor or Full Site Editing in WordPress, then probably a better idea would be to create a block for that purpose.

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.

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.

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.

Would you be interested in tutorial about creating a Gutenberg slider block? Please let me know in comments below.

# WordPress, Attachments

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

Follow me on Twitter