We Keep Coding

How to fix JS Files not working in Understrap Child theme

I am using the Understrap Child theme to build my site. All my CSS files are working properly but my JS files are not working.
I have the following code in my Html
<script src="/js/jquery.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/animsition.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.pagepiling.min.js"></script>
My enqueue.php file has the following code
<?php
/**
* Understrap enqueue scripts
*
* #package Understrap
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
if ( ! function_exists( 'understrap_scripts' ) ) {
/**
* Load theme's JavaScript and CSS sources.
*/
function understrap_scripts() {
// Get the theme data.
$the_theme = wp_get_theme();
$theme_version = $the_theme->get( 'Version' );
$bootstrap_version = get_theme_mod( 'understrap_bootstrap_version', 'bootstrap4' );
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
// Grab asset urls.
$theme_styles = "/css/theme{$suffix}.css";
$theme_scripts = "/js/theme{$suffix}.js";
if ( 'bootstrap4' === $bootstrap_version ) {
$theme_styles = "/css/theme-bootstrap4{$suffix}.css";
$theme_scripts = "/js/theme-bootstrap4{$suffix}.js";
}
$css_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_styles );
wp_enqueue_style( 'understrap-styles', get_template_directory_uri() . $theme_styles, array(), $css_version );
wp_enqueue_script( 'jquery' );
$js_version = $theme_version . '.' . filemtime( get_template_directory() . $theme_scripts );
wp_enqueue_script( 'understrap-scripts', get_template_directory_uri() . $theme_scripts, array(), $js_version, true );
wp_enqueue_script( 'carousel-scripts', get_template_directory_uri() . '/js/owl.carousel.min.js', array(), $theme_version, true );
wp_enqueue_script( 'popup-scripts', get_template_directory_uri() . '/js/jquery.magnific-popup.min.js', array(), $theme_version, true );
wp_enqueue_script( 'wow-scripts', get_template_directory_uri() . '/js/wow.min.js', array(), $theme_version, true );
wp_enqueue_script( 'pagepiling-scripts', get_template_directory_uri() . '/js/jquery.pagepiling.min.js', array(), $theme_version, true );
wp_enqueue_script( 'smoothscroll-scripts', get_template_directory_uri() . '/js/smoothscroll.js', array(), $theme_version, true );
wp_enqueue_script( 'validate-scripts', get_template_directory_uri() . '/js/jquery.validate.min.js', array(), $theme_version, true );
wp_enqueue_script( 'jquery-scripts', get_template_directory_uri() . '/js/jquery.min.js', array(), $theme_version, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
} // End of if function_exists( 'understrap_scripts' ).
add_action( 'wp_enqueue_scripts', 'understrap_scripts' );
I have copied the inc folder from parent theme to the child theme and modified my functions.php file as follows
<?php
/**
* Understrap Child Theme functions and definitions
*
* #package UnderstrapChild
*/
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
// UnderStrap's includes directory.
$understrap_inc_dir = get_stylesheet_directory() . '/inc';
// Array of files to include.
$understrap_includes = array(
'/theme-settings.php', // Initialize theme default settings.
'/setup.php', // Theme setup and custom theme supports.
'/widgets.php', // Register widget area.
'/enqueue.php', // Enqueue scripts and styles.
'/template-tags.php', // Custom template tags for this theme.
'/pagination.php', // Custom pagination for this theme.
'/hooks.php', // Custom hooks.
'/extras.php', // Custom functions that act independently of the theme templates.
'/customizer.php', // Customizer additions.
'/custom-comments.php', // Custom Comments file.
'/class-wp-bootstrap-navwalker.php', // Load custom WordPress nav walker. Trying to get deeper navigation? Check out: https://github.com/understrap/understrap/issues/567.
'/editor.php', // Load Editor functions.
'/deprecated.php', // Load deprecated functions.
);
// Load WooCommerce functions if WooCommerce is activated.
if ( class_exists( 'WooCommerce' ) ) {
$understrap_includes[] = '/woocommerce.php';
}
// Load Jetpack compatibility file if Jetpack is activiated.
if ( class_exists( 'Jetpack' ) ) {
$understrap_includes[] = '/jetpack.php';
}
// Include files.
foreach ( $understrap_includes as $file ) {
require_once $understrap_inc_dir . $file;
}
/**
* Removes the parent themes stylesheet and scripts from inc/enqueue.php
*/
function understrap_remove_scripts() {
wp_dequeue_style( 'understrap-styles' );
wp_deregister_style( 'understrap-styles' );
wp_dequeue_script( 'understrap-scripts' );
wp_deregister_script( 'understrap-scripts' );
}
add_action( 'wp_enqueue_scripts', 'understrap_remove_scripts', 20 );
/**
* Enqueue our stylesheet and javascript file
*/
function theme_enqueue_styles() {
// Get the theme data.
$the_theme = wp_get_theme();
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
// Grab asset urls.
$theme_styles = "/css/child-theme{$suffix}.css";
$theme_scripts = "/js/child-theme{$suffix}.js";
wp_enqueue_style( 'child-understrap-styles', get_stylesheet_directory_uri() . $theme_styles, array(), $the_theme->get( 'Version' ) );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'child-understrap-scripts', get_stylesheet_directory_uri() . $theme_scripts, array(), $the_theme->get( 'Version' ), true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
/**
* Load the child theme's text domain
*/
function add_child_theme_textdomain() {
load_child_theme_textdomain( 'understrap-child', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'add_child_theme_textdomain' );
/**
* Overrides the theme_mod to default to Bootstrap 5
*
* This function uses the `theme_mod_{$name}` hook and
* can be duplicated to override other theme settings.
*
* #param string $current_mod The current value of the theme_mod.
* #return string
*/
function understrap_default_bootstrap_version( $current_mod ) {
return 'bootstrap5';
}
add_filter( 'theme_mod_understrap_bootstrap_version', 'understrap_default_bootstrap_version', 20 );
/**
* Loads javascript for showing customizer warning dialog.
*/
function understrap_child_customize_controls_js() {
wp_enqueue_script(
'understrap_child_customizer',
get_stylesheet_directory_uri() . '/js/customizer-controls.js',
array( 'customize-preview' ),
'20130508',
true
);
}
add_action( 'customize_controls_enqueue_scripts', 'understrap_child_customize_controls_js' );
What I have in my Chrome developer tools is this
I have my js files in the js folder of Understrap child theme and not the one under src folder.

you have to use get_stylesheet_directory_uri() instead of get_template_directory_uri()
get_template_directory_uri return always main Theme Uri.

i cant get my script to wp as there is nothing appear in wp html when inspect it

I tried everything but I could not solve this issue i do not know what is the problem
here is the code in function.php file ;
<?php
function perfection_styles() {
wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style('fontawesome-css', get_template_directory_uri() . '/css/all.min.css');
}
function perfection_scripts() {
wp_enqueue_script('jquery-js', get_template_directory_uri() . '/js/jquery-3.6.0.min.js', array(), false, true);
wp_enqueue_script('popper-js', get_template_directory_uri() . '/js/popper.js', array(), false, true);
wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array(), false, true); // to know those parameters go to codex and search for this function
wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'perfection_styles');
add_action('wp_enqueue_scripts', 'perfection_scripts');
?>

it was a stupid mistake i named the file function.php instead of functions.php

CDN scripts not enqueuing in WordPress

I'm trying to enqueue scripts & styles from CDN in Wordpress so I can use this JSfiddle within the footer of my code:
https://jsfiddle.net/wcepbL45/
I can see the 6 scripts are loading in my Page Source, but the JSfiddle I'm trying to embed in the footer isn't working.
I am guessing some of the new scripts are clashing with the original ones, or do I need to be enqueuing these in my footer.php file?
So atm, my functions.php has this code:
<?php
function load_stylesheets()
{
wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css',
array(), false, 'all');
wp_enqueue_style('bootstrap');
wp_register_style('style', get_template_directory_uri() . '/style.css',
array(), false, 'all');
wp_enqueue_style('style');
}
add_action('wp_enqueue_scripts', 'load_stylesheets');
function include_jquery()
{
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-3.1.3.min.js', '', 1, true);
add_action('wp_enqueue_scripts', 'jquery');
}
add_action('wp_enqueue_scripts', 'include_jquery');
function loadjs()
{
wp_register_script('customjs', get_template_directory_uri() . '/js/scripts.js', '', 1, true);
wp_enqueue_script('customjs');
}
add_action('wp_enqueue_scripts', 'loadjs');
// Next 6 styles are new (I can see them when i view page source, but I think they are clashing with something, as the JSfiddle I'm trying to input isnt working.
wp_register_style( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_style('Bootstrap');
wp_register_style( 'Bootstrap_Theme', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' );
wp_enqueue_style('Bootstrap_Theme');
wp_register_style( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/css/bootstrap-slider.min.css' );
wp_enqueue_style('Bootstrap_Slider');
wp_register_script( 'jQuery', 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', null, null, true );
wp_enqueue_script('jQuery');
wp_register_script( 'Bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', null, null, true );
wp_enqueue_script('Bootstrap');
wp_register_script( 'Bootstrap_Slider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', null, null, true );
wp_enqueue_script('Bootstrap_Slider');
//
Where am I going wrong?

Multiple mistakes here, You should restrict the use of your scripts to everything but the admin panel. You're not checking if the CDN is actually working, and you have no fallback. get_template_directory_uri() should not be used for the loading the style.css file, instead use get_stylesheet_uri(). You're using multiple functions for no reason and loading. your call for wp_register_style and wp_register_style are outside any functions.
I will just paste what i'm using to load and enqueue scripts and style, feel free to copy pasta! Hope this will help you, don't forget to thumbs up the answer if it does.
<?php add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue bootstrap bundle js (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_bundle_js = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js', 'r' );
if ( $test_bootstrap_bundle_js !== false ) {
wp_register_script( 'bootstrap_bundle_js', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js' );
} else {
wp_register_script( 'bootstrap_bundle_js', get_template_directory_uri() . '/assets/js/bootstrap.bundle.min.js' );
};
wp_enqueue_script( 'bootstrap_bundle_js' );
/**
* Register then enqueue bootstrap css (Bootstrap 5.x required)
*
* Check if CDN's url is valid, if not return fallback
*/
$test_bootstrap_css = #fopen( 'https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css', 'r' );
if ( $test_bootstrap_css !== false ) {
wp_register_style( 'bootstrap_css', '//stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' );
} else {
wp_register_style( 'bootstrap_css', get_stylesheet_uri() . '/assets/css/bootstrap.min.css' );
};
wp_enqueue_style( 'bootstrap_css' );
/**
* Register then enqueue style css
*/
wp_register_style( 'style_css', get_stylesheet_uri(), array( 'bootstrap_css' ) );
wp_enqueue_style( 'style_css' );
};
}; ?>
EDIT 1: Read more about the wp_enqueue_script # https://developer.wordpress.org/reference/functions/wp_enqueue_script/
EDIT 2: Bootstrap 5 as a range plug and play component # https://v5.getbootstrap.com/docs/5.0/forms/range/ (same for Bootstrap 4)
EDIT 3: When you enqueue your scripts you can set up dependencies restricting the load and enqueue of your script
<?php
/**
* Register then enqueue script js
*/
wp_register_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'bootstrap_bundle_js', 'jquery_js' ) );
wp_enqueue_script( 'script_js' ); ?>
Inside the wp_register_script we specify an array of script to load our new script after array( 'bootstrap_bundle_js', 'jquery_js' ). It uses the handles defined upon registering the style/script wp_register_script( 'script_js', ... here 'script_js' is the handle.

In response to your last comment, we can do something like this:
For your JS scripts:
(1) jquery.min.js,
eg: wp_enqueue_script( 'jquery_js', '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' );
(2) bootstrap.min.js with dependency towards (1),
eg: wp_enqueue_script( 'bootstrap_js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array( 'jquery_js' ) );
(3) bootstrap-slider.min.js with dependency towards (1) & (2),
eg: wp_enqueue_script( 'bootstrap_slider_js', '//cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.0/bootstrap-slider.min.js', array( 'jquery_js', 'bootstrap_js' ) );
(4) script.js with dependency towards (1) & (2) & (3),
eg: wp_enqueue_script( 'script_js', get_template_directory_uri() . '/assets/js/script.js', array( 'jquery_js', 'bootstrap_js', 'bootstrap_slider_js' ) );
For your CSS scripts:
(1) bootstrap.min.css, eg: (same here but with wp_enqueue_style)
(2) bootstrap-slider.css with dependency towards (1),
(3) style.css with dependency towards (1) & (2),

enqueue style and script WordPress doesn't work

I'm trying to enqueue javascript and css in WordPress. I have written the following code but it is not working and no style or css is being added to my theme.
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri() . '/css/persian-datepicker.css', array(), '1.1', 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), '1.1', true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

I think it will be added but it showing you cache version CSS and js which is blank maybe
function add_theme_scripts() {
wp_enqueue_style( 'cssdatepicker', get_template_directory_uri(). '/css/persian-datepicker.css', array(), null, 'all');
wp_enqueue_script( 'jsdate', get_template_directory_uri() . '/js/persian-date.js', array ( 'jquery' ), null, true);
wp_enqueue_script( 'jsdatepicker', get_template_directory_uri() . '/js/persian-datepicker.js', array ( 'jquery' ), null, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
use this code to run updated js and CSS file ( non-cache )
OR
it is already added to your site but the path is wrong so it will throw an error in console.
you can see in the console using the F12 key
please check and let me know what is your status.
OR
wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
if your $handle has already existed with other style or script so it will not be added to your theme or plugin so be careful about this and add the unique name of $handle
Note :- Add Unique name of $handle or add your own prefix before name of
$handle like custom_jquery this is our custom jquery $handle name
Refrence site :- WP Codex wp_enqueue_script

Enqueue js in wordpress with charset

I have script
<script src="js/app/script.js" charset="iso-8859-1"></script>
I need to enqueue this js in wordpress with charset. How can I do it ?
I tried do it like that
private static function includeScriptWithCharset($path, $charset){
// I need charset="iso-8859-1"
wp_enqueue_script ($path, plugins_url($path). " ". $charset);
}

I know this question is quite old now, however I have the answer for this, in case this still helps Serg, or helps anyone else who comes across this issue.
The way to do this is to use the WordPress 'script_loader_tag' hook as follows:
// First enqueue your scripts as follows:
wp_enqueue_script( 'my-script-handle', get_stylesheet_directory_uri() . '/some.js', array( 'jquery' ), '6.0');
wp_enqueue_script( 'my-other-handle', get_stylesheet_directory_uri() . '/someother.js', array( 'jquery' ), '6.0');
// Next use the script loader hook as follows:
function my_async_scripts( $tag, $handle, $src ) {
// the handles of the enqueued scripts we want to async
$async_scripts = array( 'my-script-handle', 'my-other-handle' );
if ( in_array( $handle, $async_scripts ) ) {
return '<script type="text/javascript" src="' . $src . '" charset="iso-8859-1"></script>' . "\n";
}
return $tag;
}
add_filter( 'script_loader_tag', 'my_async_scripts', 10, 3 );