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?

wp_head(); crashing apache (xammp)

first question here. I'm wondering if you guys can help me.
So I'm trying to pass a static Bootstrap theme website into a dynamic CMS wordpress site. So I coded the site in html/css, showed it to the client and now I'm in the process of turning it into a wordpress theme. Now this isn't my first wordpress site I've made but I do have an issue that has me stumped. I'm trying to link all the stylesheets and scripts through the wp_enqueue function system, and this is what I've come up with so far:
function.php
<?php
function wpt_theme_styles() {
wp_enqueue_style('bootstrap' , get_template_directory_uri().'assets/css/bootstrap.min.css', array(), '1.0.0', 'all');
wp_enqueue_style('font-awesome' , get_template_directory_uri() . 'assets/css/font-awesome.min.css', array(),'1.0.0', 'all');
wp_enqueue_style('animate' , get_template_directory_uri() . 'assets/css/animate.css', array(),'1.0.0', 'all');
wp_enqueue_style('font' , get_template_directory_uri() . 'assets/css/font.css', array(),'1.0.0', 'all');
wp_enqueue_style('li-scroller' , get_template_directory_uri() . 'assets/css/li-scroller.css', array(),'1.0.0', 'all');
wp_enqueue_style('slick' , get_template_directory_uri() . 'assets/css/slick.css', array(),'1.0.0', 'all');
wp_enqueue_style('jquery_fancybox' , get_template_directory_uri() . 'assets/css/jquery.fancybox.css', array(), '1.0.0', 'all');
wp_enqueue_style('theme' , get_template_directory_uri() . 'assets/css/theme.css', array(bootstrap),'1.0.0', 'all');
wp_enqueue_style('style' , get_template_directory_uri() . 'style.css' , array(bootstrap),'1.0.0', 'all');
wp_enqueue_scripts('wow', get_template_directory_uri() . 'assets/js/wow.mim/js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('bootstrap', get_template_directory_uri() . 'assets/js/bootstrap.min.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('slick', get_template_directory_uri() . 'assets/js/slick.min.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('jquery_li_scroller', get_template_directory_uri() . 'assets/js/jquery.li-scroller.1.0.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('jquery_newsTicker', get_template_directory_uri() . 'assets/js/jquery.newsTicker.min.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('jquery_fancybox_pack', get_template_directory_uri() . 'assets/js/jquery.fancybox.pack.js' , array('jquery'), '1.0.0', true);
wp_enqueue_scripts('custom', get_template_directory_uri() . 'assets/js/custom.js' , array('jquery'), '1.0.0', true);
}
add_action("wp_enqueue_scripts", 'wpt_theme_styles');
?>
header.php
<!DOCTYPE html>
<html>
<head>
<title>8to Mandamiento</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
I've never used this function so it might be very crude or ill constructed, but I've been reading around that echoing in the header the stylesheets is not the correct form of linking it. however when I tried this system all i get is crashes ( https://imgur.com/a/2phNv )
anyone think they can help me put?

Well I found the answer to my own question. Here's what I was looking for.
To start, I shouldn't have enqueue styles or scripts directly. Before you enqueue styles or scripts, it's usually a good idea to register the styles/scripts like so:
function octavomandamiento_styles() {
/* Stylesheets */
wp_register_style('bootstrap', get_template_directory_uri().'/assets/css/bootstrap.min.css');
wp_enqueue_style('bootstrap', get_template_directory_uri().'/assets/css/bootstrap.min.css', array(''), null, all);
...
... /*Rest of the styles*/
...}
add_action("wp_enqueue_scripts", 'octavomandamiento_styles');
for the sake of completeness I'd show a script example too
function octavomandamiento_scripts() {
/* Scripts */
wp_register_script('wow', get_template_directory_uri().'/js/wow.min.js');
wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.mim/js' , array('jquery'), null, true);
...
.../*rest of the function*/
...}
add_action("wp_enqueue_scripts", 'octavomandamiento_scripts');
Then the scripts should be loaded properly where you placed the:
<?php wp_head(); ?>
/* and */
<?php wp_footer(); ?>
Which should be place in the header.php and footer.php respectively.
Secondly I tried using both enqueues on one single function but this just continued to pop errors on me. I'm sure it is possible to do it all in one but I really can't be f*cked to figure out why it isn't working and honestly it still loads properly.
Lastly, theres the fact I had a sintaxis error on my enqueue scripts. you see when you're writing your function and you enqueueing and registering scripts, you're supposed to type:
wp_register_script('wow', get_template_directory_uri().'/js/wow.min.js');
wp_enqueue_script('wow', get_template_directory_uri() . '/js/wow.mim/js' , array('jquery'), null, true);
and I had put
wp_enqueue_scripts('wow', get_template_directory_uri() . 'assets/js/wow.mim/js' , array('jquery'), '1.0.0', true);
Did you catch the error? it took me a while to figure it out. You have to use the singular script when enqueueing and registering but when calling the wp_enqueue action, you have to use the plural scripts. It seems very logical in hind sight but oh well. You live and learn.
Hope this post become useful for anyone having this or any other enqueuing issue

External javascript linking to WordPress

I have an HTML form which requires a javascript and JQuery to calculate prices. This is what the form looks like with the javascript implemented and everything working correctly: https://counterboosting.com/wp-content/themes/appointment/csgoboost/
Now I would like to put this form onto my wordpress website page. All the HTML shows up and it seems like the CSS also works but the Javascript just won't work.
There are 3 Javascripts and 3 CSS files to be linked, as you can see if you look at the source code of the link I put above.
I tried to Enqueue the scripts in functions.php file like this:
function wp_theme_enque_scripts() {
wp_enqueue_script( 'boosting', get_template_directory_uri() . '/csgoboost/js/boosting.js', array('jquery'), '1.0.0', true );
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/csgoboost/js/bootstrap.min.js', array(), '3.3.6', true );
wp_register_style('bootstrap.css', get_template_directory_uri() . 'csgoboost/css/bootstrap.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'bootstrap.css');
wp_register_style('boosting.css', get_template_directory_uri() . 'csgoboost/css/boosting.css', array(), '3.3.6', 'all' ); wp_enqueue_style( 'boosting.css');
}
add_action( 'wp_enqueue_scripts', 'wp_theme_enque_scripts' );
I then put this code in the HTML page:
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/jquery.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/bootstrap.min.js"></script>
<script src="https://www.counterboosting.com/wp-content/themes/appointment/csgoboost/js/boosting.js"></script>
This is the page I want the form to display on but the javascript is not working: https://www.counterboosting.com/buy-csgo-rank-boosting/
I'm really desperate to fix this, its been over a week that I've been try this. I'd even reward anyone able to help me here.
Thank you so much in advance (as you might tell, I am not very experienced in this field)

I see SyntaxError: expected expression, got '<' from my browser console from your page https://www.counterboosting.com/buy-csgo-rank-boosting/ I think you can fix it from there first.

Twitter bootstrap. bootstrap javascript is working but others script wont

I was wondering why my other scripts wont work but the bootstrap.js is working. I have here my code for my functions.php on calling the scripts.
<?php
/*Linking of CSS Child Theme to Parent Theme + JavaScript*/
function theme_add_bootstrap()
{
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.css' );
wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/css/custom.css' ); <!--Working Javascript -->
wp_enqueue_script( 'bootstrap-js', get_stylesheet_directory_uri().'/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri().'/js/custom.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-easy-min-js', get_stylesheet_directory_uri().'/js/jquery.easy.min.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery-1-js', get_stylesheet_directory_uri().'/js/jquery-1.11.0.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
The other 3 scripts (custom.js , jquery.easy.min.js, and jquery-1.11.0.js) are working fine in LOCALHOST. however when I uploaded my wordpress site. this scripts are no longer functioning. can someone help with this? by the way this 3 scripts are for PAGE SCROLLING.

Maybe you misspelled 'jquery' as 'jqeury'?
wp_enqueue_script( 'jquery-1-js', get_stylesheet_directory_uri().'/js/jqeury-1.11.0.js', array( 'jquery' ) );
But if that wasn't misspelled, then maybe you're loading jQuery twice, because jqeury-1.11.0.js looks like jQuery itself. In that case, get rid of this line. Wordpress has it's own jQuery, which you loaded the first time you put array('jquery') as a dependency in a wp_enqueue_script statement.

Add jQuery before bootstrap. Bootstrap depends on it

I think you have to place jquery at the top of scripts so it will work fine

jQuery scripts not loading in WordPress

I tried to attach my scripts to WordPress. I read all topics and tried all but did not get the solution, so i created a fake WordPress theme and uploaded it. Please, if you can solve this let me know.
Here is the file: my theme
Using Flexslider Sticky Header and Responsive Navigation
I guess that wp_enqueue_script does not work.
function theme_name_scripts() {
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
}
Please edit my theme.
thanks

OK here are the steps to take to resolve your issue.
1) Check you've added necessary actions.
Open up header.php inside your theme folder. Check that before the tag you have the wp_head action.
<?php wp_head(); ?>
Open up footer.php and before the closing body tag check you have the wp_footer tag.
<?php wp_footer(); ?>
These tags are necessary for the scripts to be added correctly.
2) Check your JS exists.
Next up is really simple. Open the JS folder and check the files you're attempting to load exist. WordPress will ignore them completely if they don't exist instead of adding a broken URL.
3) Check you're using the correct hook.
I noticed some comments / answers suggested use of init or wp_footer as the hook to load your JS but this is incorrect. You need to use the wp_enqueue_scripts hook. This should be placed inside functions.php
function theme_name_scripts() {
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
If you're still having an issue let me know and I'll go over further possibilities however the likelihood of that being necessary is slim. Also I'd like to highlight the name of the action is wp_enqueue_scripts. I've noticed a number of similar questions lately where the problem has been users have forgotten the 's'.

Try this
<?php
function theme_name_scripts() {
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
}
add_action('wp_footer', 'theme_name_scripts');
?>

Try to place your myscripts.js after you've included flexslider scripts:
function theme_name_scripts() {
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
}