Enqueuing External Javascript functions.php

Question

For some reason I cant seem to enqueue external JS files. I can enqueue external css files but not the JS files. I have a custom theme using the bootstrap css frame work. My functions.php is as follows:

function add_css_scripts(){
    wp_enqueue_style('boot-strap','https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css',false);
    wp_enqueue_style('style', get_template_directory_uri() . '/style.css', false, 'all');
    wp_enqueue_style('media', get_template_directory_uri(). '/assets/css/media.css', false, all);

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

/*Jquery Scripst*/
function add_js_scripts(){
    wp_deregister_script( 'jquery' );
    //wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, '3.3.1', true);
    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', false, '3.3.1', true);
    wp_enqueue_script('jquery');
    wp_register_script('pre', get_template_directory_uri(). '/assets/js/pre.js','1.0.0', array('jquery'), '1.0.0', true);
    wp_enqueue_script('pre');
    //wp_enqueue_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js', array('jquery'), '4.1.0', true);
    wp_register_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js', array('jquery'), '4.1.0', true);
    wp_enqueue_script('bootstrap');
    //wp_enqueue_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js', array('jquery'), '1.12.9', true);
    wp_register_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js', array('jquery'), '1.12.9', true);
    wp_enqueue_script('popper');
}
add_action('wp_enqueue_scripts','add_js_scripts');

Everything commented out are bits of code I've tried and hasnt work, the wp_deregister('jquery'); works since I need the jquery version 3 and when I add the scripts to my footer.php it works.

Answer 1

instead of using get_template_directory_uri().'/assets/js/pre.js','1.0.0'

try using get_theme_file_uri('/assets/js/pre.js','1.0.0')

It worked for me, for some reason when use get_template_directory_uri() you will get a 403 error

Answer 2

Using external jQuery is a bad idea. The bundled one is optimized to work better with WordPress.

For your problem, I think the issue is with your way of registering external jquery. Use an empty array instead of false in dependency.

function add_js_scripts(){
    wp_deregister_script( 'jquery' );

    wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1', true);

    wp_enqueue_script('pre', get_template_directory_uri(). '/assets/js/pre.js','1.0.0', array('jquery'), '1.0.0', true);

    wp_enqueue_script('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js', array('jquery'), '4.1.0', true);

    wp_enqueue_script('popper', 'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js', array('jquery'), '1.12.9', true);

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

Also, you don't need to enqueue jquery separately. When you set any script dependent to jquery, it will automatically enqueue it before your script.