Javascript script not loading on Wordpress website

Question

So I've literally copy-pasted the code from https://codepen.io/hellokatili/pen/rVvMZb (HTML in a template, CSS in styles.css and JS using this plugin https://wordpress.org/plugins/header-and-footer-scripts/)

I added the JS script within tags.

Here is the above code from codepen (after converting from HAML to HTML and SCSS to CSS).

HTML:

  > <div class="content">   
          <script type="text/javascript"> </script>
              <div class="slider single-item">
    >     <div class="quote-container">
    >       <div class="portrait octogon">
    >         <img src="http://www.tuacahntech.com/uploads/6/1/7/9/6179841/6166205_orig.jpg"/>
    >       </div>
    >       <div class="quote">
    >         <blockquote>
    >           <p>Meditation shabby chic master cleanse banh mi Godard. Asymmetrical Wes Anderson Intelligentsia you probably haven't heard of
    > them.</p>
    >           <cite>
    >             <span>Kristi McSweeney</span>
    >             <br/>
    >             Thundercats twee
    >             <br/>
    >             Austin selvage beard
    >           </cite>
    >         </blockquote>
    >       </div>
    >     </div>
    >     <div class="quote-container">
    >       <div class="portrait octogon">
    >         <img src="http://static1.squarespace.com/static/51579fb2e4b0fc0d9469ff97/56cc83dfe707ebc39cf3269f/56d0b59e27d4bde4665fded3/1457365822199/"/>
    >       </div>
    >       <div class="quote">
    >         <blockquote>
    >           <p>Bespoke occupy cred seitan. Austin street art freegan Truffaut leggings aesthetic, salvia chia Brooklyn flexitarian.
    > Single-origin coffee before they sold out health goth, cornhole irony
    > keffiyeh Austin taxidermy mlkshk blog trust fund banh mi you probably
    > haven't heard of them.</p>
    >           <cite>
    >             <span>Dina Anderson</span>
    >             <br/>
    >             Blue Bottle keffiyeh
    >             <br/>
    >             Sartorial locavore Schlitz ennui
    >           </cite>
    >         </blockquote>
    >       </div>
    >     </div>   </div> </div> <svg>   <defs>
    >     <clipPath clipPathUnits="objectBoundingBox" id="octogon">
    >       <polygon points="0.50001 0.00000, 0.61887 0.06700, 0.75011 0.06721, 0.81942 0.18444, 0.93300 0.25001, 0.93441 0.38641, 1.00000 0.49999, 0.93300 0.61887, 0.93300 0.75002, 0.81556 0.81944, 0.74999 0.93302, 0.61357 0.93444, 0.50001 1.00000, 0.38118 0.93302, 0.24998 0.93302, 0.18056 0.81556, 0.06700 0.74899, 0.06559 0.61359, 0.00000 0.49999, 0.06700 0.38111, 0.06700 0.25001, 0.18440 0.18058, 0.25043 0.06700, 0.38641 0.06559, 0.50001 0.00000"></polygon>
    >     </clipPath>   </defs> </svg>

CSS:

html {
  height: 100%;
}
body {
  background: linear-gradient(130deg, #1abc9c, #d1f2eb);
  background-size: 400% 400%;
  -webkit-animation: gradient 16s ease infinite;
  -moz-animation: gradient 16s ease infinite;
  animation: gradient 16s ease infinite;
}
.content {
  margin: auto;
  padding: 20px;
  width: 80%;
  max-width: 1200px;
  min-width: 300px;
}
.slick-slider {
  margin: 30px auto 50px;
}
.slick-prev, .slick-next {
  color: white;
  opacity: 1;
  height: 40px;
  width: 40px;
  margin-top: -20px;
}
.slick-prev path, .slick-next path {
  fill: rgba(255, 255, 255, 0.4);
}
.slick-prev:hover path, .slick-next:hover path {
  fill: #fff;
}
.slick-prev {
  left: -35px;
}
.slick-next {
  right: -35px;
}
.slick-prev:before, .slick-next:before {
  content: none;
}
.slick-dots li button:before {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  font-size: 8px;
}
.slick-dots li.slick-active button:before {
  color: #fff;
}
.quote-container {
  min-height: 200px;
  color: #666;
  font-size: 36px;
  margin: 0 20px;
  position: relative;
}
.quote-container:hover {
  cursor: grab;
}
.quote-container .portrait {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 140px;
  width: 140px;
  overflow: hidden;
}
.quote-container .portrait img {
  display: block;
  height: auto;
  width: 100%;
}
.quote-container .quote {
  position: relative;
  z-index: 600;
  padding: 40px 0 40px 180px;
  margin: 0;
  font-size: 20px;
  font-style: italic;
  line-height: 1.4 !important;
  font-family: Calibri;
  color: white;
}
.quote-container .quote p {
  position: relative;
  margin-bottom: 20px;
}
.quote-container .quote p:first-child:before {
  content: '\201C';
  color: rgba(255, 255, 255, 0.44);
  font-size: 7.5em;
  font-weight: 700;
  opacity: 1;
  position: absolute;
  top: -0.4em;
  left: -0.2em;
  text-shadow: none;
  z-index: -10;
}
.quote-container .quote cite {
  display: block;
  font-size: 14px;
}
.quote-container .quote cite span {
  font-size: 16px;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.dragging .quote-container {
  cursor: grabbing;
}
.octogon {
  -webkit-clip-path: polygon(50% 0%, 38.11% 6.7%, 24.99% 6.72%, 18.06% 18.44%, 6.7% 25%, 6.56% 38.64%, 0% 50%, 6.7% 61.89%, 6.7% 75%, 18.44% 81.94%, 25% 93.3%, 38.64% 93.44%, 50% 100%, 61.88% 93.3%, 75% 93.3%, 81.94% 81.56%, 93.3% 74.9%, 93.44% 61.36%, 100% 50%, 93.3% 38.11%, 93.3% 25%, 81.56% 18.06%, 74.96% 6.7%, 61.36% 6.56%, 50% 0%);
  clip-path: url(#octogon);
  height: 140px;
  width: 140px;
}
@-webkit-keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}
@-moz-keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}
@keyframes gradient {
  0% {
    background-position: 5% 0%;
  }
  50% {
    background-position: 96% 100%;
  }
  100% {
    background-position: 5% 0%;
  }
}

JS:

var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
    nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';

$('.single-item').slick({
  infinite: true,
  dots: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 1000,
  cssEase: 'ease-in-out',
  prevArrow: prevButton,
  nextArrow: nextButton
});

$('.quote-container').mousedown(function(){
  $('.single-item').addClass('dragging');
});
$('.quote-container').mouseup(function(){
  $('.single-item').removeClass('dragging');
});

The HTML and CSS part work fine but the JS isn't functioning. I'm using a different JS script on the same WP site and it works just fine. Is there anything I'm missing?

Have you added jquery? This javascript file uses jquery so you need to include the jquery library (the $ stands for jquery) — Jeremy
– Jeremy, Commented Apr 4, 2018 at 8:52
@Jeremy Wordpress includes jQuery by itself. I would just make 2 checks: is your JS file correctly appended to DOM? Is your JS file appended AFTER jQuery? — Yuri
– Yuri, Commented Apr 4, 2018 at 8:57
@AjAX. I just edited my posts and added the <script> tag. (second line of HTML) — Bob Bob
– Bob Bob, Commented Apr 4, 2018 at 9:03
And what about slick? You need to check all of your dependecies. Also, be sure to run your code on domReady — Yuri
– Yuri, Commented Apr 4, 2018 at 9:13

Tristup · Accepted Answer · 2018-04-04 11:18:46Z

1

You can also try the code by writing inside jquery ready :

(function($){
  'use strict';

    var prevButton = '<button type="button" data-role="none" class="slick-prev" aria-label="prev"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" version="1.1"><path fill="#FFFFFF" d="M 16,16.46 11.415,11.875 16,7.29 14.585,5.875 l -6,6 6,6 z" /></svg></button>',
        nextButton = '<button type="button" data-role="none" class="slick-next" aria-label="next"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFFFFF" d="M8.585 16.46l4.585-4.585-4.585-4.585 1.415-1.415 6 6-6 6z"></path></svg></button>';

    $('.single-item').slick({
      infinite: true,
      dots: true,
      autoplay: true,
      autoplaySpeed: 4000,
      speed: 1000,
      cssEase: 'ease-in-out',
      prevArrow: prevButton,
      nextArrow: nextButton
    });

    $('.quote-container').mousedown(function(){
      $('.single-item').addClass('dragging');
    });
    $('.quote-container').mouseup(function(){
      $('.single-item').removeClass('dragging');
    });

})(jQuery);

Hope this will work.

answered Apr 4, 2018 at 11:18

Tristup

3,6381 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tristup Over a year ago

You also enqueue slick.css and slick.js before you enqueue this style and script.

Bob Bob Over a year ago

Thank you, I added the slick dependency and it worked perfectly!

Mohod Sandhya · Accepted Answer · 2018-04-04 09:41:24Z

0

Can you try to add this jquery script in theme's footer.php for testing purpose like:

var prevButton = '', nextButton = '';

jQuery('.single-item').slick({
  infinite: true,
  dots: true,
  autoplay: true,
  autoplaySpeed: 4000,
  speed: 1000,
  cssEase: 'ease-in-out',
  prevArrow: prevButton,
  nextArrow: nextButton
});

jQuery('.quote-container').mousedown(function(){
  jQuery('.single-item').addClass('dragging');
});
jQuery('.quote-container').mouseup(function(){
  jQuery('.single-item').removeClass('dragging');
});

And also open inspect console for check any error.

answered Apr 4, 2018 at 9:41

Mohod Sandhya

4503 silver badges11 bronze badges

1 Comment

Bob Bob Over a year ago

Turns out I didn't add the Slick dependency and that's what the problem was!

Collectives™ on Stack Overflow

Javascript script not loading on Wordpress website

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related