How to include external code/library javascript on wordpress? - javascript

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

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

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?

Running Javascript in wordpress

I'm creating a word press theme , this includes a responsive jquery menu.
However, for some reason, I can't get the menu to work. In my functions.PHP file I have included the script below. Please may someone help with advice and a code snippet, i'm trying to:
1) Call Jquery
2) Run the script slimmenu.js script
<?php
function menu_function() {
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/jquery.slimmenu.js', array( 'jquery'));
}
add_action('wp_enqueue_scripts','menu_function');
?>
Many thanks,
P
You have not enqueued jquery which is a dependancy for the script you've enqueued. Also consider naming your file something a bit more unique to avoid conflicts. try...
function menu_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'slimMenu', get_template_directory_uri() . '/js/jquery.slimmenu.js', 'jquery' );
}
add_action('wp_enqueue_scripts','menu_scripts');
Better add the script in footer.php before :
<?php
wp_footer();
wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/jquery.slimmenu.js', 'jquery', true);
?>

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.

Categories