plugin enqueue style on all pages

Question

I need to enqueue a style sheet in my plugin to work on the front end of Wordpress. Here is what I have. Will someone please tell me what I am doing wrong?

function add_my_stylesheet1()  {
    wp_enqueue_style( 'myStyles', plugins_url( 'css/styles.css', __FILE__ ) );

}

add_action('admin_print_styles', 'add_my_stylesheet1');

Answer 1

You need to use the admin_enqueue_scripts hook. So your function would be like this...

function add_my_stylesheet1() {
    wp_enqueue_style( 'myStyles', plugins_url( __FILE__ ) . ' css/styles.css' );
}
add_action( 'admin_enqueue_scripts', 'add_my_stylesheet1' );

Answer 2

You're enquing on the admin_enqueue_scripts hook, which is why it's only showing up on admin pages

If we look at an example from the official documentation:

/**
 * Proper way to enqueue scripts and styles
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

we see the wp_enqueue_scripts hook being used instead. Use that hook instead of admin_print_styles to print on the frontend

Answer 3

Ok, Here is my final solution:

function my_test() {
    wp_enqueue_style( 'shortcode', plugin_dir_url( __FILE__ ) . 'css/shortcodes.css' );
}

add_action( 'wp_enqueue_scripts', 'my_test' );