Elementor Users: Fix Double Slash URL Errors with Ease

Have you ever encountered a pesky double slash in your WordPress URLs, particularly when using Elementor? It might seem like a small issue, but it can lead to broken links, loading errors, and can disrupt your website’s performance. Today, we’re diving deep into how to resolve this double slash problem, ensuring a smoother experience for both site managers and visitors.

The Issue Explained:

A common URL error, which often appears in WordPress sites using Elementor, involves the unintended insertion of an extra slash in the URL path. An example of this can be seen in Elementor’s asset URLs, such as:

/wp-content/plugins/elementor-pro/assets//lib/instant-page/instant-page.min.js

Notice the double slash before “lib.” While browsers often handle this gracefully, it’s not always the case, and it’s technically incorrect. It could potentially lead to SEO issues, resource loading errors, or just plain confusion.

Root of the Problem:

This issue typically arises from concatenating paths and URLs without properly checking for slashes at the boundary of each part. It’s a common oversight that can easily creep into code when dynamic paths are built using variables and constants.

The Solution:

To address this issue effectively, you can add a simple PHP function to your WordPress theme’s functions.php file. This function will automatically remove any double slashes from URLs that are generated for scripts and styles. Here is the snippet you can use:

/**
 * Fix Double Slash in URLs
 * This code snippet is provided by Marc Dumont from https://marcdumont.com
 * It is designed to remove double slashes from URLs loaded in WordPress.
 */

function fix_double_slash_urls($url) {
    // This will remove double slashes from the URL path, but preserve the protocol (http, https)
    $url = preg_replace('#([^:])//+#', '\\1/', $url);
    return $url;
}

// Add filters for various URL outputs
add_filter('script_loader_src', 'fix_double_slash_urls', 10, 1);
add_filter('style_loader_src', 'fix_double_slash_urls', 10, 1);

How It Works:

This function uses a regular expression to identify and correct double slashes in URLs, ensuring that only a single slash is used between path segments. The preg_replace function is perfect for this task as it allows for pattern matching and replacement in a single step. By adding this function to your site, you can ensure all URLs are correctly formatted without manual intervention.

Tackling the double slash issue in WordPress URLs can greatly enhance your site’s reliability and performance. With the above PHP snippet, you can ensure that your Elementor-powered WordPress site remains efficient and error-free. Remember, keeping your URLs clean and correct is not just about aesthetics; it’s about ensuring that your digital presence is as robust and professional as possible.

If you need help adding this PHP snippet to your WordPress Elementor website please do get in touch with me today!