Distributing Frontend Assets with Plugins

Question

I'd like to distribute some custom style sheets (.css) and javascript files (.js) with my plugin. Is there a right way to do this in Wordpress? I can think of a number of different ways to do this, but I'd prefer to use one that's Wordpress recommended, or a defacto time and true standard. Specifically

1. Where should I place my CSS/JS files? In wp-content/plugins/my-plugin/css/etc.css? Somewhere else?

2. How should I generate URLs to these assets in my plugin? <?php site_url() . '/wp-content/plugins/my-plugin/css/etc.css ?> Is it safe to hardcode wp-content/plugin, or is there a better function/functions to use?

Answer 1

1 - it's up to you and subject to opinion, so not best suited to WPSE.

2 - Never hardcode paths. WP has whole range of functions for finding file paths and URLS. plugins_url() will get you the full URL to the plugins directory, handling whether you are using http or https and canonicalising the domain name for you. It will take parameters for a file relative to your plugin's directory by using PHP's magic __FILE__ constant too: plugins_url( 'images/plugin_icon.png', __FILE__ ) for example.

Similarly, plugin_dir_path( __FILE__ ) within a plugin file will get the full system file path to the file.