How to add css & jquery file in wordpress

The addion of javascript & css to the wordpress theme or plugin it common task. If you envolve in the wordpress development then I hope you were faced regular basis. But question is that how to add these things in the proper manner. I will show you how to add these. Always use the wordpress functions for enqueue css & js.

Below functoin should need to be add on the particular action of wordpress which trigger on very first like init, load, etc. Once it’s triggered then it will include the css and js function which is included int the function “function_include_css_js”.

add_action( 'wp_enqueue_scripts', 'function_include_css_js');

Now we need to write the defination of the function & calling the css js file. Please review the below code.

function function_include_css_js(){

	wp_enqueue_style('unique_css_handle', plugins_url( 'assests/css/your_file.css', __FILE__ ));
    wp_enqueue_script('unique_js_handle', plugins_url( 'assests/js/your_script.js', __FILE__ ),array('jquery'), '2.1');
}

In above code you can see that I have used the function “wp_enqueue_style” for css so that the css file will include in the top of the site. Another function for the javascript. For both function need to use uniuqe handle which use for adding the css/js in the website.

Same way you can also enque the wordpress varaible & values to the javascript varible. I have added the code please review it.

// Localize the script with new data
$yourVar = array(
	'siteName' => "Postnidea",
	'author' => 'Rakesh Kumar'
);
wp_localize_script( 'unique_js_handle', 'your_object', $yourVar);

In above code you see that I have created a object “your_object” with the help of this object you can access all the values. For example if you want access siteName then you can access like that your_object.siteName .

So, I hope my thoughts will help you getting some information regarding “How to add css & jquery file in wordpress” topic. if you have any suggestion or mistake please share with us.