Facebook-f Twitter

How to Create a Custom Slider in WordPress Without a Plugin

Table of Contents

  1. Introduction
  2. Why Create a Custom Slider Without a Plugin?
  3. Step 1: Preparing Your WordPress Environment
  4. Step 2: Adding Custom Functions
  5. Step 3: Designing Your Slides Using Gutenberg Blocks
  6. Step 4: Styling the Slider with CSS
  7. Step 5: Enqueue JavaScript for Slider Functionality
  8. Step 6: Testing Your Slider
  9. Conclusion
  10. FAQ

Introduction

Did you know that websites with sliders can lead to a 30% increase in user engagement? Visual elements are crucial in capturing attention and retaining visitors. However, relying heavily on plugins can clutter your site, slow down its performance, and even create security vulnerabilities. Many website owners face the dilemma of wanting a visually appealing slider without the hassle of added plugins.

At Premium WP Support, we understand these challenges and strive to empower businesses with flexible solutions that maintain a clean and efficient website. In this post, we will guide you through creating a custom slider in WordPress without using any plugins. Our approach emphasizes transparency and technical proficiency, allowing you to achieve your website goals effectively and efficiently.

Are you ready to enhance your WordPress site with a custom slider? Let’s dive into the step-by-step process that will help you create a visually stunning slider that fits seamlessly into your design.

Why Create a Custom Slider Without a Plugin?

Creating a custom slider without a plugin offers several advantages:

  • Performance: Reducing the number of plugins on your site helps improve load times, which is beneficial for SEO and user experience.
  • Customization: Building a slider from scratch allows for complete control over design and functionality, ensuring it meets your specific needs.
  • Security: Fewer plugins mean fewer potential vulnerabilities, making your site more secure from attacks.

By taking a hands-on approach, we can ensure that your slider is lightweight, fast, and tailored to your brand.

Step 1: Preparing Your WordPress Environment

Before we begin coding, it’s essential to prepare your WordPress environment. Follow these steps to ensure everything is set up correctly:

  1. Backup Your Site: Always back up your WordPress site before making changes to the code. You can use a backup plugin or your hosting provider’s backup tools.
  2. Create a Child Theme: Making changes directly to your theme can lead to loss of modifications during updates. Instead, create a child theme. This allows you to customize your site without affecting the parent theme. Here’s how:
    • Go to your WordPress dashboard.
    • Navigate to Appearance > Themes.
    • Click on Add New and then Upload Theme.
    • Create a folder in your themes directory (e.g., yourtheme-child).
    • Inside this folder, create a style.css file with the following header: 
      /*
Theme Name: Your Theme Child
Template: yourtheme
*/
    • Create a functions.php file in the same folder to enqueue styles.
  3. Access Theme Editor: Go to Appearance > Theme File Editor to edit your child theme files.

Step 2: Adding Custom Functions

Next, we’ll add custom functions to your theme’s functions.php file. This will include the code necessary for creating the slider shortcode.

  1. Open Your Child Theme’s functions.php: In your child theme’s folder, open the functions.php file.
  2. Add the Shortcode Function:
    Insert the following code to create a shortcode for your slider:

    function custom_slider_shortcode($atts) {
    $atts = shortcode_atts(array(
        'source' => '',
        'height' => '450px'
    ), $atts);

    $output = '<div class="custom-slider" style="height: '.$atts['height'].';">';
    $output .= do_shortcode('.'"]');
    $output .= '</div>';

    return $output;
}
add_shortcode('slider', 'custom_slider_shortcode');

This code sets up a shortcode [slider] that lets you specify the source of images and the height of the slider.

  1. Save Changes: After adding the code, save the functions.php file.

Step 3: Designing Your Slides Using Gutenberg Blocks

Now that we have the shortcode ready, let’s create the slides using the Gutenberg editor.

  1. Open a New Page or Post: In your WordPress dashboard, navigate to Pages > Add New or Posts > Add New.
  2. Add Cover Blocks: In the editor, use the Cover block to create each slide.
    • Click on the Add Block (+) button.
    • Select Cover.
    • Upload or select an image for your slide.
    • You can add text or buttons on top of the image if desired.
  3. Group Your Cover Blocks:
    • After adding multiple Cover blocks, select all of them by holding the Shift key and clicking on each block.
    • Click on the three dots menu and choose Group.
    • Assign a class name to the group, for example, my-slider.
  4. Use the Shortcode: In the same post or page, add the slider shortcode: 
    [slider source="my-slider"]
  5. Publish the Page: Once you’re satisfied with the layout, publish or update your page.

Step 4: Styling the Slider with CSS

To ensure your slider looks great, you’ll want to add some custom CSS. This code can be added to the style.css file in your child theme.

  1. Open style.css: In your child theme folder, open the style.css file.
  2. Add Custom Styles: Here are some basic styles to get you started: 
    .custom-slider {
    position: relative;
    overflow: hidden;
}

.custom-slider .wp-block-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
  3. Save Changes: Save the style.css file after adding your styles.

Step 5: Enqueue JavaScript for Slider Functionality

To make your slider interactive, you’ll need to add some JavaScript. We’ll use jQuery for this example.

  1. Enqueue Scripts in functions.php:
    Add this code to the functions.php file to enqueue jQuery and your custom script:

    function enqueue_slider_scripts() {
    wp_enqueue_script('jquery');
    wp_add_inline_script('jquery', '
        jQuery(document).ready(function($) {
            $(".custom-slider").slick({
                dots: true,
                infinite: true,
                speed: 500,
                fade: true,
                cssEase: "linear"
            });
        });
    ');
}
add_action('wp_enqueue_scripts', 'enqueue_slider_scripts');
  2. Add Slick Carousel: Since we’re using the Slick carousel, you’ll need to download the Slick CSS and JS files. Create a folder structure in your child theme as follows: 
    yourtheme-child/
├── assets/
│   ├── css/
│   │   ├── slick.css
│   │   └── slick-theme.css
│   └── js/
│       └── slick.min.js

    Upload the corresponding files you downloaded from the Slick website.

  3. Link Slick CSS and JS in functions.php:
    Update the enqueue_slider_scripts function to include the Slick files:

    function enqueue_slider_scripts() {
    wp_enqueue_style('slick-css', get_stylesheet_directory_uri() . '/assets/css/slick.css');
    wp_enqueue_style('slick-theme-css', get_stylesheet_directory_uri() . '/assets/css/slick-theme.css');
    wp_enqueue_script('slick-js', get_stylesheet_directory_uri() . '/assets/js/slick.min.js', array('jquery'), null, true);
    wp_add_inline_script('slick-js', '
        jQuery(document).ready(function($) {
            $(".custom-slider").slick({
                dots: true,
                infinite: true,
                speed: 500,
                fade: true,
                cssEase: "linear"
            });
        });
    ');
}
  4. Save Your Changes: Save the functions.php file after making these updates.

Step 6: Testing Your Slider

Once everything is set up, it’s time to test your slider.

  1. Visit Your Page: Go to the page where you added the slider shortcode.
  2. Check Functionality: Ensure that the slider works correctly, transitions between images smoothly, and displays the dots for navigation.
  3. Adjust As Needed: If the slider doesn’t look or behave as expected, revisit your CSS or JavaScript for adjustments.

Conclusion

Creating a custom slider in WordPress without plugins is not only possible but also beneficial for site performance and customization. By following the steps outlined in this guide, you have successfully crafted a slider that enhances your website’s visual appeal without the overhead of additional plugins.

At Premium WP Support, we are committed to providing our clients with reliable and professional solutions. If you need assistance or want to explore our comprehensive WordPress services, don’t hesitate to book your free, no-obligation consultation today.

Let us help you start smart and grow fast with our dedicated support and innovative WordPress solutions.

FAQ

Q1: Can I add more slides to my custom slider?
Yes! You can easily add more Cover blocks to your post or page and update the shortcode to include the new images.

Q2: What if I want to change the slider’s transition speed?
You can modify the transition speed by adjusting the speed value in the jQuery Slick initialization code.

Q3: Is this method responsive?
Yes, the Slick carousel is designed to be responsive, but you may want to test how it looks on different devices and adjust your CSS accordingly.

Q4: What if I encounter issues with the slider?
If you experience any issues, check the console for JavaScript errors, ensure all files are correctly linked, and verify that your jQuery is properly enqueued.

Q5: Can I customize the appearance of the slider?
Absolutely! You can customize the appearance by modifying the Slick CSS files or adding your own styles in the child theme’s style.css.

For further assistance, feel free to contact us to start your project. We’re here to help you with any WordPress needs you may have.

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.

Premium WordPress Support
Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.