Tried many different techniques to get jquery working in my custom wordpress theme but still haven't got anywhere.
I've included two different methods that I've tried below near the end of the code, with one commented out here.
Can anyone see why this code might not be working?
PHP:
<?php
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
function enqueue_stylesheets() {
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}
/*function wp_enqeue_scripts() {
wp_register_script('navbarScroll', home_url() . '/js/navbarScroll.js', array( 'jquery' ));
wp_enqueue_script('navbarScroll');
//wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
}*/
function navbar_script() {
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ) );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action('wp_enqueue_scripts', 'enqueue_stylesheets', 'enqueue_scripts', 'navbar_script');
My Test JS (I've used both $ and jquery):
jquery(document).ready(function() {
jquery('#jQueryTest').html('jQuery is Working');
jQuery('nav').hover(function() {
$(this).css('display', 'none');
})
/*var a = $('nav').offset().top;
$(document).scroll(function() {
if ($(this).scrollTop() > a)
{
$(this).removeClass('nav');
$(this).addClass('nav-scrolled');
} else {
$(this).removeClass('nav-scrolled');
}
});*/
});
Well it seems that you have too many parameters in your add_action
function.
The add_action
should have only 4 arguments as follows:
add_action( string $tag, callable $function_to_add, int $priority = 10, int $accepted_args = 1 )
See WordPress documentation for more information.
That's what should be working just fine:
function enqueueScript() {
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
wp_register_script('navbarScroll', get_stylesheet_directory_uri() . '/js/navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script('navbarScroll');
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action( 'wp_enqueue_scripts', 'enqueueScript' );
Note that it is not necessary to enqueue style and script separately. One method can do both by using wp_enqueue_scripts
.
If you really want to separate your style and script in different function, you should call add_action
this way:
add_action('wp_enqueue_scripts','wp_enqueue_scripts');
add_action( 'wp_enqueue_scripts','enqueue_stylesheets');
add_action( 'wp_enqueue_scripts','enqueue_scripts');
add_action( 'wp_enqueue_scripts','navbar_script');
If you want to load jQuery, add it to your function:
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);
Its easy if you can have a code like this to solve correctly and without confusiong. You have forgotten to pass add_action for your scripts.
function wpb_custom_new_menu() {
register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );
function enqueue_stylesheets() {
//For registering Styles
wp_enqueue_style('style', get_stylesheet_directory_uri() . '/css/style.css');
wp_enqueue_style('fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,600,700|Raleway:400,500,600,700');
wp_enqueue_style( 'fontAwesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
//For registering Scripts files
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true );
wp_register_script('navbarScroll', get_stylesheet_directory_uri() . '/js/navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script('navbarScroll');
wp_register_script( 'jquery.navbarScroll', get_template_directory_uri() . '/js/jquery.navbarScroll.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'jquery.navbarScroll' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_stylesheets' );
Hope this works for you.
THanks