Включване на jQuery

До тук стигнахме до зареждане на стиловете и скриптовете в WordPress, убедихме се с инспектора на браузъра, че файловете са заредени. Ако се вгледаме обаче внимателно ще видим, че скриптът на lavalamp не работи - в менюто няма червена подложка на никой от елементите. Причината за това е, че в WordPress (и в Drupal) среда не можем да използваме jQuery по познатият ни начин:

$(document).ready(function(){
  $('.lavaLamp').lavalamp({
      fx: "backout",
      speed: 700,
      easing: 'easeOutBack',
      click: function(event, menuItem) {
          return true;
      }
  });
  
})

Това решение работи в HTML темплейта, но не и в WordPress. Можем да се уверим това отново в инспектора на елементи. Ако отидем в таб Console на инспектора ще видим следната грешка:

jquery error

За да се справим с това трябва да дефинираме jQuery така:

jQuery(function($){
  
}); 

и съответно да попълним тялото както беше по-горе. Ще се получи следното:

jQuery(function($){
  $('.lavaLamp').lavalamp({
      fx: "backout",
      speed: 700,
      easing: 'easeOutBack',
      click: function(event, menuItem) {
          return true;
      }
  });
}); 

Поглеждайки отново в инспектора можем да се убедим, че конзолата вече не дава грешка, а lavalamp започва да работи нормално в менюто.