External javascript linking to WordPress - javascript

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.

Related

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?

Wordpress functions.php file not working

I want to add all my themes JavaScript files in function.php and my scripts are
<script src="http://localhost/xampp/website/nextgen/wp-content/themes/nextgen/nextgen/js/jquery.min.js"></script>
how can i add these to my functions.php i have tried several tutorials but it not work for me.
Show me demo with the above code
Place this in functions.php file:
function addthemejs() {
wp_enqueue_script( 'myscript', 'http://localhost/xampp/website/nextgen/wp-content/themes/nextgen/nextgen/js/jquery.min.js' , array(), "", false ); );
}
add_action( 'wp_enqueue_scripts' , 'addthemejs' );
I have hardcoded your code, you have to know that is not so good solution, but if you are just testing it's ok I guess

Issues connecting JS/jQuery files with WordPress causes header to disappear

I'm having issues adding jQuery/JavaScript files to my custom Bootstrap WordPress theme.
Here is the tutorial I'm using to build my theme (Please DO NOT criticize me for using something that's 3 years old. There's just a few modifications needed
Here are the files I would like to add to the functions.php file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
Here is what I have tried, the first one following the tutorial from it being a jquery file. The other two are having issues.
When I apply these and the wp_footer();
The header disappears as shown below.
Also having problems with the jQuery file that is from the jQuery library online.
wp_register_script( 'custom-script', get_template_directory_uri() . 'js/vendor/jquery-1.11.2.min.js', array( 'jquery' ) );
wp_register_script( 'custom-script', get_template_directory_uri() . 'js/vendor/bootstrap.min.js', array() );
wp_register_script( 'custom-script', get_template_directory_uri() . 'js/main.js', array() );</pre></code>
Sites I've looked at
when you are using wp_enqueue_script, the handle name ( first attribute ) must be uniqe for each one. so try following code.
function my_bootstrap_scripts() {
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/vendor/bootstrap.min.js', array('jquery'), '', true);
wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array('jquery'), '', true);
}
add_action('wp_enqueue_scripts', 'my_bootstrap_scripts');

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.

Why in WordPress I can't load my JavaScripts using an hook inside my functions.php file?

I am pretty new in WP (I came from Joomla) and I have the following problem:
I am carrying this pure HTML theme (that use BootStrap CSS framework) into a WordPress theme.
This is the original pure HTML demo theme (I have the entire source code because it is a downlodable example): http://www.html.it/guide/img/bootstrap/demo/home.html
And this is my personal WP theme on wich I am working on: http://onofri.org/WP_BootStrap/
As you can see the only difference from the original demo website and my personal WP theme is that in the second one the JavaScript is not loaded (so the upper horizontal main menu can't work well and the header SlideShow is fixed on a single immage)
I have do the following operations:
1) In my footer.php file I have disabled the JavaScript loading commenting them, in this way:
<!--
<script src="http://code.jquery.com/jquery.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/fancybox/jquery.fancybox.pack.js"></script>
<script src="/wordpress/wp-content/themes/AsperTheme/assets/js/scripts.js"></script>
-->
2)I have insert the following code into my functions.php file to load all the previous JavaScript using the WP standard way:
/* Function automatically executed by the hook 'load_java_scripts':
* 1) Load all my JavaScripts
*/
function load_java_scripts() {
// Load JQuery:
wp_enqueue_script('jquery');
// Load bootstrap.min.js:
wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array(), 'v3.0.3', true);
// Load FlexSlider JavaScript
wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array(), 'v2.1', true);
// Load FancyBox:
wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array(), 'v2.1.5', true);
// Load scripts.js:
wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0', true);
// Load Modernizer:
wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array(), '2.6.2', true);
}
add_action('wp_enqueue_scripts', 'load_java_scripts');
But as you can see seem that the JavaScript is not loaded and can't work. If I enamble the JavaScript loading inside my footer.php file (deleting the comments) it work well but I think that in WP this is not a good way to use.
What am I missing? What is it wrong?
Tnx
Andrea
Try clearing your browser cache.
If you are using any caching plugin (though I didn't see it) then try refreshing your cache.
I see that you are using jQuery plugins and Bootstrap.js. In that scenario you must specify that which script is dependent on which script. Besides this I can see scripts included at the bottom of the page. If you want them to be displayed in your <head> section then remove the last true arguement in wp_enqueue_script function call.
Try this code:-
function load_java_scripts() {
// Load JQuery:
wp_enqueue_script('jquery');
// Load bootstrap.min.js:
wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), 'v3.0.3');
// Load FlexSlider JavaScript
wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1');
// Load FancyBox:
wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array('jquery'), 'v2.1.5');
// Load scripts.js:
wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0');
// Load Modernizer:
wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array(), '2.6.2');
}
add_action('wp_enqueue_scripts', 'load_java_scripts');
if my myScripts-js is dependent on jquery then you should also include jquery in its dependency list as I've added for other scripts.

Categories

Resources