Elements Configuration

When using various libraries like Swiper, and needing to call them with different parameters, it is recommended to keep all such code organized in one place.

For example, we have a slider for the homepage, and its code might look like this:

function initElementsConfiguration() {
    /*
     * Initializing Hero Slider on the homepage
     *
     * Where: Homepage
     * Managed by: WP_Rig_Toolkit/Swiper
     */
    if (document.querySelector('.hero-slider')) {
        const swiperNewYork = new Swiper('.hero-slider', {
            pagination: {
                el: '.hero-swiper-pagination',
                clickable: true,
            },
            slidesPerView: 1,
            loop: true,
        });
    }
    
    // Other elements...
}

This file is included on all pages. However, since the final theme version uses a minified version of the script, which is further compressed with gzip on the server side and cached, it improves performance and simplifies code maintenance.

In the given example, all configurations are called within the initElementsConfiguration() function. This function can be called again to reinitialize elements anytime if needed.

Notice the comment in the code. It describes:

• What is done: Initializing the slider.

• Where the element is located: The name of the page or template for better understanding.

• Which component is used: Indicating the third-party library or module.

Such comments help improve code transparency and readability.

During the initialization process, we first check for the presence of an element with a unique CSS class or ID on the page. If the element is found, the slider is initialized with the specified parameters.