Loading Custom CSS in a WordPress Theme

The safest way to add CSS to your WordPress theme (without a plugin) is to add an action in your functions.php file.

The recommended approach is shown below.

// Register style sheet.
add_action( 'wp_enqueue_scripts', 'register_custom_styles' );

/**
 * Register style sheet.
 */
function register_custom_styles() {
	wp_register_style( 'custom-css', get_template_directory_uri() . '/path/to/custom.css' ) );
	wp_enqueue_style( 'custom-css' );
}

The first line adds an action to the ` wp_enqueue_scripts ` WordPress function. This let’s our theme use the custom function that is shown on the next block of code.

The function we created, `register_custom_styles` will make use of two more WordPress functions that will allow us to register and load our custom css.

After you have copied the code snippet into your theme you can replace the “custom-css” and “/path/to/custom.css” to whatever matches your theme.

References

`wp_enqueue_scripts` – used to load both CSS and JS on the front end of your theme.

`wp_register_style` – register your stylesheet forĀ use with wp_enqueue_style

`wp_enqueue_style` – if your stylesheet is registered you can use this function to load your file.

Watch It Action

I’ve recently used this method in a video tutorial. Check it out.