Custom CSS Slider for WordPress

About Sliders

Sliders, also known as carousels, are a popular web design element used on websites for various purposes. Here are some key reasons and uses for sliders:

1. Showcasing Featured Content

Sliders are often used on homepages to highlight featured content, such as the latest blog posts, products, or services. This allows visitors to quickly see important updates or offerings without having to scroll through the entire site.

2. Displaying Visual Content

Sliders are an excellent way to display visual content, such as high-quality images, videos, or graphics. Photographers, designers, and artists often use sliders to create a portfolio showcase that is visually appealing and interactive.

3. Promoting Sales and Special Offers

E-commerce websites frequently use sliders to promote sales, special offers, or new arrivals. This can attract customers’ attention and encourage them to explore more products, ultimately driving sales.

4. Improving User Engagement

Sliders can make a website more interactive and engaging. By providing dynamic content that changes automatically or on user command, sliders can keep visitors interested and encourage them to spend more time on the site.

Why Custom Sliders

In this short guide, I’ll teach you how to setup a custom CSS slider yourself, without the new of a custom slider plugin. There are number of reason why custom, tailor-made slider are better than ready to use solution, to name a few: tailor-made custom sliders can be better than plugin sliders for WordPress due to several key reasons:

1. Performance Optimization

Custom sliders can be optimized specifically for your website, leading to faster load times and better performance. Unlike generic plugin sliders that come with extra features you might not need, custom sliders include only the necessary code.

2. Customization Flexibility

With custom sliders, you have complete control over the design and functionality. This means you can tailor every aspect to match your site’s branding and user experience needs, which might not be fully achievable with plugin sliders.

3. No Unnecessary Bloat

Plugins often come with additional features and scripts that you might not use, adding unnecessary bloat to your site. Custom sliders are built with only the essential features, keeping your site lightweight and efficient.

5. Better SEO Control

Custom sliders can be optimized for SEO more effectively, ensuring that images and content within the slider are properly indexed by search engines. This can be more difficult with plugin sliders that might not follow best SEO practices.

6. No Licensing or Compatibility Issues

Using custom sliders eliminates the dependency on third-party plugins, which might have licensing restrictions, require regular updates, or face compatibility issues with future WordPress updates or other plugins.

While plugin sliders offer convenience and quick setup, tailor-made custom sliders provide superior performance, customization, security, and control. For websites that require specific functionality and optimization, investing in a custom slider solution can be a worthwhile choice.

Creating Custom Slider Shortcode

Adding a custom slider shortcode is fairly easy, if you are using a Child Theme, add the following line of code to the bottom of the functions.php. If you don’t have a Child Theme, then either create one or use a mu-plugin instead.

The above code is pretty straightforward.I left a comment where I fetch the IDs of attachments uploaded to the media library, as this part is interesting.

Now then, let’s expand the above code and add custom .css and JavaScript to animate our slider. Update your code with the following changes.  These are pretty simple, to the top we load a custom, inline JavaScript which toggles the .active class of each slider slide. To the bottom, where the <style> tag starts, we simply set the opacity of each slider to 0 or 1 based on the class the current slider has. Since all of the elements are positioned, they are one on top of another, hence the opacity change hides one and reveals another, thus imitating the fade-in effect.

Final Result

Note: the above code is a sample of how quickly one can setup a custom CSS slider with minor use of JavaScript, it’s imperfect and should be further expanded upon. It’s imperfect as it may conflict with existing code. On top of that, github gists tend to apply their own formatting, so you may want to adjust the formatting, to better suit WordPress coding standards.

The slider has been populated with the images from my previous post, which I strongly encourage you to read. Also, if you have any comments or questions, feel free to share them down below 👇

Please leave this field empty

Oh hi there 👋
It’s nice to meet you.

Sign up to receive WordPress tips in your inbox, every month.

Email Address *

I don’t spam! Read my privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.