How to use own css of functionality plugin?

Question

I had built a functionality plugin and hooked with actions to another plugin. I had also made a style.css in myplugin/stylesheets/ directory. I placed the code there. I would like to make the styling dependent on my plugin and not my theme.

So far I have been trying this:

function epf_override_style() {
    wp_register_style( 'epf-style', '/stylesheets/style.css' ); //Subdir in plugin directory.
    wp_enqueue_style( 'epf-style' );
}

add_action( 'es_extra_bottom_info','epf_override_style' );

How can I use the stlye.css of my plugin instead of the theme's (child theme's) style.css?

Answer 1

You can hook stylesheet_uri which lets you override the URL to the active theme or child theme's style.css:

function epf_stylesheet_uri() {
    return plugins_url( '/stylesheets/style.css', __FILE__ );
}
add_filter( 'stylesheet_uri', 'epf_stylesheet_uri', 10, 1 );

This will then use your plugin's style.css instead of the theme's. But IMO if you want to override the style you should really be changing the theme instead.

Answer 2

What I find working is this:

function epf_override_style() {

    wp_register_style( 'epf-style', '/wp-content/plugins/extended-plugin-functionality/stylesheets/style.css');
    wp_enqueue_style( 'epf-style' );
    
}

add_action( 'wp_print_styles','epf_override_style' );

I have found the solution here: https://www.dummies.com/web-design-development/wordpress/enhance-wordpress-plugins-css-javascript/

All the comments helped to find the solution.