How to use own css of functionality plugin?

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0