How to enqueue style in WordPress plugin from theme files?

In my theme files I enqueue many css and js files. I want to enqueue some css files which are same as theme. So, how I can enqueue in plugin ?

Topic wp-enqueue-style plugin-development Wordpress

Category Web


Based on your comments in response to others, you want to register a stylesheet in your theme, and enqueue it from the plugin. In that case, you can call wp_enqueue_script() with just the handle you used with wp_register_script(), and no other arguments.

So in your theme, register the stylesheet.

add_action(
    'wp_enqueue_scripts',
    function() {
        wp_register_style( 'my-stylesheet-handle', get_theme_file_uri( 'css/my-stylesheet.css' ) );
    }
);

Then in your plugin, you can enqueue the stylesheet like so:

add_action(
    'wp_enqueue_scripts',
    function() {
        wp_enqueue_style( 'my-stylesheet-handle' );
    },
    20
);

One thing you need to be aware of is that plugins load before themes, so when you hook into wp_enqueue_scripts from the plugin, you should specify a priority greater than 10 so that it runs after the stylesheet has been registered by the theme.


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">

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.