steve.fm

A work in progress

Bootstrap Javascript Not Loading

Remember that functions.php file we worked on awhile ago? I actually made a pretty big mistake in it that caused Bootstrap’s javascript and JQuery to not load.

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_styles', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_scripts() {
        wp_enqueue_script('jquery.min', get_stylesheet_directory_uri().'/bower_components/jquery/dist/jquery.min.js');
        wp_enqueue_script('bootstrap.min', get_stylesheet_directory_uri().'/bower_components/bootstrap/dist/js/bootstrap.min.js');
   }
 ?>

Basically, I created a function called add_theme_styles() and another function called add_theme_scripts(). When adding them to the built-in WordPress actions, I had accidentally used the tag wp_enqueue_styles instead of wp_enqueue_scripts, which isn’t actually called by WordPress. This resulted in my scripts not loading.

Once I updated my code to fix the mistake, things worked fine… but it had me confused for quite awhile.

<?php 
    add_action('wp_enqueue_scripts', 'add_theme_styles');
    add_action('wp_enqueue_scripts', 'add_theme_scripts');

    function add_theme_styles() {
        wp_enqueue_style('stevefm', get_stylesheet_directory_uri().'/stylesheets/stevefm.less');
   }

    function add_theme_scripts() {
        wp_enqueue_script('jquery.min', get_stylesheet_directory_uri().'/bower_components/jquery/dist/jquery.min.js');
        wp_enqueue_script('bootstrap.min', get_stylesheet_directory_uri().'/bower_components/bootstrap/dist/js/bootstrap.min.js');
   }
 ?>
Read more about Building Steve.fm