I make a site based on Wordpress and all my scripts use jQuery 2.1.4.
The problem is that when I implement jQuery in <header> section then 'scroll to top' works, but navigation (Bootstrap navwalker) does not. When I implement jQuery in functions.php then the navigation works but the 'scroll to top' doesn't!
I've tried to use another jQuery version for scroll to top with noConflict but then the nav doesn't work.
I've tried also to move all my scripts right after <body> and <?php wp_head(); ?> but it also doesn't work.
And when I implement jQuery in both <head> section and in the functions.php (just for the test), the nav doesn't function.
The code (like this the nav works and scroll to top doesn't work):
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<!-- scroll to top-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
<?php wp_head(); ?>
functions.php
<?php
/* Theme setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script( 'jquery-2.1.4.min.js', get_template_directory_uri() . '/js/jquery-2.1.4.min.js');
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function wpt_register_js() {
wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery-2.1.4.min.js');
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap.min' );
wp_enqueue_style( 'my_template', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
// Register custom navigation walker
require_once('wp_bootstrap_navwalker.php');
?>
The nav code
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'Menu 1',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
Output order of <script> tags:
<script type='text/javascript' src='.../wp-content/themes/tyszka/js/bootstrap.min.js?ver=4.2.2'></script>
<script type='text/javascript' src='.../wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
<script type='text/javascript' src='.../wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<!-- some plugin stuff here-->
<link rel="EditURI" type="application/rsd+xml" title="RSD" href=".../xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href=".../wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.2.2" />
<!-- scroll to top-->
<script>
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
</script>
</head>
Keep the code as it is!
Just make a small change. Put the
<?php wp_head(); ?>before your scroll script.Don't include any extra jQuery files. I feel this should do the trick!!
Let us know!
EDIT:
Went through your site and this is what comes to my mind. 1. Bootstrap js loads before jQuery 2. there are 2 jquery files in the code
So I am not much of an expert in Wordpress, but I dug up something, There are functions
wp_register_scriptandwp_enqueue_scriptBoth these functions have been used by you in the above code, but in those functions, there is a third parameter which accepts array and is used to pass dependencies. Link 1If you pass jquery in an array, I think your issue should be resolved! Hope this helps!!