How to create a Bootstrap WordPress Theme? - step 3

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

1. Create two new folders at your themes folder namely css,js.

2. In css folder, create css files namely bootstrap.min.css and ie10-viewport-bug-workaround.css.

3. Click the following link," view-source:http://getbootstrap.com/dist/css/bootstrap.min.css " copy and paste the code at bootstrap.min.css

4. Click the following link, "view-source:http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css " copy and paste the code at ie10-viewport-bug-workaround.css file.  Save both files.

5. Now click and open js folder. Create js file named ie-emulation-modes-warning.js

6. Click the following link, "view-source:http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js " copy and paste the code into ie-emulation-modes-warning.js, Save the file.

7. Now add the following code at header.php file just before the "</head>" tag

<?php wp_head(); ?> .  Save header.php file.

8. Then open the footer.php file, add the following code just before the "</body>" tag

<?php wp_footer(); ?> . Save footer.php file.

9. Create a new file at your theme folder, named functions.php. then add the following code into the file, Save it.

<?php

function newsite_styles() {

wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'Ie_css', get_template_directory_uri() . '/css/ie10-viewport-bug-workaround.css' );


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

?>


10. Open the style.css file and add the following code.

view-source:http://getbootstrap.com/examples/carousel/carousel.css

Do not delete the above comment line on the style.css. Add the code below the comment line. And save it.

11. Now view the site. Some styles are added. But we have added styles and scripts for header only. We will do footer styles and scripts in next lesson.


Video tutorial: