Plugin throws up 404 on front-end when when enqueuing style with filetime

Question

I'm building a very simple plugin to add social media icons to each page on a site that I'm working on.

I was expecting the following code to enqueue a stylesheet on the front-end:

function myplugin_styles_scripts() {
   wp_enqueue_style( 'myplugin-style', plugin_dir_path( __FILE__ ) . '/css/style.css', array(), filemtime( plugin_dir_path( __FILE__ ) . '/css/style.css' ) );
}
add_action( 'wp_enqueue_scripts', 'myplugin_styles_scripts' );

On the front-end, I get the following error in the console:

https://testing.local/app/public/wp-content/plugins/social-icons/css/style.css?ver=1583931475 net::ERR_ABORTED 404

The directory and file exist within my plugin. What's causing this?

Answer 1

You're getting the 404 error because you didn't provide the correct URL address of your CSS file.

And that's because of the first plugin_dir_path() below which outputs a filesystem directory path (e.g. /home/user/var/www/wordpress/wp-content/plugins/my-plugin/):

wp_enqueue_style( 'myplugin-style', plugin_dir_path( __FILE__ ) . '/css/style.css', array(), filemtime( plugin_dir_path( __FILE__ ) . '/css/style.css' ) );

So you should instead use plugin_dir_url() for getting the URL directory path for your plugin (e.g. http://example.com/wp-content/plugins/my-plugin/):

wp_enqueue_style( 'myplugin-style', plugin_dir_url( __FILE__ ) . 'css/style.css', array(), filemtime( plugin_dir_path( __FILE__ ) . '/css/style.css' ) );

And note that both the functions include a trailing slash, so in the above code, I intentionally used css/style.css and not /css/style.css. Otherwise, the URL would contain //css/style.css (note the two slashes).