Develop Reference

How to properly link bootstrap scripts under wordpress theme?

I am creating a WP theme using Bootstrap 5 and I have encountered a problem that I cannot solve. I would like to place the bootstrap files directly into the theme files. I have successfully done this with the .css files, but I am having problems with the .js files. Do any of you perhaps have an idea what I am doing wrong that elements like navbar-toggler are not working? By including the js file <script src="_TEMP0_#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> in the theme using the CDN everything works. When I do it manually it no longer works.
Here is an excerpt from my functions.php file:
function imago_theme_scripts() {
wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700;900&display=swap" rel="stylesheet', array(), null );
wp_enqueue_style( 'imago-theme-style', get_stylesheet_uri(), array('imago-bootstrap-css'), '1.0.0' );
wp_style_add_data( 'imago-theme-style', 'rtl', 'replace' );
wp_enqueue_script( 'imago-bootstrap-popper', 'https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js', array(), null, true );
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array(), null, true );
//wp_enqueue_script( 'imago-bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha3/dist/js/bootstrap.bundle.min.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'imago_theme_scripts' );
I still tried this way by replacing the popper.min.js and bootstrap.min.js script with:
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.bundle.min.js', array(), null, true );, but unfortunately that doesn't change anything either. Navigation in the mobile version still doesn't work.
The directory structure is preserved correctly.
In the first configuration you can see that the `popper.min.js' file is plugged before the 'bootstrap.min.js' file according to the documntation.

They may not be working because you're not including jQuery to the dependencies.
wp_enqueue_script( 'imago-bootstrap-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), null, true );
Other than that, they are loading, your nav console indicates that... ...are there any errors in the console?

dequeuing and enqueuing minified js files in childtheme wordpress

I'm trying to dequeue a minified js file from wordpress parent theme.
Can't seem to work out how to dequeue and then enqueue my own custom js file from child theme.
Here is my code:
add_action( 'wp_enqueue_scripts', 'my_remove_scripts', 20 );
function my_remove_scripts(){
wp_dequeue_script( 'custom' );
}
add_action('wp_enqueue_scripts', 'my_add_scripts');
function my_add_scripts(){
wp_enqueue_script('custom-child', get_template_directory_uri() . '/js/custom'.$js_minify_prefix.'.js', array('jquery'), THEME_VERSION, true);
}
The script in the parent theme is enqueued like this:
wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom'.$js_minify_prefix.'.js', array('jquery'), THEME_VERSION, true);
Is there something I'm missing in the code or is there a special way of dequeueing/enqueueing minified scripts?
Any help would be appreciated!! :)

There is just one mistake in your code. You are dequeuing and then enqueuing the same file.
Use this code:
add_action( 'wp_enqueue_scripts', 'my_remove_scripts', 20 );
function my_remove_scripts(){
wp_dequeue_script( 'custom' );
}
add_action('wp_enqueue_scripts', 'my_add_scripts');
function my_add_scripts(){
wp_enqueue_script('custom-child', get_stylesheet_directory_uri() . '/js/custom.min.js', array('jquery'), 1.0, true);
}
get_stylesheet_directory_uri() is the key here. It returns the path of the child theme. Also, I have removed the $js_minify_prefix variable from the code as it is not required.

enqueue_script not working

quick question here.
I am adding custom javascript to my wordpress site, i have header-tab.js saved in the child theme's js folder, and tried to call on it with enqueue_script in my child theme's functions.php as shown here:
function includes_header_tab()
{
wp_enqueue_script( 'header-tab', get_template_directory_uri() .'/js/header-tab.js', array( 'jquery' ));
}
add_action('wp_enqueue_scripts', 'includes_header_tab');
?>
this does not seem to work, can anyone see if there is a problem in my code? or am i missing something? or it might be my javascript file that is at fault?

you are missing a couple of data, first register and then enqueue
function includes_header_tab()
{
wp_register_script( 'header-tab', get_template_directory_uri('/js/header-tab.js', __FILE__ ), array( 'jquery' ));
wp_enqueue_script( 'header-tab' );
}
add_action('wp_enqueue_scripts', 'includes_header_tab');
?>

As mentioned the get_directory_template_uri manual page:
In the event a child theme is being used, the parent theme directory URI will be returned, get_template_directory_uri() should be used for resources that are not intended to be included in/over-ridden by a child theme. Use get_stylesheet_directory_uri() to include resources that are intended to be included in/over-ridden by the Child Theme.
You simply got the parent's uri and not the child's.

Javascript files aren't loading in Wordpress

Ok, I may be an absolute idiot but I can't seem to figure this out... In my functions.php file I have this function that enqueues my style sheets and script files:
function load_style_sheets() {
wp_enqueue_script( 'jquery');
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/includes/css/bootstrap.min.css', '', '','all' );
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/includes/js/bootstrap.min.js', '', array( 'jquery' ), true );
wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/includes/js/custom.js', '', array( 'jquery' ), true );
}
add_action('wp_enqueue_scripts', 'load_style_sheets');
I intentionally have the last value of my scripts set to 'true', because I need my script to load in after the body content, however- they don't appear to be loading.
Basically what I want to happen is everytime I declare a div with the class of "ornament", my JS file runs this:
// add divider line ornaments
function addLineOrnaments() {
$(".ornament").append('<img src="img/divider-glyph.png" alt="" />');
}
addLineOrnaments();
When testing this on a static HTML site I had no problems, so I'm guessing I'm doing something wrong in WordPress.

I have noticed that Wordpress loads jQuery in 'safe' mode, where you can't use $ as a shorthand. Try using
jQuery(".ornament").append('<img src="img/divider-glyph.png" alt="" />');
instead

I need to change order of scripts in footer of my wordpress site so my custom main.js file loads last of all scripts

This is how I call my custom script in functions.php my child theme:
<?php
/*Functions file for child theme*/
define( 'OPTIONS_FRAMEWORK_DIRECTORY', get_stylesheet_directory_uri() . '/inc/' );
require_once dirname( __FILE__ ) . '/inc/options-framework.php';
function mychildtheme_setup() {
show_admin_bar(false);
wp_register_script( 'main', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'), false, true);
wp_enqueue_script( 'main' );
}
add_action('after_setup_theme', 'mychildtheme_setup');
add_action( 'wp_enqueue_scripts', 'mychildtheme_setup', 10000 );
?>
But when I look in source code I see that my main.js loads before contact-form.js and I want my main.js script loads after that one.
How can I change the order so my script loads last of all scripts?

Need answer still?Similar question has been answered here: https://wordpress.stackexchange.com/questions/114473/wp-enqueue-script-how-to-change-loading-order-of-scripts.
Keyword is $deps.