We Keep Coding

How to include external code/library javascript on wordpress?

I want to use a external JS library on wordpress, how I should add it to my wordpress libraries. The library is viewerjs.

Taken from the documentation:
https://developer.wordpress.org/themes/basics/including-css-javascript/
Enqueue the script or style using wp_enqueue_script() or
wp_enqueue_style()
Example:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

Use enqueue styles code
<?php
function add_theme_codes() {
wp_enqueue_style( ‘style’, ‘your external file url goes here’, ‘all’);
}
add_action( ‘wp_enqueue_scripts’, ‘add_theme_codes’ );
?>
make sure that you have included wp_head tag in head tag

Wordpress script not loading

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>

jQuery is not defined in Wordpress, but my script is enqueued properly

I am trying to load a separate javascript file mobile-menu.js to my Wordpress theme. When I look at the console, it says, "jQuery is not defined." However, I know that I enqueued my script files correctly. Any ideas?
HTML file:
<!--this line wasn't here originally-->
<div id="switchmenu"><!--switchmenu begin-->
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</div><!--switchmenu end-->
functions.php file:
function lapetitefrog_scripts() {
wp_enqueue_style( 'lapetitefrog-style', get_stylesheet_uri() );
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'lapetitefrog_scripts' );
mobile-menu.js file:
jQuery(document).ready(function($) {
$('#menu-icon').click(function() {
$('#switchmenu').slideToggle("fast");
});
});

Add wp_enqueue_script('jquery'); before you enqueue your scripts.

First Make sure that jquery file is include in the header, and your file requied jQuery
wp_enqueue_script(
'lapetitefrog-mobile-menu',
get_template_directory_uri() . '/js/mobile-menu.js',
array('jquery'),
'1.0',
true
);
Second you should start your javascript file like:
(function($) {
$(document).ready(function() {
.......
});
})(jQuery);
OR
// Use jQuery in place of $
jQuery(document).ready(function() {
.....
});

You can try:
enqueue Jquery first.
wp_enqueue_script('jquery');
and then enqueuing the latter script with JQuery dependency in 3rd argument i.e array('jquery') that's what mostly people forget.
wp_enqueue_script( 'lapetitefrog-mobile-menu', get_template_directory_uri() . '/js/mobile-menu.js', array('jquery'), '1.0', true );

Wordpress ships with jQuery by default
// Adds jQuery
add_action('init', 'childoftwentyeleven_down');
function childoftwentyeleven_down() {
// register your script location, dependencies and version
wp_register_script('down',
get_stylesheet_directory_uri() . '/js/down.js',
array('jquery') );
// enqueue the script
wp_enqueue_script('down');
}

The error jQuery is not defined might also appear with jQuery code embedded in your template parts.
This happens when jQuery is added to the footer of the page, while the embedded script tries to execute in the middle of the page.
If this is the case, you need to load jQuery in the header with wp_enqueue_script().
So the last parameter needs to be false here:
wp_enqueue_script( 'my-jquery', get_template_directory_uri() . '/js/jquery.js', array(), time(), false );
Now the code executes in the right order and jQuery will be defined.
Another solution would be to move the embedded script to a Javascript file that will also be added with wp_enqueue_script() to the footer of the page. This is up to you.

how to add jquery to wordpress plugin

This could be a very easy question to wordpress expert. I am a newbie in wordpress and I am having problem using jquery on it. The jquery library is already included because you can see it firebug
I dont know what I am missing here.
This is my code..
add_action( 'wp_enqueue_scripts', array( $this, 'jsscript' ) );
function jsscript() {
?>
<script type="text/javascript">
$(document).ready(function(){
alert('here!');
});
</script>
<?php
}
The jsscript is already on the firebug but it doesn't work. I am getting this error message in firebug.
ReferenceError: $ is not defined
$(document).ready(function(){
I read somewhere that it is not a good idea to include another jquery library and it make sense not to load it again.
I hope somebody can help me.
Thanks in advance.

Instead of just randomly outputting your script you should add it in an external file in your plugin directory, and then include that file with jQuery as a dependency
wp_enqueue_script(
'jsscript',
plugin_dir_path( __FILE__ ) . '/jsscript.js',
array( 'jquery' )
);
The issue you're having now, is that there's no guarantee that the script is outputted after jQuery, in fact there's now guarantee that the script tag you're outputting between the PHP tags is inserted where it's supposed to go at all.

To avoid conflict between other js libraries global $ is not present in wordpress instead use jQuery
Read this for more info
for eg:
jQuery(document).ready(function () {
alert('here!');
});

Put this code your functions.php file
function yourfunction_name() {
global $wp_scripts;
wp_register_script('jqury_lib', "//code.jquery.com/jquery-1.11.2.min.js", array(), null);
}
add_action( 'wp_enqueue_scripts', 'yourfunction_name' );

For theme:
wp_enqueue_script(
'custom-script',
get_stylesheet_directory_uri() . '/js/custom_script.js',
array( 'jquery' )
);
For plugin:
wp_enqueue_script(
'newscript',
plugins_url( '/js/newscript.js' , __FILE__ ),
array( 'scriptaculous' )
);

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!