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

8 Responses

  1. Adam says:

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

  2. 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.

  3. Sammuel says:

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

  4. dee says:

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

  5. 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.

  6. 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

Leave a Reply to dee Cancel reply

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