How to enqueue style in WordPress plugin from theme files?

IF I’m understanding your question correctly, what you want to do is enqueue scripts and stylesheets using a plugin the same way you do with a theme… …if that’s the case then it’s really not that different:

function yourplugin_enqueue_frontend() {
    wp_enqueue_style( 'yourplugin-front', plugins_url( 'yourplugin-front.css', __DIR__ ), array(), '1.0' );
    wp_enqueue_script( 'yourplugin-front', plugins_url( 'yourplugin-front.js', __DIR__ ), array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'yourplugin_enqueue_frontend' );

I use plugins_url( 'path-to-file.js', __DIR__ ) rather than __FILE__ because I tend to organize my plugins directories with a lot of detail. So all of my functions are in separate files, in an includes directory, my javascript files are all in a js directory, CSS in a css directory, etc… so it just makes it easier to be able to supply the proper path for each of the scripts and stylesheets I’m enqueuing.

The main difference is that with themes you use:

get_template_directory_uri() . 'theme-stylesheet.css'

But with a plugin you use:

plugins_url( 'theme-stylesheet.css', __DIR__ )

The rest is pretty much the exact same thing.

UPDATE

Ok, I really don’t think you should do it this way, because then you’re making a plugin dependent on a theme, which means if you change themes, you lose access to the file if the new theme doesn’t have it or if the new theme has it in a different location… for example, I put the file inside of a directory called /css/, but if you switch themes and the new theme has the same file but this time it’s in /assets/css/ then your enqueueing will break.

Regardless, because you asked for it, here it is…

function yourplugin_enqueue_frontend() {
        wp_enqueue_style( 'yourplugin-front', plugins_url( 'yourplugin-front.css', __DIR__ ), array(), '1.0' );
        //THIS NEXT LINE ENQUEUES THE SCRIPT FROM THE THEME
        wp_enqueue_style( 'notagoodidea', get_template_directory_uri() . '/css/shouldnt-do-this.css', array(), '1.0' );
        wp_enqueue_script( 'yourplugin-front', plugins_url( 'yourplugin-front.js', __DIR__ ), array( 'jquery' ), '1.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'yourplugin_enqueue_frontend' );

I have tested this and it works…

<link rel="stylesheet" id="notagoodidea-css" href="http://domain.com/wp-content/themes/thisisthetheme/css/shouldnt-do-this.css" media="all">

Related Posts: