How to add custom scripts and styles in WordPress

Here’s how you add your custom scripts and styles in your main theme or child theme.

1. Copy your JS and CSS files.

Copy your JS file and CSS file inside your theme folder. You can create your own folder to track your files easily or you can follow my example. In this example, The files are located inside ‘assets’  folder and separate folders for CSS files and JS files. This is how the folder structure should look like:

CSS directory: /wp-content/themes/yourtheme/assets/css/your-css.css
JS directory: /wp-content/themes/yourtheme/assets/js/your-js.js

2. Paste the code to your functions.php file.

After copying the files to the directories, paste the code to functions.php file of the theme. Change the your-js and your-css to the name of your JS and CSS. Save the functions.php file. Please note, this example will add your scripts to your main theme and NOT in your child-theme. I have a separate post on how to add your custom scripts and styles to your child theme.

function your_theme_enqueue_styles() {
  wp_enqueue_style( 'your-css', get_template_directory_uri().'/assets/css/your-css.css', false, '1.0.0', 'all' );
  wp_enqueue_script( 'your-js', get_template_directory_uri().'/assets/js/your-js.js', true, '1.0.0', 'all'  );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_styles' );