How to replace wordpress css or js file with external file?

Question

I would like to replace WordPress style.css file or any other files like this with style.css file in an external host How can I do this? Of course, I saw this tutorial before

https://css-tricks.com/methods-overriding-styles-wordpress/

but I don't know how can I replace this external file with my basic theme files like style.css or like this

For example this code can be

<link rel='stylesheet' href='http://external-host.com/css/style.css' type='text/css'/> 

instead of

<link rel='stylesheet' href='http://mywebsite.com/wp-includes/css/style.css' type='text/css'/>

Answer 1

From what I understood you want to override some particular CSS properties from style.css of a WordPress theme.

There might be two different situations here which needs different solutions:

1. If you are developing your own theme then you can simply edit your functions.php inside your theme files and add any JS or CSS file that you want like this:

wp_enqueue_style( 'handle name', 'your external source address');
wp_enqueue_script( 'handle name', 'your external source address');

I don't know if you are familiar with WordPress developing conventions but you have to wrap this function inside a custom one and call that after a WordPress hook like this:

function custom_function() {
    wp_enqueue_style( 'handle name', 'your external source address' )
    wp_enqueue_script( 'handle name', 'your external source address' )
}
add_action( 'wp_enqueue_scripts', 'custom_function' );

2. If you are using a theme from the official WordPress repository, then it is not a good practice to make changes to files of that theme, because most likely you will lose all your custom changes when that theme gets updated. Instead, you have to make a child theme for that theme and do as explained previously for functions.php of the child theme.

Defining a child theme is a different topic on it's own but it's not a difficult one! Study this page and you will be able to make your own child theme easily:

Child Themes | Theme Developer Handbook

other useful related resources:

wp_enqueue_style()

wp_enqueue_script()

Answer 2

There's a specific hook you can use for the theme's stylesheet, stylesheet_uri:

function wpse350851_override_stylesheet_uri( $stylesheet, $stylesheet_dir ) {
    return 'http://external-host.com/css/style.css';
}
apply_filter( 'stylesheet_uri', 'wpse350851_override_stylesheet_uri', 10, 2 );

Note you probably need to switch between HTTP and HTTPS URLs e.g. using is_ssl()), or just use HTTPS by default.

Answer 3

I encountered a similar problem and found another way to override entire stylesheets. It's quite straightforward.

I used this method on a theme that included a large CSS library file that also referenced other unoptimised assets. The whole thing was terrible for performance but the site still depended on some of its functionality.

The solution was to look through the plugin code and/or the HTML output to find the $handle parameter passed to wp_register_style() (or wp_enqueue_style()), then register using that same handle. You do this by attaching to the same hook with a lower priority, or an earlier hook, than the one in which the original is registered. You register but do not enqueue your own version. This causes the original's registration to fail, but it should still enqueue yours because of the same handle.

To demonstrate, the theme registers the problematic style in a setup class:

public function __construct()
{
    ...
    add_action('wp_enqueue_scripts', [$this, 'queueStyles']);
    ...
}
...
public function queueStyles()
{
    ...
    wp_register_style(
        'slow-lib',
        get_theme_file_uri('css/slow.css'),
        [],
        '2.7.3'
    );
    wp_enqueue_style('slow-lib');
    ...
}

This produces output like so:

<link rel='stylesheet' id='slow-lib-css' href='https://simple.example/wp-content/themes/some-theme/css/slow.css?ver=2.7.3' media='all' />

In a basic custom plugin, I have optimised versions of the the assets (images, etc.) and refer to them in my own file. I then usurp the registration:

add_action(
    'wp_enqueue_scripts',
    function() {
        # can add extra conditionals here if you need to make exceptions where the original should load
        wp_register_style(
            'slow-lib', # same handle
            plugin_dir_url(__FILE__) . 'fast.css',
            [], # same as original $deps parameter
            '2.7.3' # anything, but best to keep track of which version you modified
        );
    },
    -10, # lower priority than theme
    0
);

The output changes to this:

<link rel='stylesheet' id='slow-lib-css' href='https://simple.example/wp-content/plugins/my-plugin/fast.css?ver=2.7.3' media='all' />

The original files are never loaded, but the replacements appear in the same place and satisfy the same dependencies. You can use any URL in your registration, including externally hosted files.