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' )
);
Related
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');
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?
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);
?>
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.
I'm having troubles including gridstack.js into my theme.
This is how my code is:
function custom_scripts() {
wp_register_script( 'gridstack.min', get_template_directory_uri() . '/js/gridstack.min.js', array( 'jquery', 'underscore', 'jquery-ui-core' ), '201412028' );
wp_enqueue_script( 'gridstack.min' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
And the output is:
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/underscore.min.js?ver=1.6.0'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-includes/js/jquery/ui/core.min.js?ver=1.11.2'></script>
<script type='text/javascript' src='http://localhost/~user/wordpress/wp-content/themes/manfredinator/js/gridstack.min.js?ver=201412028'></script>
But Firebug still gives me "TypeError: $ is undefined".
I have a solution for this but i don't like it:
function custom_scripts() {
wp_register_script( 'jQuery.min', get_template_directory_uri() . '/js/jquery-1.10.2.min.js', array(), '1.10.2' );
wp_enqueue_script( 'jQuery.min' );
wp_register_script( 'gridstack.min', get_template_directory_uri() . '/js/gridstack.min.js', array( 'underscore', 'jquery-ui-core' ), '201412028' );
wp_enqueue_script( 'gridstack.min' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );
So my question is: why does the jQuery library included in WP not work for plugins (I have also tried another plugin that uses jQuery.min and I had the same problem) and what is the best way of solving this problem.
This is because the version of jQuery included with WordPress is in noConflict mode. This means the $ shortcut is not available, but jQuery still is.
If it is in your code, you can simple wrapp all of you code in an Immediately-Invoked Function Expression (IIFE) like below:
(function($) {
//Your code here.
})(jQuery);
Or, if you are wrapping everything in a document ready handler, use this.
jQuery(function($) {
//Your code here.
});
If it's a problem with a jQuery plugin you are trying to use, you will need to patch the plugin code. Also, consider contacting the plugin author to fix their code. Plugins should not depend on the $ shortcut being defined.