how to include javascript file and css file in wordpress

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' );