Redtail Redtail - 2 months ago 10
Javascript Question

wordpress custom template referencing external js

I am trying to use a custom template file in a wordpress site. The custom template seems to not be able to see the js. How do I fix this? It works fine at codepen.

http://codepen.io/redtailmedia/pen/BLzymO
This is the custom template:

<?php
/*
Template Name: customhome
*/
get_header(); ?>
<html >
<head>
<meta charset="UTF-8">
<title>GSAP SVG feDisplacementMap & feTurbulence element</title>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>

<div id="box">
<svg class="mysvg" width="538" height="190" viewBox="0 0 600 200">
<defs>
<filter id="turb">
<feTurbulence id="turbwave" type="fractalNoise" baseFrequency="0.03" numOctaves="2"
result="turbulence_3" data-filterId="3" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="40" />
</filter>
</defs>
<image id="img" x="0" y="0" width="100%" height="100%" xlink:href="http://www.redtailmediapei.com/wp-content/uploads/2016/09/redtailbanner.jpg" filter="url(#turb)" />
</svg>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js'></script>

<script src="js/customhome.js"></script>
</body>
</html>
<?php get_footer(); ?>


This is the javascript:

TweenMax.to("#turbwave", 8, {
attr:{"baseFrequency":0.01},
repeat:-1,
yoyo:true
});


And just to be thorough this is the css:

body{
overflow:hidden;
text-align:center;
background:black;
color:#FFF;
}

a{
color:#88CE02;
}

#box{
position:relative;
margin-top:40px;
}

svg #img{
position:abosolute;
left:0;
top:0;
width:538px;
height:190px;
}

Answer

You can try this code its working:

<?php
/*
  Template Name: customhome
 */
get_header();
?>
<div id="box"> 
    <svg class="mysvg" width="538" height="190" viewBox="0 0 600 200">
    <defs> 
    <filter id="turb">
        <feTurbulence id="turbwave" type="fractalNoise" baseFrequency="0.03" numOctaves="2"
                      result="turbulence_3" data-filterId="3" />
        <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="40" />
    </filter>
    </defs>
    <image id="img" x="0" y="0" width="100%" height="100%" xlink:href="http://www.redtailmediapei.com/wp-content/uploads/2016/09/redtailbanner.jpg" filter="url(#turb)" />
    </svg>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js'></script>
<script>
    TweenMax.to("#turbwave", 8, {
        attr: {"baseFrequency": 0.01},
        repeat: -1,
        yoyo: true
    });
</script> 
   <?php get_footer(); ?>

if you want to use customhome.js file then you have to use

<script src="<?php echo get_template_directory(); ?>
/js/customhome.js"></script>

js file put on js folder on theme folder.