Why Would Anyone Need To Know How To Use JQuery With WordPress
Anyone who has every worked on a pre-made theme or who is building a custom theme from scratch knows that there are some things in WordPress that are hard to get to. Whether it be plugins, widgets, or you simply can’t find where the developer put that piece of code. JQuery can help with this! Let’s give you an example. Recently while working on an e-commerce website, I stumbled upon a piece of code that for the life of me I couldn’t find. I really wanted to add the Responsive Columns classes from Twitter Bootstrap onto this specific div. So I leveraged the search and destroy power of JQuery and accomplished my goal.
Ok…great for me…now how did I do it so you can do the same thing in your themes. I promise you that the more familiar you get with this wonderful tool the more reasons you are going to find to use it!
Let’s examine a simple line of JQuery:
You may have seen this written with a $ instead of the jQuery…but in WordPress we have to use the word jQuery…with the lowercase “j” and the uppercase “Q”…because WordPress runs JQuery by default in compatibility mode where the $ won’t work. (I WILL BE POSTING A WORKAROUND FOR THIS SOON)
So we have know written the “jQuery” call…next we add open and close parenthesis () with a set of quotation marks inside like this (“”).
Inside the quotation marks within the parenthesis we need to write the ID or Class we are looking for. This would be the div that I wanted to add the Responsive Column classes to. It already had a class of “product-description”. So we would be looking for this div with this class:
Don’t forget the period before the class name. Now we have told jQuery to go out and look through all of the code and find this specific class. In a split second it looks and finds it…well know it wants to know what do I do with it. I am going to teach you two simple functions of JQuery. The first is .addClass() and the second is .removeClass(). I am sure you can tell what these functions do so I won’t go into detail but I will show you how to use them. In my example, I need to add classes…so I will write:
You will see that a semi-colon completes the line of JQuery and tells your browser that this ends this function. Let’s tell JQuery what class we want to add. Inside the parenthesis of the .addClass() we need to open a set of quotation marks and add the class names, separated by spaces, we want to add.
jQuery(".product-description").addClass("col-lg-4 col-md-4 col-sm-4 col-xs-12");
We did it! JQuery has now searched through all of the code, found the product-description class and added the four Responsive Columns classes to it. You can verify this by clicking on the product description in your browser and right clicking to select Inspect Element (IN CHROME) or Inspect Element with Firebug (IN FIREFOX).
In my WordPress theme development experience, I have found many uses for simple JQuery functions like this. I could go on and on with different examples for days. I will also say that I ALWAYS use JQuery as a last resort. It is always best practice to find a solution using HTML or CSS first. When all else fails, take advantage of the power of JQuery!