Move js jquery to external file child theme
-
Hi. I’m new to theme development and I having a very basic problem. I’ve been searching for nearly two days and none of the solutions I’ve tried worked.
My problem has to do with hardcoded vs enqueued scripts and internal vs external scripts.
1. If I hardcode external scripts into the header my external scripts run.
2. If I enqueue the scripts, they appear to load but they won’t run as external scripts; one will run if I copy it to header.php; the other won’t run even then.
This works:
Header.php of
`<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.8.3.js”></script>
<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/menu.js” ></script>
<script type=”text/javascript” src=”<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.kwicks.js”></script><script type=’text/javascript’>
$(document).ready(function() {var $slideshow = $(‘.kwicks’).kwicks({
size: 165,
minSize : 20,
spacing : 5
});var numSlides = $slideshow.children().length,
speed = 2000,
curSlide = 0;setInterval(function() {
$slideshow.kwicks(‘expand’, ++curSlide % numSlides);
}, speed);});
</script>The external script in /js/menu.js is
function mainmenu(){
$(” #main_menu ul “).css({display: “none”}); // Opera Fix
$(” #main_menu li”).hover(function(){
$(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).show(400);
},function(){
$(this).find(‘ul:first’).css({visibility: “hidden”});
});
}function mainmenuWP(){
$(” #menu-mainmenu ul “).css({display: “none”}); // Opera Fix
$(” #menu-mainmenu li”).hover(function(){
$(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).show(400);
},function(){
$(this).find(‘ul:first’).css({visibility: “hidden”});
});
}$(document).ready(function(){
alert(“menu”);
mainmenu();
mainmenuWP();
});I get source of
<!DOCTYPE html>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” >
<title>Metric/Conside Test</title>
<link href=’http://fonts.googleapis.com/css?family=Raleway:400,800′ rel=’stylesheet’ type=’text/css’ media=”screen”>
<script type=”text/javascript” src=”http://localhost/themebuilder/wp-content/themes/conside/js/jquery-1.8.3.js”></script>
<script type=”text/javascript” src=”http://localhost/themebuilder/wp-content/themes/conside/js/menu.js” ></script>
<script type=”text/javascript” src=”http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js”></script>`If I enqueue the scripts like this in functions.php
<?php function load_my_scripts() { wp_deregister_script( 'jquery' ); wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'); wp_enqueue_script('jquery'); wp_register_script('menu', get_stylesheet_directory_uri().'/js/menu.js', array('jquery') ); wp_enqueue_script('menu'); wp_register_script('kwicks', get_stylesheet_directory_uri().'/js/jquery.kwicks.js', array('jquery') ); wp_enqueue_script('kwicks'); wp_register_script('equalheights', get_stylesheet_directory_uri().'/js/jquery.equalheights.js', array('jquery') ); wp_enqueue_script('equalheights'); } add_action('wp_enqueue_scripts', 'load_my_scripts');
I get source of `<!DOCTYPE html>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” >
<title>Metric/Conside Test</title>
<link href=’http://fonts.googleapis.com/css?family=Raleway:400,800′ rel=’stylesheet’ type=’text/css’ media=”screen”>
<!–<script type=”text/javascript” src=”http://localhost/themebuilder/wp-content/themes/conside/js/jquery-1.8.3.js”></script>
<script type=”text/javascript” src=”http://localhost/themebuilder/wp-content/themes/conside/js/menu.js” ></script>
<script type=”text/javascript” src=”http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js”></script>
–>
<meta name=’robots’ content=’noindex,nofollow’ />
<script type=”text/javascript”>
//<![CDATA[
var ajaxurl = ‘http://localhost/themebuilder/wp-admin/admin-ajax.php’;
//]]>
</script>
<link rel=”alternate” type=”application/rss+xml” title=”ThemeBuilder test site with a long name » Feed” href=”http://localhost/themebuilder/feed/” />
<link rel=”alternate” type=”application/rss+xml” title=”ThemeBuilder test site with a long name » Comments Feed” href=”http://localhost/themebuilder/comments/feed/” />
<link rel=”alternate” type=”application/rss+xml” title=”ThemeBuilder test site with a long name » Custom Homepage Comments Feed” href=”http://localhost/themebuilder/custom-homepage/feed/” />
<link rel=’stylesheet’ id=’admin-bar-css’ href=’http://localhost/themebuilder/wp-includes/css/admin-bar.css?ver=3.4.2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’debug-bar-css’ href=’http://localhost/themebuilder/wp-content/plugins/debug-bar/css/debug-bar.css?ver=20111209′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’style-css’ href=’http://localhost/themebuilder/wp-content/themes/conside/style.css?ver=3.4.2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’zt-debug-bar-cron-css’ href=’http://localhost/themebuilder/wp-content/plugins/debug-bar-cron/css/debug-bar-cron.css?ver=20120325′ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’http://localhost/themebuilder//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=3.4.2′></script>
<script type=’text/javascript’ src=’http://localhost/themebuilder/wp-content/themes/conside/js/menu.js?ver=3.4.2′></script>
<script type=’text/javascript’ src=’http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js?ver=3.4.2′></script>
<script type=’text/javascript’ src=’http://localhost/themebuilder/wp-content/themes/conside/js/jquery.equalheights.js?ver=3.4.2′></script>
<script type=’text/javascript’ src=’http://localhost/themebuilder/wp-includes/js/comment-reply.js?ver=3.4.2′></script>`But the jquery no longer works for the included script shown above or for the script in menu.js.
The two source files look the same to me in the files they load from /conside/js (the child theme is “conside”.
This mostly a learning exercise for me so complete explanations would be very helpful.
Many thanks.
- The topic ‘Move js jquery to external file child theme’ is closed to new replies.