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' );
?>

Adding tooltip to mobile with click action using javascript

I'm pretty new to this so help and possibly patience would be appreciated. I've spent a few hours trying to string together a solution based on other peoples problems but I'm struggling.
I have icons on a website that on desktop hover will show the img title as a tooltip. Unfortunately on tablet/mobile this doesn't work. I assume because we can't hover on those browsers. Example page: http://queenofretreats.com/retreat/strategic-space-burgundy-france/ - you'll see the 8 turquoise icons below the main image. These are the icons in question.
I found a solution that adds the img title on click using javascript. Solution demo here: http://jsfiddle.net/bo28190/s3dg50y4/
I'm not sure why I can't get this to work on my actual wp installation.
I've added the script as a .js file in my theme folder. I've called the script from functions.php using
/**
* Enqueue a script
*/
function myprefix_enqueue_scripts() {
wp_enqueue_script( 'mobile-icon-tooltip', get_template_directory_uri() . '/assets/js/mobile-icon-tooltip.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );
I've added the jquery UI library , adding:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
But the tooltip doesn't show click on any screen size.

Try to replace this:
wp_enqueue_script( 'mobile-icon-tooltip', get_stylesheet_directory_uri() . '/js/mobile-icon-tooltip.js', array(), true );
with this:
wp_enqueue_script( 'mobile-icon-tooltip', get_template_directory_uri() . '/assets/js/mobile-icon-tooltip.js', array(), true );
get_stylesheet_directory_uri() returns the stylesheet URI, while what you really want is the theme base URI.

Remove render-blocking JavaScript:

I am trying to speed up the website and get 100/100 on here:
page speed insights - website www.chrispdesign.com
I have tried moving the coding etc but on my wordpress website i cant seem to quite find the correct place to put it. If I have had it in the right place it wont work.
Also I cannot
find Remove render-blocking JavaScript:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
on any of the wordpress pages only on the view page source?
I have tried a few options on autoptimize plugin etc.
and attempted what the guy on this link did:
https://moz.com/community/q/fixing-render-blocking-javascript-and-css-in-the-above-the-fold-content
Tried a few techniques but no no avail.
Anyone got some ideas?
Many thanks
Shaun

If you want to move javascript files to bottom, you need to deregister it (for jquery), and after register/enqueue it with wp_enqueue_script(set the last parameter at true)
<?php
function move_js_files(){
// Deregister jquery load by default
wp_deregister_script( 'jquery' );
wp_deregister_script( 'jquery-core' );
wp_deregister_script( 'jquery-migrate' );
// Register it by yourself and enqueue with last parameter at true
wp_register_script('jquery', includes_url() . '/js/jquery/jquery.js');
wp_enqueue_script('jquery', includes_url() . '/js/jquery/jquery.js', array(), false, true);
wp_register_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js');
wp_enqueue_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js', array('jquery'), false, true);
// Exemple with a custom script in theme, no need to deregister
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-min.js', array( 'jquery' ), false, true );
}
// Only load on frontend
if(!is_admin()){
add_action( 'wp_enqueue_scripts', 'move_js_files', 0 );
}
You also need to check that all your javascript files (in theme and plugins) that use jQuery was also moved to bottom.
This works for me, with a few sites on Google Page Speed.
Hope this could help !

You could try to add the defer attribute to the script tags that need to be defered until page has loaded, see:
http://www.w3schools.com/TAgs/att_script_defer.asp

Properly register and enqueue scripts in wordress - Issue getting scripts to work

I've been working on a wordpress theme and I utilised different javascript elements within the site. I'm rather a rookie when it comes to Javascript and JQuery so I was inserting the scripts and cdn links directly into the <head> section of Header.php.
When some of my dropdown stopped working I realised it was creating a conflict between JQuery versions and that I'd been doing it wrong this whole time.
So I've learnt what I can regarding registering and enqueuing scripts but have had no luck getting the dropdowns etc up and running again.
Would you be able to tell from the code I've posted below what could be causing this issue? I know there's a high chance I've made a daft error with being new to it, I just can't fathom what it is.
These two snippets are the scripts for two repeated elements on the website. A slideout toggle box and a dropdown accordion box.
Accordion.js
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
collapsible: true, active: false
});
$('#accordion2').accordion({collapsible: true, active: false});
$('#accordion3').accordion({collapsible: true, active: false});
});
Togglebox.js
jQuery(document).ready(function($) {
$( ".dropdown" ).click(function() {
$( ".togglebox" ).toggle( "slide", 1000 );
});
});
The following snippet is the code I've placed in my Functions.php file.
function my_scripts_method() {
if ( !is_admin() ) {
wp_enqueue_script('jquery-ui-accordion');
wp_enqueue_script(
'custom-accordion',
get_template_directory_uri() . '/js/accordion.js',
array('jquery')
);
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/tabs.js',
array('jquery')
);
wp_enqueue_script('jquery-ui-toggle');
}
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
I've saved the 'accordion.js' and 'togglebox.js' file locally in the JS folder of the theme I'm using.
Any help regarding this would be greatly appreciated.

Create 2 JS Files:
accordion.js
togglebox.js
Save the 2 Files in the JS Folder of your Theme. After that register and enqueue the scripts in the Functions.php File of your Theme.
You don't have to Register jquery and jquery ui there already included in Wordpress. Here two useful links for you:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_register_script/
Try this in Togglebox.js:
jQuery(document).ready(function($) {
$( ".dropdown" ).click(function() {
$( ".togglebox" ).slideToggle( 1000 );
});
});
Try this in functions.php:
wp_enqueue_script('jquery-ui-accordion');
wp_register_script( 'custom-accordion', get_template_directory_uri() . '/js/accordion.js', array('jquery-ui-accordion'), '1', true );
wp_enqueue_script( 'custom-accordion' );
wp_register_script( 'custom-togglebox', get_template_directory_uri() . '/js/togglebox.js', array('jquery'), '1', true );
wp_enqueue_script('custom-togglebox');
Change custom in functions.php to the slug of your theme. I tried this code and it worked for me.

Wordpress unSlider issue

I'm trying to get unlider.js working on Wordpress. My guess is that the registration of the script is not working properly.
I am using a child theme, and this is the code I put in functions.php to register the script (taken from WP guide).
Clearly, I am doing something wrong, perhaps the script is being inserted before jQuery.
What is the best way to attach a script from a child theme, after jQuery?
One I have so far is this:
<?php
add_action( 'wp_enqueue_scripts', 'child_add_scripts' );
function child_add_scripts() {
wp_register_script(
'google-analytics',
get_stylesheet_directory_uri() . '/unslider.js',
array( 'jquery' ),
false,
'1.0',
true
);
wp_enqueue_script( 'google-analytics' );
}
?>