How to integrate js css files into a WordPress theme

If you are building a custom WordPress theme then you need to include js css files in a WordPress way, that means you can not add CSS and JavaScript files like what you did in HTML. So, you need to properly integrate the files to work properly with the design and functionality.

Usually functions.php file is used for adding those assets but you can also add them from a different location of your theme.

Lets have a look how to do it. Suppose you are trying to add the main CSS file for your custom theme, then you need to add the following line of code in functions.php

 

function mycustom_scripts() {

/* Main theme style */
wp_enqueue_style( 'main-style', get_stylesheet_directory_uri() . '/style.css', 'style');

}
add_action( 'wp_enqueue_scripts', 'mycustom_scripts' );

 

Look at the above codes that i have hooked the function with wp_enqueue_scripts and thats the hack. Now you can add as many files as you want. If you want to add any javascript file then add the following line into that function.

 

/* Custom jQuery scripts */
wp_enqueue_script( 'mythemename-customjs', get_template_directory_uri() . '/js/kt-custom.js', 'jquery', '1.0', true );

 

Likewise, you can add any CSS and Js files to your custom WordPress theme. Let me know if you have any question, comment below.

Leave a Comment

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

Scroll to Top