Adding a custom CSS file into a wordpress theme

To add your own css in the wp_head(), you need to use a collection of WordPress functions:

First, you’ll put this in your theme’s functions.php file:

add_action('wp_enqueue_scripts', 'your_function_name');

(This uses the add action hook, hooking into the wp_enqueue_scripts action.)

Then, you’ll need to add the function to your functions.php file that will utilize the WordPress function wp_enqueue_style:

function your_function_name() {
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
}

Note the use of get_stylesheet_directory_uri() – this gets the proper stylesheet directory for your theme.

This is also the proper way to enqueue scripts into your header. Example:

function your_function_name() {
    // Enqueue the style
    wp_enqueue_style('my-script-slug',  get_stylesheet_directory_uri() . '/your_style.css');
    // Enqueue the script
    wp_enqueue_script('my-script-slug',  get_stylesheet_directory_uri() . '/your_script.js');
}

Which uses the WordPress wp_enqueue_script function.


Hi I'm Rene Vigar

Hi, I’m Rene Vigar, a UX UI Designer with front-end development skills. Join me here, on renevigar.com for weekly tips and tutorials about UX UI Design and UI Development. I am also a part-time blogger writing for Medium, Forbes, Entrepreneur, Inc, Business Insider and more.

Leave a Reply

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

Hi I'm Rene Vigar

Hi, I’m Rene Vigar, a UX UI Designer with front-end development skills. Join me here, on renevigar.com for weekly tips and tutorials about UX UI Design and UI Development. I am also a part-time blogger writing for Medium, Forbes, Entrepreneur, Inc, Business Insider and more.