WordPress JS Loading Issues with Bootstrap and Popper - javascript

There seems to be something wacky going on with scripts as they load causing issues. I have this:
function fyxt_custom_scripts() {
wp_enqueue_script('jquery');
//load order is important (from website jquery, popper, bootstrap)
wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
wp_enqueue_script('prefix_bootstrap');
}
add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );
I am getting the following console error:
Uncaught TypeError: Bootstrap's tooltips require Popper.js (https://popper.js.org/)
So I add in the following to WordPress getting popper in there.
function fyxt_custom_scripts() {
wp_enqueue_script('jquery');
//popper for bootstrap
wp_register_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
wp_enqueue_script( 'popper' );
//load order is important (from website jquery, popper, bootstrap)
wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
wp_enqueue_script('prefix_bootstrap');
}
add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );
Once that is in it loads popper in. But now I am getting another error. Any idea why?
tooltip.js:559 Uncaught TypeError: this.element.getAttribute is not a function
at i.t._fixTitle (tooltip.js:559)
at i.t._setListeners (tooltip.js:554)
at new i (tooltip.js:142)
at i.t._enter (tooltip.js:576)
at HTMLDocument.<anonymous> (tooltip.js:528)
at HTMLDocument.handle (jquery.js?ver=1.12.4-wp:3)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4-wp:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4-wp:3)
So it seems like tooltip is recognized but says it needs popper. But then it gets it and tooltip errors out. What is going on here?
I tried a couple solutions and nothing is working. I think this has to do with load order/dependencies. Here is the loading script in full.
function fyxt_custom_scripts() {
wp_enqueue_style( 'jquery-custom', plugin_dir_url( __FILE__ ) . '../css/fyxt-theme-2/jquery-ui-1.10.4.custom.css' );
wp_enqueue_style( 'jquery-custom', plugin_dir_url( __FILE__ ) . '../css/fyxt-theme-2/jquery-ui-1.10.4.custom.min.css' );
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-ui-core' );
wp_enqueue_script( 'jquery-ui-tabs' );
wp_enqueue_script( 'jquery-ui-button' );
wp_enqueue_script( 'jquery-ui-accordion' );
wp_enqueue_script( 'jquery-ui-slider' );
wp_enqueue_script( 'jquery-ui-core' );
wp_enqueue_script( 'jquery-ui-widget' );
wp_enqueue_script( 'jquery-ui-progressbar' );
wp_enqueue_script( 'jquery-ui-sortable' );
wp_enqueue_script( 'jquery-ui-autocomplete' ); //for tags, use later for generators (powers, effects, etc)
wp_enqueue_script( 'tabs-script', plugin_dir_url( __FILE__ ) . '../js/tabs.js', array('jquery-ui-core', 'jquery-ui-accordion', 'jquery-ui-tabs') );
wp_enqueue_script( 'tags-script', plugin_dir_url( __FILE__ ) . '../js/tagmanager-master/tagmanager.js', array(), '', false );
wp_enqueue_style( 'tags-custom', plugin_dir_url( __FILE__ ) . '../js/tagmanager-master/tagmanager.css' );
//plupload
wp_enqueue_script( 'plupload-full', plugin_dir_url( __FILE__ ) . '../js/plupload.full.min.js', array(), '', false );
wp_enqueue_script( 'plupload-scripts', plugin_dir_url( __FILE__ ) . '../js/jquery.ui.plupload/jquery.ui.plupload.min.js', array(), '', false );
wp_enqueue_style( 'plupload-css', plugin_dir_url( __FILE__ ) . '../js/jquery.ui.plupload/css/jquery.ui.plupload.css' );
//popper for bootstrap
wp_register_script( 'popper','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'', false );
wp_enqueue_script( 'popper' );
//bootstrap
wp_register_style('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
wp_enqueue_style('prefix_bootstrap');
//load order is important (from website jquery, popper, bootstrap)
wp_register_script('prefix_bootstrap', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'popper' ),'', false );
wp_enqueue_script('prefix_bootstrap');
}
add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );
If the 'tabs-script' is included I get the error, jquery buttons are all broken. Tabs and accordions work.
tooltip.js:568 Uncaught TypeError: this.element.getAttribute is not a function
at i.t._fixTitle (tooltip.js:568)
at i.t._setListeners (tooltip.js:563)
at new i (tooltip.js:140)
at HTMLDocument.<anonymous> (tooltip.js:767)
at Function.each (jquery.js?ver=1.12.4-wp:2)
at a.fn.init.each (jquery.js?ver=1.12.4-wp:2)
at a.fn.init.i._jQueryInterface [as tooltip] (tooltip.js:758)
at HTMLDocument.<anonymous> (tabs.js?ver=ec6af3c620057499034adb106af5aae1:10)
at i (jquery.js?ver=1.12.4-wp:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2)
at Function.ready (jquery.js?ver=1.12.4-wp:2)
at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2)
If I comment out the 'tabs-script' I get the jquery buttons to work but then it breaks tabs and accordion.
jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1 Uncaught TypeError: i.widget is not a function
at jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1
at jquery.ui.plupload.min.js?ver=ec6af3c620057499034adb106af5aae1:1
I am not to familiar with load orders and dependencies so advice here would be great. Thanks so much for the help!

What I do is respect the URLs that Bootstrap provide to me (https://getbootstrap.com/docs/4.4/getting-started/introduction/):
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js
https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js
Then in my function I just include the references that I need:
function fyxt_custom_scripts(){
wp_register_style(('prefix_bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', array(), '4.4.1', 'all');
wp_register_script('popper', 'https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js', array( 'jquery' ),'1.16.0', true );
wp_register_script('prefix_bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'jquery', 'popper' ),'4.4.1', true );
}
add_action( 'wp_enqueue_scripts', 'fyxt_custom_scripts' );
I follow Bootstrap recomendations and place the scripts call in the footer.
After that make sure that you have the calls to the functions
<?php get_header() ?> and <?php get_footer() ?> between the <head>...</head> HTML tags and just before </body> HTML tag respectivelly in your theme.

It seems that PLUpload was the one causing the issues. I tried many different configurations and load orders and it always seemed to break with plupload. I have decided not to use it and instead go with another similar plugin, Dropzone. PLupload has not been updated in a few years so think it is better to go with a more recently updated/modern style anyway. Thank you all for your tips and suggestions.

You should move all the JS scripts into the footer. I hope it would help you out. Please have a look below:
function fyxt_custom_scripts() {
}
add_action( 'wp_footer', 'fyxt_custom_scripts' );

Related

Adding a JS file in a Wordpress block child theme

I am creating a block child theme of Wordpress, I need to attach my own CSS sheet and JS file.
As recommended, I queued both files in functions.php with:
//dodanie własnych css i js
add_action( 'wp_enqueue_scripts', 'child_enqueue_assets' );
function child_enqueue_assets() {
//css
wp_enqueue_style( 'style', get_stylesheet_uri() );
//js
wp_enqueue_script( 'script', get_template_directory_uri() . '/script.js', array( 'jquery' ),'',true );
}
add_action( 'admin_init', 'child_editor_styles' );
function child_editor_styles() {
add_editor_style( [
get_stylesheet_uri()
] );
}
Why is my console browser showing error 404 - JS file not found in parent theme path and not child theme (get_template_directory_uri (). '/Script.js')? I put the JS file in the child theme and hence I want it to be read, not from the parent theme location. The previously queued patch CSS file is read from the child theme. What am I doing wrong with the JS file?
The get_template_directory_uri() will always return the current parent theme url.
To get the child theme URI instead, you should be using get_stylesheet_directory_uri()
In your code replace the following line:
wp_enqueue_script( 'script', get_template_directory_uri() . '/script.js', array( 'jquery' ),'',true );
with
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/script.js', array( 'jquery' ),'',true );
I hope this will help you.

Linking JS/jQuery to WordPress functions.php

Following a tutorial that recommends the following code to link JS/jQuery to WordPress, within functions.php:
<?php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/bootstrap.min.js', array( 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
?>
But something is wrong, either the jQuery or the bootstrap.min.js did not link properly, possibly both. How can I ensure that both are linked?

Adding Multiple Javascript files to Wordpress functions.php

I have managed to add one js file to the WP functions.php and this works fine. How do I add another? e.g add classie.js to the add_my_script function? I tried to duplicate the get_template_directory_uri() but this didn't work - I feel as though the answer is staring me in the face!
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'slicknav',// name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/jquery.slicknav.min.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
You need to call the wp_enqueue_script twice:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'slicknav',
get_template_directory_uri() . '/js/jquery.slicknav.min.js',
array('jquery')
);
wp_enqueue_script(
'classie',
get_template_directory_uri() . '/js/classie.js',
array('jquery')
);
}

How to load bootstrap script and style in functions.php (wordpress)?

I converted bootstrap theme to wordpress. Now, I have a problem in loading the bootstrap scripts and style.
This is my code in functions.php
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/jquery.min.js', array( '' ) );
wp_enqueue_script( 'samplejs', get_template_directory_uri() . '/js/clean-blog.min.js', array( '' ) );
// For either a plugin or a theme, you can then enqueue the script:
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
and i add this in my header
<?php wp_enqueue_script("jquery"); ?>
Additional question:
What is the difference between wp_register and wp_enqueue?
Please help me. Im beginner in using bootstrap.
All you need to do is enqueue them. Also, I recommend getting rid of your jquery import (the second wp_enqueue). WordPress includes jQuery by default, and you're already including it in the first script (because you have listed it as a dependency). Here's an example, but this enqueues jquery twice (the native jquery, and the bootstrap jquery):
function wpbootstrap_scripts_with_jquery()
{
// Register the script like this for a theme:
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
wp_enqueue_script( 'bootstrap-jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js' );
wp_enqueue_script( 'blog-scripts', get_stylesheet_directory_uri() . '/js/clean-blog.min.js' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );
The only reason you'd need to register the scripts before enqueue-ing them, is if one of the scripts is a dependency. From the docs:
wp_register_script() registers a script file in WordPress to be linked
to a page later using the wp_enqueue_script() function, which safely
handles the script dependencies.
Scripts that have been pre-registered using wp_register_script() do
not need to be manually enqueued using wp_enqueue_script() if they are
listed as a dependency of another script that is enqueued. WordPress
will automatically include the registered script before it includes
the enqueued script that lists the registered script's handle as a
dependency.
you cas use "wp_enqueue_style" and "wp_enqueue_script".
for example:
function reg_scripts() {
wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

trouble importing jquery into wordpress

i have a really annoying problem with wordpress built-in jquery. I have read dozen of articles on the subject of properly registering and calling registered jquery scripts using the functions.php (the code is shown below), but it can't seem to work anyway I try it. Can you please explain to me what did I do wrong, I checked every file path that is hooked to wp_register_script, wp_head in header.php is in place, spelling is correct... I cannon think of the possible reason why none of the jquery plugins listed below won't work on my page, it's frustrating. Here is the link to my website, if it could help you (http://yuagro.eu.pn/wordpress). Many thanks.
// REGISTROVANJE JQUERY BIBLIOTEKA U WORDPRESSU
<?php
function jquery_biblioteke() {
wp_register_script( 'sticky-nav', get_template_directory_uri() . '/js/jquery.sticky.js', array('jquery') );
wp_register_script( 'basic-slider', get_template_directory_uri() . '/js/bjqs-1.3.min.js', array('jquery') );
wp_register_script( 'modern-ticker', get_template_directory_uri() . '/js/jquery.modern-ticker.min.js', array('jquery') );
wp_register_style( 'modern-tickerjs', get_template_directory_uri() . '/js/modern-ticker.js', array('modern-ticker') );
wp_register_script( 'easySlider', get_template_directory_uri() . '/js/easySlider1.7.js', array('jquery') );
wp_enqueue_script('sticky-nav');
wp_enqueue_script( 'basic-slider' );
wp_enqueue_script('modern-ticker');
wp_enqueue_script('modern-tickerjs');
wp_enqueue_script('easySlider');
}
add_action( 'wp_enqueue_scripts','jquery_biblioteke');
?>
i checked your link, check console and it said 'jQuery not defined', have you include jQuery library ie wp_enqueue_script('jquery');
hmmm I never register them just enque them with the path, like so:
<?php
function jquery_biblioteke() {
wp_enqueue_script( 'sticky-nav', get_template_directory_uri() . '/js/jquery.sticky.js', array('jquery') );
wp_enqueue_script( 'basic-slider', get_template_directory_uri() . '/js/bjqs-1.3.min.js', array('jquery') );
wp_enqueue_script( 'modern-ticker', get_template_directory_uri() . '/js/jquery.modern-ticker.min.js', array('jquery') );
wp_enqueue_script( 'modern-tickerjs', get_template_directory_uri() . '/js/modern-ticker.js', array('modern-ticker') );
wp_enqueue_script( 'easySlider', get_template_directory_uri() . '/js/easySlider1.7.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts','jquery_biblioteke');
?>
wp_enqueue_script('jquery');
Add this on top of your wordpress functiion

Categories