Loading WordPress theme CSS the right way: Enqueue styles

We don’t want to add direct links to our style.css and other css files in the header.php – let’s keep it clean there!

Instead, add the following to your theme’s functions.php:

/*  Enqueue css
/* ------------------------------------ */	
function alx_styles() 
{
	wp_enqueue_style( 'style', get_stylesheet_uri() );
	wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'alx_styles' ); 

In this example, I am loading style.css and a Font Awesome css file that is in the theme’s subfolder named /fonts/.

Note, in order for this to work, your theme must have this inside the header.php < head > tag:

<?php wp_head(); ?>

Function reference: wp_enqueue_style

Written by:Alexander Agnarson

9 Responses

  1. ashoksinh says:

    My font css file on subfolder, which linked not working in head of header.php even link show right but if I try to open it open in 404 page and not opening css ….can I call only font awesome CSS file using this method….and not style.css

  2. Nice !!! Thank you.

    My Everything was correct, But my wrong point is in
    I did not include it and trying more time. It was my wrong. When I include in header, then it is working perfectly.

  3. dee says:

    Thank you – nowhere else is it mentioned that you need that extra bit of php in the tag of the header.php.

  4. Sammuel says:

    Perfect. Thank you! I was able to add an additional stylesheet within bootstrap.

  5. As a response to Adam, and anyone else who might have a similar question – this can be achieved by specifying your “dependencies”. From my testing, WordPress will make sure dependencies are loaded first.

  6. Adam says:

    What if I the main style.css is needed to be called after all other styles, overriding previously loaded styles from plugins?

Leave a Reply

Your email address will not be published. Required fields are marked *