how to include javascript file and css file in wordpress

Question

I am creating new plugin so i need add a java script file and css file.

These are my javascript files

1. jquery.min.js
2. jquery-1.3.2.min.js
3. jquery.tabify.js

Css file:

1. newstyle.css

Answer 1

WordPress already ships with jQuery. There is no need to include it in your theme.

Javascript

Let's say your jquery.tabify.js file is located in /js/jquery.tabify.js in your theme. Include the following code in your functions.php file:

function jquery_tabify() {
    wp_enqueue_script(
        'jquery-tabify',
        get_template_directory_uri() . '/js/jquery.tabify.js',
        array( 'jquery' )
    );
}
add_action( 'wp_enqueue_scripts', 'jquery_tabify' );

This will include your script and jQuery. jQuery is marked as a dependency, so it's loaded first.

If your file is instead hosted on a separate server, let's say as http://site.com/jquery.tabify.js, specify that as the path instead (omitting get_template_directory_uri()):

function jquery_tabify() {
    wp_enqueue_script(
        'jquery-tabify',
        'http://site.com/jquery.tabify.js',
        array( 'jquery' )
    );
}
add_action( 'wp_enqueue_scripts', 'jquery_tabify' );

CSS

You register styles the same way. Assuming your file is located in /css/newstyle.css, add the following code to your functions.php file:

function add_newstyle_stylesheet() {
    wp_register_style(
        'newstyle',
        get_template_directory_uri() . '/css/newstyle.css'
    );
    wp_enqueue_style( 'newstyle' );
}
add_action( 'wp_enqueue_scripts', 'add_newstyle_stylesheet' );