Load CSS and JS over HTTPS in WordPress

One of my websites is in WordPress. I setup SSL on the site. I would like the entire site be loaded via HTTP except 1 page lets call it PAYMENTS.

How can I achieve in WordPress when I click in the menu PAYMENTS it loads it over HTTPS and also load all CSS and JS over HTTPS. Because when I did manually in the url: https://www.example.com/payments/ it loads without any CSS and JS because its all blocked due its loaded over HTTP in the source.

Read More

Also want to achieve that if I click in the menu any other item and it goes back to HTTP.

Related posts

Leave a Reply

2 comments

  1. You can get WordPress to use Protocol-Agonstic paths for CSS & JavaScript by adding this to your theme’s functions.php:

    add_filter('script_loader_src', 'agnostic_script_loader_src', 20,2);
    function agnostic_script_loader_src($src, $handle) {
        return preg_replace('/^(http|https):/', '', $src);
    }
    
    add_filter('style_loader_src', 'agnostic_style_loader_src', 20,2);
    function agnostic_style_loader_src($src, $handle) {
        return preg_replace('/^(http|https):/', '', $src);
    }
    

    Note this won’t be respected by plugins like Better WordPress Minify that change how scripts & styles are included in the page, and this technique won’t work with IE6 (which shouldn’t be a concern these days anyway).