In this important video, we learn about the best practices of separating code and using the functions.php file. We shouldn't keep random bits of CSS or Javascript in our head section unless we absolutely need to.

1. We move the .jumbotron CSS code to our main style.css theme stylesheet.

2. We create a new functions.php file and place it in the root directory of our theme folder.

3. We add a custom script for enqueuing styles, and we place the Bootstrap stylesheet BEFORE the main theme stylesheet because we want our custom styles in style.css to override what Bootstrap loads.

4. In moving the Bootstrap stylesheet, we don't grab the https: part of the URL. The reason why is because, by leaving that prefix out, our site has the flexibility to load it as http or https. Https is a more secure protocol, but it often requires extra server configuration. Thus, if we're creating themes for clients or customers, we need to keep the code fleixble so things don't break.

5. We learn about hooks. When a Wordpress site loads, basically a number of different chunks of PHP code are run in a specific order (imagine something like: function 1 -> function 2 -> function 3...). We can jump in with our own custom code at various points in the loading process by accessing through hooks. In this case, the hook we use is wp_enqueue_scripts.

wp-content/themes/customtheme/style.css

.jumbotron {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2a8ee0+31,207cca+100,7db9e8+100 */
  background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(left,  #1e5799 0%, #2a8ee0 31%, #207cca 100%, #7db9e8 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #1e5799 0%,#2a8ee0 31%,#207cca 100%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #1e5799 0%,#2a8ee0 31%,#207cca 100%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */
  color: white;
}

wp-content/themes/customtheme/functions.php

<?php
function enqueue_customtheme_styles() {
    wp_enqueue_style("bootstrap", "//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
    wp_enqueue_style("customtheme-style", get_stylesheet_uri() );
}
add_action("wp_enqueue_scripts", "enqueue_customtheme_styles");
?>