I want to make my first theme in Wordpress step-by-step but I have problem to insert a script into it.
function loadingScripts(){
wp_register_script( 'awqnimate',
get_template_directory_uri() . '/js/bootstrap.bundle.min.js',
array('jquery'),
'1.1',
'false');
wp_enqueue_script('awqnimate');
}
add_action('wp_enqueue_scripts', 'loadingScripts');
I put this in function.php and in index.php I have <?php get_header(); ?> and <?php footer(); ?> as well and it work perfect. But when I go to my page and check the roots I do not see this scripts at all. Please give me feedback. I read all and cannot see my mistake.
update
I change fill name and something move forwards but...
function loadingScripts(){
wp_register_script( 'awqnimate',
get_template_directory_uri() . '/js/bootstrap.bundle.min.js',
array('jquery'),
'1.1',
'false');
wp_enqueue_script('awqnimate');
}
add_action('wp_enqueue_scripts', 'loadingScripts');
still do not work at all and this work but have some kind of errors Can't find variable: jQuery
wp_register_script
('normwalize', get_template_directory_uri() . '/js/jquery-3.0.0.min.js',
'1.1',
'true');
wp_enqueue_script('normwalize'); ```
File name should be functions.php
you have to change your add_action
add_action('wp_enqueue_scripts', 'awqnimate');
Related
I am trying to include a jquery library in my code and I did this:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js"></script>
This works perfectly fine and I got what I needed but then I try to enqueue wordpress's preloaded jquery library like this:
function my_switchbutton_function(){
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-effects-core');
}
add_action('admin_enqueue_scripts', 'my_switchbutton_function');
But this is not working I don't know why...I need to enqueue style too ?
versioning is same 1.11.4 in both cdn and preloaded js.
Is there any other script too that I need to enqueue ?
You need to define js filepath in the function
Example:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() .
'/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Replace get_template_directory_uri with get_stylesheet_directory_uri if you are using child theme and your file path is in child theme
Try this
add_action('wp_enqueue_scripts', 'myjs'); // add at front side
add_action('admin_enqueue_scripts', 'myjs'); // to add at admin side
function myjs() {
wp_enqueue_script('google-maps', '//ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.js', array(), '3', true);
}
I hope this will help to solve your Question
<?php
function twentyseventeen_child_enqueue_scripts() {
wp_enqueue_script( 'jquery-js', get_stylesheet_directory_uri() . '/assets/css/jquery.min.js');
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_scripts');
?>
I'm using the AnimatedModal JS library to allow users to login on my Wordpress site.
In my functions.php I have enqueued as follows:
function smallium__enqueue_scripts() {
//lets put in the animated modal
wp_enqueue_script( 'medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array( 'jquery') );
wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css');
wp_enqueue_script( 'medium-js', get_template_directory_uri() . '/js/medium-front.js', array( 'jquery','medium-modal' ) );
}
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts');
In the medium-front.js I call the animatedModal() function.
jQuery(document).ready(function($) {
jQuery("#login-anchor").animatedModal();
}
This works fine on most pages except for Custom Wordpress templates I get the error
Uncaught TypeError: jQuery(...).animatedModal is not a function
In the source code on all pages, the library is correctly encoded before I make the function call, so I'm not sure why only on custom templates this doesn't work.
I've also created an empty template file with only the header and footer included, to see if any code could cause the error, to no avail.
<?php
/* Template name: Write */
get_header(); ?>
<?php get_footer(); ?>
Your local animatedModal.min.js should be loaded before </body> instead of in the <head>, as documented here:
function smallium__enqueue_scripts() {
//lets put in the animated modal
wp_enqueue_style('animated-modal', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css');
wp_enqueue_script( 'medium-js', get_template_directory_uri() . '/js/medium-front.js', array( 'jquery','medium-modal' ) );
wp_enqueue_script( 'medium-modal', get_template_directory_uri() . '/js/animatedModal.min.js', array( 'jquery'),false, true );
}
add_action('wp_enqueue_scripts', 'smallium__enqueue_scripts');
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 am trying to add javascript files with wp_enqueue_script. The scripts do not seem to load at all in the page. What I have is::
function uberpasscode_scripts() {
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . "/assets/js/bootstrap.min", array('jquery'));
wp_enqueue_script( 'jquery', get_template_directory_uri() . "/assets/js/jquery-1.11.1.min" );
}
add_action( 'wp_enqueue_scripts', 'uberpasscode_scripts' );
This is because you are missing the javascript (js) extension after .min.
function uberpasscode_scripts() {
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . "/assets/js/bootstrap.min.js", array('jquery'),'', true );
wp_enqueue_script('jquery');
}
add_action( 'wp_enqueue_scripts', 'uberpasscode_scripts' );
Try adding those two parameters. Also, that version of jQuery you are trying to load is too old for bootstrap. Just use the jQuery built into WordPress. Also, make sure that you are putting this into functions.php
If this is still not working, please make sure you have the <?php wp_footer(); ?> function in your footer.php file.
<?php wp_footer(); ?>
</body>
</html>