1

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 ?

2
  • 1
    Are you trying to enqueue your theme's CSS files in your plugin? Like, for example, your theme has a stylesheet at wp-content/themes/my-theme/some-styles.css and you want to be able to enqueue them from wp-content/plugins/my-other-plugin/some-plugin-file.php?
    – Pat J
    Commented Dec 21, 2020 at 19:57
  • Yes, you are right. I want to enqueue css file in plugin which already registered css inside theme files Commented Dec 22, 2020 at 5:49

3 Answers 3

0

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">
5
  • Thanks for your explanation. I appreciate for your help. But, I want to enqueue css/js from theme to plugin. For example- I enqueue a css in my theme using wp_enqueue_style('bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css'); Now, how I can call / enqueue the bootstrap inside my plugin from already registered in theme. I do not want to place bootstrap css file again in plugin's assets folder. Hopefully, you got it. Commented Dec 22, 2020 at 5:44
  • 3
    But if your theme is already including it, then you’d just be adding it a second time. If your theme isn’t properly enqueueing it then you have to address that first. Commented Dec 22, 2020 at 12:46
  • In my theme that is working. But, how I can enqueue inside plugin from theme css file? Commented Dec 22, 2020 at 17:48
  • I updated my answer. But don't do it. Commented Dec 22, 2020 at 17:58
  • Isn't there any option to enqueue css/js from theme file to plugin using only handlers? For example- Already registered a css using "yourplugin-front" handler. Now How I can enqueue it inside plugin? Commented Dec 23, 2020 at 4:08
0

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.

0
function custom_user_scripts() {
  $plugin_url = plugin_dir_url( __FILE__ );
  wp_enqueue_style( 'style',  $plugin_url . "/css/style.css");
}
add_action( 'admin_print_styles', 'custom_user_scripts' );
1
  • 1
    It sounds like the OP wants something different from the comments on Tony's answer.
    – Rup
    Commented Mar 8, 2023 at 9:09

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.