Wordpress script not loading - javascript

I am having a wordpress website and some custom javascript. However my goal is to load this javascript file the right away as wordpress is suggesting it. Somehow this is not working or I am doing something wrong.
The file is called FormScript.js and is located here:
/httpdocs/wp-content/themes/Avada/FormScript.js
In the same directory is my function.php, in which I want to load the script.
This is how I am doing it:
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
// Register and Enqueue a Script
// get_stylesheet_directory_uri will look up child theme location
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . 'FormScript.js');
wp_enqueue_script( 'FormScript' );
}
But why is this not working? Thanks for help...

You are missing a / after get_stylesheet_directory_uri() inside wp_register_script.
It should be:
wp_register_script( 'FormScript', get_stylesheet_directory_uri() . '/FormScript.js');
Edit:
From the documentation:
Note: Does not contain a trailing slash.

why don't you open the header.php file and use a simple script tag to load the FormScript.js file?
/httpdocs/wp-content/themes/Avada/FormScript.js
/httpdocs/js/FormScript.js
http://www.domain.com/js/FormScript.js
make sure your js file is world accessible
<script type="text/javascript" src="http://www.domain.com/js/FormScript.js"></script>

Related

how to load unique script in wordpress custome plugin

i want to add unique script if script file already there its not been added
i have used following js file
jquery.min.js
slick.min.js
custome.js
but jquery.min.js have conflict with already added by wordpress and when i remove this js file than$not define error come so can i resolve this
My code is here
wp_register_script('jquery_js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js');
// wp_register_script('jquery', plugins_url('js/jquery.min.js', __FILE__),array(),null,true );
wp_enqueue_script('jquery_js');
wp_register_script('slick', plugins_url('js/slick.min.js', __FILE__), array('jquery_js'));
wp_enqueue_script('slick');
wp_register_script('custome', plugins_url('js/custome.js', __FILE__), array('jquery_js'),null,true);
wp_localize_script('custome','ajax_object',array(
"ajax_url" => admin_url("admin-ajax.php"),
"base_url" => esc_url( plugins_url( 'img', __FILE__ ) )
));
wp_enqueue_script('custome');
What you can try is first to deregister the jquery that comes with WP and then register the new one. I would also recommend you to actually download your jquery.js, instead of trying to load it through CDN. So your function would look something like:
wp_register_script(
wp_deregister_script('jquery');
wp_enqueue_script( 'jquery-3.2.1.min', get_theme_root_uri() . '/my_theme_folder/path_to_jquery/jquery-3.2.1.min.js', true);
//and so on
//and so on
);
wp_enqueue_script('custome');

how to add custom javascript in wordpress child theme

I have avada theme, and I created child theme, how to add my custom js file in child theme.
I tried using this video tutorial, but without success
https://www.youtube.com/watch?v=4xbvhXj72kU
Can you help me!
Here is best way to include custom js in child theme:
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
You can use the wp_enqueue_script() function.
documentation: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
This function allows you to load scripts at any given time.
Create a folder in child theme and upload your JS file to that folder.
You can include a js file using
wp_enqueue_script()
or you can use
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/filename.js" type="text/javascript"></script>
add the above code in theme header.php or footer.php

Javascript in Wordpress widget works only on Home page

I would like to use my widget in every pages, but that works only on home page.
I'm still in local for the moment. I'm writing my script in footer.php before the end of body like that :
<script type="text/javascript" src="wp-content/themes/twentyfourteen/js/formlist.js"></script>
I've seen that when I'm not on home page, when I inspect with developper tools, my script .js is red and not well imported. How can I make that ?
You have to correctly enqueue your Javascript in your theme, i.e. something like this:
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
There are other methods, depending on if your script uses the main jQuery library and other considerations. See Function Reference/wp enqueue script « WordPress Codex for information on all the ways to use wp_enqueue_style.
And use your Dev Tools to check for errors and correct loading.
Try calling your script like this:
<script src="<?php echo get_template_directory_uri();?>/js/formlist.js"></script>
If you are on your home page, wp-content/themes/twentyfourteen... may work just fine. But say you're on yoursite.com/about then it thinks the URL for the javascript file is yoursite.com/about/wp-content/themes/twentyfourteen...
Make sense?

foundation javascript for a wordpress theme

I am trying to create a theme from scratch using the foundation framework which it works great out of the box, but when I need to include the foundation JavaScript scripts, it shows as if they've been loaded, but nothing working, first the top bar doesn't work, I have tried to unregister the jquery which comes pre-loaded with WordPress and use the one from Google cdn as I have read that's a sure way for the top-bar and other scripts to work, but nothing so far works
here is my code in the functions.php
// Enqueue scripts essential for foundation framework to act responsive
function responsive_scripts_basic()
{
//register scripts for our theme
wp_deregister_script('jquery');
wp_register_script('foundation-mod', get_template_directory_uri() . '/javascripts/vendor/custom.modernizer.js',
true );
wp_register_script('foundation-topbar', get_template_directory_uri() . '/javascripts/foundation/foundation.topbar.js',
true );
wp_register_script('foundation-main', get_template_directory_uri() . '/javascripts/foundation/foundation.js',
true );
wp_register_script('zepto', get_template_directory_uri() . '/javascripts/vendor/zepto.js',
true );
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
true );
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'foundation-topbar' );
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'zepto');
wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic' );
I have used the same method for the stylesheets, and no problem at all, any experience on this? I thought it was going to be easy to build a theme with this framework, but it's getting rather complicated to be fair.
Well the order in which the js files are "enqueued" is very important.
First you do "enqueue" the modernizer, then jQuery/zepto, then Foundation.min.js and then the topbar extension:
//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'foundation-main' );
wp_enqueue_script( 'foundation-topbar' );
Please see the zurb Foundation Installation docs, with the order of the scripts in mind.
Also to get the foundation thing started, you need a script element most likely at the very end of your PHP produced HTML:
<script type="text/javascript">
$(document).foundation();
</script>
As wordpress is (as I know) pushing jQuery into noConflict mode, you may have to write this like
<script type="text/javascript">
jQuery(document).foundation();
</script>
EDIT: Zepto has no noConflict function, leaving $ being jQuery or whatever it was set. To keep it simple, choose jQuery and use the fully qualified jQuery(document).foundation() syntax!

How do I put jQuery code in an external file in WordPress theme?

I am relatively new to Javascript/jQuery so please bear with me.
I'm designing a custom WordPress theme and I have been using jQuery to make some changes to the main navigation menu that is generated in my header file (header.php). I have been adding code like this inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
</script>
My question is simple really. My scripts have gotten so long that I want to move them to their own file (perhaps nav-mouse-events.js) and call them from within header.php. How do I do this? Is it as simple as putting the code inbetween the second script tags into a file named nav-mouse-events.js and then adding this to the head tag?
<script src="nav-mouse-events.js"></script>
Or do I need to do something more complicated? Do I need to call jQuery from the new external file or header.php?
You would put the scripts in a .js file and use wp_enqueue_script in functions.php to include them the proper way.
From the wordpress site:
<?php
function my_scripts_method() {
wp_enqueue_script(
'custom-script',
get_template_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>
Add this line:
<script src="<?php echo get_bloginfo('template_url ');?>/nav-mouse-events.js"></script>
and save nav-mouse-events.js file with code:
$(document).ready(function(){
$('nav').mouseover(function() {
// my mousecode here...
}); // end mouseover
}); // end ready
in your template folder.

Categories