WordPress, adding custom JS and Foundation js
Question
I am building my first WordPress theme and I am stuck on including JavaScripts on to the site.
I tried few different approaches adding it directly to the header hardcoaded and also in functions but it seams I can't get it to work.
Here is a line from functions.php
<?php
function _sf_scripts() {
wp_enqueue_script('foundation-js', get_template_directory_uri().'
/js /foundation.min.js', array( 'jquery' ), false, true);
wp_enqueue_script('foundation-init', get_template_directory_uri().'/js/foundation-orbit.js', array(), false, true);
wp_enqueue_script( 'menu-effect', get_template_directory_uri() . '/js/menu.js',
array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', '_sf_scripts' );
?>
If someone can help me out here I would really appreciate it, thanks you!
Header PHP
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name');?></title>
<meta name="description" content="<?php bloginfo('description');?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
<?php wp_head();?>
</head>
3 answers
solution1
1 ACCPTED 2013-12-13 12:01:23
You have to actually initialize foundation in a separate JS file, or with the following code:
add_action( 'wp_footer', 'so20558071_foundation_init', 9999 );
function so20558071_foundation_init()
{
echo '<script>jQuery(document).foundation();</script>';
}
solution2
0 2013-12-13 03:03:57
Try replacing:
wp_enqueue_script('foundation-js', get_template_directory_uri().'/js/foundation.min.js', array( 'jquery' ), false, true);
With:
wp_register_script('foundation-js', get_template_directory_uri()."/js/foundation.min.js", false, null);
wp_enqueue_script('foundation-js');
Do the same for the other scripts too.
And finally change
add_action( 'wp_enqueue_scripts', '_sf_scripts' );
To
add_action('init', '_sf_scripts');
solution3
0 2013-12-13 19:09:15
SOLUTION THAT WORKED FOR ME:
FUNCTIONS PHP
<?php
function _sf_scripts() {
wp_enqueue_script('foundation-js', get_template_directory_uri().'
/js/foundation.min.js', array( 'jquery' ), false, true);
wp_enqueue_script('foundation-init', get_template_directory_uri().'/js/foundation-
orbit.js', array(), false, true);
wp_enqueue_script( 'menu-effect', get_template_directory_uri() . '/js/menu.js',
array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', '_sf_scripts' );
add_action( 'wp_footer', 'so20558071_foundation_init', 9999 );
function so20558071_foundation_init()
{
echo '<script>jQuery(document).foundation();</script>';
}
?>
FOOTER PHP
<!-- Java Scripts -->
<script>
document.write('<script src= <?php bloginfo('template_url'); ?>' +
('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
'.js><\/script>')
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.