1

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'/>
8
  • This question is not about computer hardware or software, within the scope defined in the help center.
    – Ramhound
    Commented Oct 19, 2019 at 19:16
  • Can you add some context for why you are doing this and what the problem it sovles is? How are the styles currently added to WP? It's unclear if you're trying to make WP load external styles, or if WP is loading external styles and you want to replace them with local ones?
    – Tom J Nowell
    Commented Oct 19, 2019 at 19:51
  • tom-j-nowell to reduce load speed website I would like to send some of my CSS and js code to the external host, but this CSS file is in my WordPress and my website is not able to read my external file, because of conflict both of them, this can make an error and when I want to use a new edit in my external file, this cannot make a change in my website Commented Oct 19, 2019 at 21:00
  • Can you include the code that loads your CSS in your question? There's not enough information to answer this at the moment. Can you give examples? It's still unclear
    – Tom J Nowell
    Commented Oct 19, 2019 at 23:31
  • code can be <link rel='stylesheet' id='dashicons-css' href='external-host.com/css/style.css' type='text/css' media='all'/> instead of <link rel='stylesheet' id='dashicons-css' href='mywebsite.com/wp-includes/css/style.css' type='text/css' media='all'/> Commented Oct 20, 2019 at 7:14

3 Answers 3

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' );
  1. 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()

2
  • NO , I would like to replace CSS or js link with an external link Commented Oct 20, 2019 at 10:09
  • @RedScience you override the enqueued assets in order to replace them. Overriding and replacing are the same thing
    – Tom J Nowell
    Commented Oct 20, 2019 at 23:01
0

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.

2
  • how we can disable to run internal theme style.css file? Commented Oct 20, 2019 at 11:42
  • It's normally in your theme's header.php. Something like <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" /> . If your theme doesn't provide a header.php then WordPress has a default one in wp-includes\theme-compat.
    – Rup
    Commented Oct 20, 2019 at 11:52
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.