Add a Custom CSS File to the Theme

To add a custom CSS file to your WordPress theme, you can enqueue the file using the wp_enqueue_style() function. This function allows you to add a custom CSS file to your theme in a way that follows the WordPress coding standards.

Here’s an example of how you can add a custom CSS file to your theme:

function wpsnippets_enqueue_custom_css() {
    wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );

In the code snippet above, we define a custom function wpsnippets_enqueue_custom_css() that uses the wp_enqueue_style() function to enqueue the custom CSS file. The first parameter of wp_enqueue_style() is the handle for the stylesheet, which can be any unique name you choose. The second parameter is the URL of the CSS file, which in this example is set to get_stylesheet_directory_uri() . '/custom.css' to load a file named custom.css located in the root directory of the theme.

Finally, we use the add_action() function to hook our custom function to the wp_enqueue_scripts action, which ensures that the custom CSS file is loaded on the front-end of your WordPress site.

This code snippet can be useful when you want to add custom CSS styles to your WordPress theme without modifying the theme’s core files. It allows you to maintain a separation between your custom CSS and the theme’s default styles, making it easier to update the theme in the future without losing your customizations.

Examples

Example 1: Adding a Custom CSS File to the Theme

This use case demonstrates how to add a custom CSS file to a WordPress theme. By adding a custom CSS file, you can easily override the default styles of your theme without modifying the theme’s core files.

function wpsnippets_enqueue_custom_css() {
    wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );

In this code example, we define a custom function wpsnippets_enqueue_custom_css that uses the wp_enqueue_style function to enqueue a custom CSS file named custom.css. The get_stylesheet_directory_uri() function retrieves the URL of the current theme’s directory, and we append /custom.css to specify the path to our custom CSS file. Finally, we use the add_action function to hook our custom function to the wp_enqueue_scripts action, ensuring that our custom CSS file is loaded on the front-end.

Example 2: Adding Multiple Custom CSS Files to the Theme

This use case demonstrates how to add multiple custom CSS files to a WordPress theme. By adding multiple custom CSS files, you can organize your stylesheets and apply different styles to different sections of your website.

function wpsnippets_enqueue_custom_css() {
    wp_enqueue_style( 'custom-css-1', get_stylesheet_directory_uri() . '/custom-1.css' );
    wp_enqueue_style( 'custom-css-2', get_stylesheet_directory_uri() . '/custom-2.css' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );

In this code example, we modify the previous code to enqueue two custom CSS files: custom-1.css and custom-2.css. We use the wp_enqueue_style function twice, each time with a unique handle (custom-css-1 and custom-css-2) and a different file path. This allows us to load multiple custom CSS files in our theme.

Example 3: Adding Custom CSS File with Dependency

This use case demonstrates how to add a custom CSS file with a dependency on another stylesheet. By specifying a dependency, we can ensure that our custom CSS file is loaded after the specified stylesheet, allowing us to override its styles effectively.

function wpsnippets_enqueue_custom_css() {
    wp_enqueue_style( 'parent-theme-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'custom-css', get_stylesheet_directory_uri() . '/custom.css', array( 'parent-theme-style' ) );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_custom_css' );

In this code example, we enqueue the parent theme’s stylesheet (style.css) first, using the handle parent-theme-style. Then, we enqueue our custom CSS file (custom.css) with the handle custom-css and specify the dependency as an array containing the handle of the parent theme’s stylesheet. This ensures that our custom CSS file is loaded after the parent theme’s stylesheet, allowing us to override its styles effectively.