Unable to link CSS file

Question

I use this to link to my CSS file:

$css_file = plugin_dir_path( __FILE__ ) . 'MapStyle.css';
echo '<link rel="stylesheet" href="', $css_file, '" >';

Which (correctly) resolves as (echo $css_file):

/var/www/mysite/wp-content/plugins/TheMapPlugin/MapStyle.css

But the css file is never loaded, because the browser is looking for the file:

http://www.example.com/var/www/mysite/wp-content/plugins/TheMapPlugin/MapStyle.css

What am I overlooking here? All help appreciated!

Answer 1

First you need to register the style and css using wp_register_script() and wp_register_style() functions

 //registering css
 wp_register_style ( 'mysample', plugins_url ( 'css/MapStyle.css', __FILE__ ) );
 wp_register_script ( 'mysample', plugins_url ( 'js/MapStyle.js', __FILE__ ) );

After this you can call the wp_enqueue_style() functions for loading the css in required page

wp_enqueue_style('mysample');
wp_enqueue_script('mysample');