How to create a Bootstrap WordPress Theme? - step 4

If you didn't read the third step, then click here. Ok. Now we will move to the third step.

1. In this step, first create the Js files for the theme from the demo.

• bootstrap.min.js  -> Source -> view-source:http://getbootstrap.com/dist/js/bootstrap.min.js
• holder.min.js  ->Source -> view-source:http://getbootstrap.com/assets/js/vendor/holder.min.js
• ie10-viewport-bug-workaround.js -> Source -> view-source:http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js
• ie-emulation-modes-warning.js -> Source -> view-source:http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js

Save the file at js folder which is available at your themes folder. or create the new one and save them with source code

2. Remaining Js files - Direct linking url -> you need not to save this -> we will do this at functions.php

3. Add the following code into functions.php file, Just before the " ?> " .I mean before the PHP closing tag.

function newsite_js() {

    global $wp_scripts;

    wp_register_script( 'html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
    wp_register_script( 'respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

    $wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
    $wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );
   
    wp_enqueue_script( 'IE_emeulationmode_js', get_template_directory_uri() . '/js/ie-emulation-modes-warning.js', array('jquery'), '', false );
   
    wp_enqueue_script( 'Google_ajax_js', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', '', '', true );
   
    wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
   
   
    wp_enqueue_script( 'holder_js', get_template_directory_uri() . '/js/holder.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'IE10_js', get_template_directory_uri() . '/js/ie10-viewport-bug-workaround.js', array('jquery'), '', true );

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

4. Now save the functions.php file

5. Download the Bootstrap from the following link.

http://getbootstrap.com/getting-started/#download

6. Extract the Bootstrap file, find "fonts" folder. Copy the "fonts" folder and paste into the theme folder.

7. Now our scripts are activated.

8. You can verify - By your slider moving and menu working.

Video Tutorial: