We Keep Coding

Cant get javascript and Jquery to work in functions.php

Here's My first post!
I am a bit of a newb to coding, I know enough html and css, mixed with using frameworks such as bootstrap, to develop a basic website and have started learning how to build themes in wordpress using php.
My goal was to build a theme using bootstrap and javascript but I am having trouble with the simplest of tasks such as getting the scripts to work in functions.php. I have been following some tutorials online which just didn't work and after a lot of experimenting and researching I cant seem to get anything to work.
My functions.php code is:
<?php
function styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );
wp_register_style('style', get_template_directory_uri() . 'style.css');
$dependencies = array('style');
wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);
}
add_action( 'wp_enqueue_scripts', 'styles' );
function scripts() {
wp_deregister_script('jquery3.4.1');
wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . 'jquery-3.4.1.min.js', '', 1, true);
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
wp_enqueue_script('customjs', get_template_directory_uri() . 'scripts.js', '', 1, true);
}
add_action( 'wp_enqueue_scripts', 'scripts' );
function title(){
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'title' );
?>
and I have a test piece of code which displays a pop-up alert in the scripts.js (and the footer is calling the ?php wp_footer();? ):
$(document).ready(function(){
alert('test');
})
I have also experimented with the load order thinking that bootstrap js may be interfering with my own js but which ever way I position them I cannot get them to work.
Apologies if this is a dumb one and if this has been asked before but nothing I have looked up seems to work and any help would be greatly appreciated.
Many thanks!

You may have to replace your $ in your javascript with jQuery. jQuery is in compatibility mode by default in WP. That means that the typical $ shortcut for jQuery doesn't work.
jQuery(document).ready(function(){
alert('test');
})

Ok found the issue...
Using console I could see that it couldn't find the path to the files but I couldn't work out why as it was pulling through the styling but not the scripts.
I then went back to my code and realised there was no root on the files I was linking to.
Using atom as my text editor I was right clicking on the project path and copying the project path which didn't pull over the root of the path (I.E only pulling over scripts.js instead of /scripts.js).
Once I put the forward slash in on all linked files everything fixed.
Such a simple fix that a newbie like me will not now forget!
Here's the final working code for anyone who is interested:
<?php
function styles() {
wp_register_style('bootstrap', get_template_directory_uri() . '/bootstrap/css/bootstrap.min.css' );
$dependencies = array('bootstrap');
wp_enqueue_style( 'bootstrapstarter-style', get_stylesheet_uri(), $dependencies );
wp_register_style('style', get_template_directory_uri() . '/style.css');
$dependencies = array('style');
wp_enqueue_style('style', get_stylesheet_uri(), $dependencies);
}
add_action( 'wp_enqueue_scripts', 'styles' );
function scripts() {
wp_deregister_script('jquery3.4.1');
wp_enqueue_script('jquery3.4.1', get_template_directory_uri() . '/jquery-3.4.1.min.js', '', 1, true);
$dependencies = array('jquery');
wp_enqueue_script('bootstrap', get_template_directory_uri() .'/bootstrap/js/bootstrap.min.js', $dependencies, '3.3.6', true );
wp_enqueue_script('customjs', get_template_directory_uri() . '/scripts.js', '', 1, true);
}
add_action( 'wp_enqueue_scripts', 'scripts' );
function title(){
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'title' );
?>

Can't override parents javascript with my child themes javascript

So i'm trying to tweak my wordpress site by tweaking the javascript needed to reduce the image sizes on the page. I have a js folder within my child themes folder structure that has one js file in it (which has the same name as the file it is meant to be overriding). Below is the code i'm using for the functions.php file which is meant to queue up the files. In my head it might have something to do with maybe how wordpress reads file, like maybe i have to do dequeue the parents javascript file or something?
Below is the functions.php file my child theme is using
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'bootstrap','font-awesome' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 10 );
// END ENQUEUE PARENT ACTION
Below is the part of the parents function.php file containing how it loads the scripts
add_action('wp_enqueue_scripts', 'simpleshift_public_scripts');
function simpleshift_public_scripts() {
if (!is_admin()) {
wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array('jquery'), '3.0.0',true);
wp_enqueue_script('waypoints',get_template_directory_uri() . '/assets/js/jquery.waypoints.min.js','','3.1.1',true);
wp_enqueue_script('scrollreveal',get_template_directory_uri() . '/assets/js/scrollReveal.min.js','','2.3.2',true);
wp_enqueue_script('easing',get_template_directory_uri() . '/assets/js/jquery.easing.min.js','','1.3',true);
wp_enqueue_script('waypoints-sticky',get_template_directory_uri() . '/assets/js/sticky.min.js','','3.1.1',true);
wp_enqueue_script('nicescroll',get_template_directory_uri() . '/assets/js/nicescroll.min.js','','3.1.1',true);
wp_enqueue_script('parallax',get_template_directory_uri() . '/assets/js/parallax.min.js','','3.1.1',true);
wp_enqueue_script('simpleshift_public',get_template_directory_uri() . '/assets/js/public.js','','1.0.0',true);
wp_enqueue_script('html5shiv',get_template_directory_uri() . '/assets/js/html5shiv.js','','1.0.0',false);
wp_script_add_data( 'html5shiv', 'conditional', 'lt IE 9' );
wp_enqueue_script('respondjs',get_template_directory_uri() . '/assets/js/respond.js','','1.0.0',false);
wp_script_add_data( 'respondjs', 'conditional', 'lt IE 9' );
}
}

You should first find your script in .php files. Depending on how its printing, you can use solution:
Its using some action, like
add_action( 'wp_enqueue_scripts', '/*some function*/' );
And in the function you'll find wp_register_script, or wp_enqueue_script:
wp_enqueue_script( $handle //you'll need handle name, ... )
After founding you need to add this code:
add_action( 'wp_enqueue_scripts', 'theme_name_scripts', 20 );
function theme_name_scripts() {
wp_dequeue_script( 'simpleshift_public' );
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/js/public.js', array( 'jquery' ), '1.0', true);
}
Or the script in your theme can be printed using just <script> html tag(not recommended way ). In this case you need to comment or delete this tag from your parent theme, if you don't need it. After you just need to add your js file, using this code
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() .'/js/public.js', array( 'jquery' ), '1.0', true);
}
if you has active child theme, then put the code at the end of /your_child_theme_folder/functions.php file. If not, then put it at the end of your parent theme functions.php file. Be sure, that there isn't ?> closing tag. If its there, then just delete it and put the code instead of it.

wp_enqueue not working at all

I'm trying to create a wordpress theme and start learning the best way to include javascript and css files using wp_enqueue. After couple hours, I still can't load the files. Here is the code I use
function compro_scripts() {
wp_register_style( 'style', get_template_directory_uri() . '/css/materialize.css', array(), '20150208', 'all');
wp_enqueue_script( 'style' );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );
It looked simple on every tutorial I've read, but it still not work for me. Would anyone mind helping me solve this ?

This very basic knowledge of Wordpress, but as a newbie I found out this is pretty confusing. If you want to use the best practice to include javascript and css files make sure to add wp_head() and wp_footer(). The rest of it is described clearly here How to Load Javascript like Wordpress Master

You've registered the "style" handle with wp_register_style() and you're enqueuing it by using wp_enqueue_script() which is incorrect. wp_enqueue_script() in your code needs to be replaced by wp_enqueue_style(), since it's a style that you are including, not a script.
Alternatively, you can simply enqueue scripts and styles directly without the need to register them separately - like this
function compro_scripts() {
$template_dir = get_template_directory_uri();
//enqueue a style
wp_enqueue_style( 'style', $template_dir . '/css/materialize.css', array(), '20150208', 'all');
//enqueue a script
wp_enqueue_script( 'custom', $template_dir . '/js/custom.js', array( 'jquery' ), false, false );
}
add_action( 'wp_enqueue_scripts', 'compro_scripts' );

Cant register function WordPress

No matter how hard I try, I can't successfully register my function with WordPress.
I have currently done the following:
Added code in themes functions.php
function test_my_script() {
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/gls-enable.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'test_my_script' );
Added my script in themes folder /js/gls-enable.js
jQuery(document).ready(function($) {
$("shipping_method_0_flat_rate").change(function () {
if ($("#shipping_method_0_flat_rate").is(":checked")) {
window.alert("sometext");
});
});
Called my script on the page where I want it to work
<?php test_my_script(); ?>
When I view the source on the mentioned page, the script isn't to be found anywhere.

You're going to want to get rid of the register_script:
function test_my_script() {
wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/gls-enable.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'test_my_script' );
Also, by doing this, your script will be automatically enqueued when the 'wp_enqueue_scripts' action hook is called. You don't need to explicitly call it in your template via php.
There's also an error in your jQuery syntax. It should be:
jQuery(document).ready(function(){
$("#shipping_method_0_flat_rate").change(function(){
if ( $("#shipping_method_0_flat_rate").is(":checked") ) {
window.alert("sometext");
}
});
});

First of all you don't need to call that test_my_script() inside your page. It's a hook to wp_enqueue_scripts and it is automatically loaded by wordpress and this means the error should be on javascript.
Here : $("shipping_method_0_flat_rate")., add a # or . ( if that is an id or a class name );
Maybe the problem is abouve registering that action in php, so better set WP_DEBUG to true ( root of your wordpress and edit wp-config.php )
If you get some errors after setting WP_DEBUG to true solve them and also post the error you get inside console ( you should have :D )
And is a good practice to load al javascript files in footer ( this file is loaded in header ). Maybe the jquery is in footer and gls-enable.js is loaded before jquery.
To load this in footer :
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/gls-enable.js', array( 'jquery' ), '1.0', true );

How to include jQuery in a WordPress theme?

I am pretty new to WordPress and I am figuring out how to include jQuery into a theme.
I create the following function into functions.php theme:
function load_java_scripts() {
// Load FlexSlider JavaScript that handle the SlideShow:
wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');
So I think that I can add it as some other JavaScript or CSS local resources but I am not sure about this method because in this case the jquery.js is not a local resource but is an online resource (is it the same thing?)
I also have some doubts because searching online I have found different methods to add jQuery to my theme, like this one.
Can you give me some information about how to correctly complete this task?

Is there any specific reason why you're not using the jQuery found in WordPress?
If you need to add your JavaScript file which depends on jQuery, you can add jQuery as a dependency.
<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js', #your JS file
array( 'jquery' ) #dependencies
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
Note that WordPress loads jQuery in no conflict wrappers. so your code should be like:
jQuery(document).ready(function($) {
// Inside of this function, $() will work as an alias for jQuery()
// and other libraries also using $ will not be accessible under this shortcut
});

Since WP already comes with jQuery, I would simply load it for your theme, add it like this into your functions.php
function load_scripts(){
//Load scripts:
wp_enqueue_script('jquery'); # Loading the WordPress bundled jQuery version.
//may add more scripts to load like jquery-ui
}
add_action('wp_enqueue_scripts', 'load_scripts');
There are several ways to include jQuery into a theme. I always use WP bundled version which I find very simple.

In wordpress No need for Custom Jquery.
Add dependencies as 'jquery' it'll automatically get loaded.

try this,
<?php
function load_external_jQuery() {
wp_deregister_script( 'jquery' ); // deregisters the default WordPress jQuery
$url = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'; // the URL to check against
$test_url = #fopen($url,'r'); // test parameters
if( $test_url !== false ) { // test if the URL exists if exists then register the external file
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js');
}
else{// register the local file
wp_register_script('jquery', get_template_directory_uri().'/js/jquery.js', __FILE__, false, '1.7.2', true);
}
wp_enqueue_script('jquery'); // enqueue the jquery here
}
add_action('wp_enqueue_scripts', 'load_local_jQuery'); // initiate the function
?>

You can use the methods below to include jQuery:
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'load-js-validate', 'foldername/jquery.js' );
Directly add in header file.<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
function js_scripts() {
wp_enqueue_script( 'jquery', get_template_directory_uri() . '/js/example.js');
}
add_action( 'wp_enqueue_scripts', 'js_scripts' ); // add this in function file