Custom CSS not being added by plugin

Question

I am attempting to add custom css through my plugin. I do have wp_head() called in my header.

My code is -

/**
* Enqueue plugin style-file
*/
function prefix_add_my_stylesheet() {
        wp_enqueue_script('style1', plugins_url('style1.css', __FILE__) );
}
add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );

I can access style1.css when I

echo plugins_url('style1.css', __FILE__);

So I know it exists and is available. I do not get any errors and the style sheet does not show.

I am placing the above code inside mysite/wp-content/plugins/mycustomplug/plugin.php

Can anyone let me know why this may not be loading? Nothing errors out so I assume my syntax is correct.

Answer 1

OK, you have two problems here.

Firstly, you are enqueueing your style with wp_enqueue_script(), which is meant to be used by scripts. You should be using wp_enqueue_style

Secondly, you need to understand what functions are loaded when. Plugins are loaded first, child themes second and parent themes last. So you styles gets loaded first, and then the styles of the theme. This means, duplicate css selectors get overwritten by the theme styles.

To make sure that your plugin style gets loaded after the theme's style, just add priority to your action. For reference, see add_action( $hook, $function_to_add, $priority, $accepted_args ). Be sure to use a very low priority (very high number)

Your code should be

/**
* Enqueue plugin style-file
*/
function prefix_add_my_stylesheet() {
        wp_enqueue_style('style1', plugins_url('style1.css', __FILE__) );
}
add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet', 999 );