{"id":157269,"date":"2016-08-04T14:00:19","date_gmt":"2016-08-04T14:00:19","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=157269"},"modified":"2016-10-05T06:01:39","modified_gmt":"2016-10-05T06:01:39","slug":"getting-started-jquery","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/getting-started-jquery\/","title":{"rendered":"JavaScript for WordPress Developers: Getting Started With jQuery"},"content":{"rendered":"<p>jQuery is a popular open source JavaScript library that enables you to make websites interactive and create animations.<\/p>\n<p>It was designed to simplify the client-side scripting of HTML and is widely used, with installation on 65% of the top 10 million highest-trafficked sites on the web.<\/p>\n<p>This is the third post in our five-part series focusing on JavaScript for WordPress developers. Throughout this series, you\u2019ll learn the basics but I\u2019ll presume you already have a working knowledge of HTML and CSS. If you need help with these building blocks, take a look at our series about <a href=\"https:\/\/wpmudev.com\/blog\/wordpress-development-beginners-getting-started\/\" target=\"_blank\">WordPress Development for Beginners<\/a>.<\/p>\n<p>In the previous two tutorials, we looked at the <a>basics of Javascript, including<\/a>\u00a0syntax, variables and functions, as well as\u00a0<a>Javascript objects<\/a>. These tutorials should have prepared you for using jQuery, which we&#8217;ll use to add awesome functionality to our WordPress site.<\/p>\n<p><strong>Missed a tutorial in our JavaScript for WordPress Developers series? You can catch up on all five posts here:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/javascript-wordpress-basics\/\" target=\"_blank\">JavaScript for WordPress Developers: Learning the Basics<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/javascript-wordpress-objects\/\" target=\"_blank\">JavaScript for WordPress Developers: Getting Started With Objects<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/getting-started-jquery\/\" target=\"_blank\">JavaScript for WordPress Developers: Getting Started With jQuery<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/loading-javascript-wordpress\/\" target=\"_blank\">JavaScript for WordPress Developers: Loading JavaScript in WordPress<\/a><\/li>\n<li><a href=\"https:\/\/wpmudev.com\/blog\/javascript-ajax\/\" target=\"_blank\">Javascript For WordPress Developers: Using AJAX<\/a><\/li>\n<\/ul>\n<h3>Getting Started<\/h3>\n<p>Before we begin, let&#8217;s make sure we&#8217;re all starting from the same place. The one prerequisite for this tutorial is access to a WordPress website with the ability to edit files. I don&#8217;t recommend experimenting on a live site, so please use a test installation or a local copy.<\/p>\n<p>We have a couple of articles to help you set up a WordPress installation locally, this will make testing a lot faster since you won&#8217;t be reliant on your internet connection. If you&#8217;re a Windows user take a look at\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/setting-up-xampp\/\" target=\"_blank\">How to Install XAMPP and WordPress Locally on PC\/Windows<\/a>. If you&#8217;re on Linux or OSX head over to our articles\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/develop-wordpress-locally-mamp\/\" target=\"_blank\">How to Develop WordPress Locally with MAMP<\/a> article. I personally prefer <a href=\"https:\/\/wpmudev.com\/blog\/vagrant-wordpress-test-environment\/\" target=\"_blank\">Vagrant<\/a>, which can be used on either system but any of them will be fine for our purposes here.<\/p>\n<h4>Creating a Child Theme<\/h4>\n<p>Let&#8217;s use the default WordPress theme,\u00a0<a href=\"https:\/\/wordpress.org\/themes\/twentysixteen\/\" target=\"_blank\">Twenty Sixteen<\/a>, for testing. Modifying the code of an existing theme is bad practice so we&#8217;ll create a child theme. Child themes inherit all their functionality from parent themes, except where specified.<\/p>\n<p>Create a new directory in your themes folder named <code>jquery-test-theme<\/code>. Create three files within: <code>style.css<\/code>, <code>scripts.js<\/code> and <code>functions.php<\/code>. Add the following to the stylesheet and save it:<\/p>\n<div class=\"gist\" data-gist=\"39e4a8a38d31be496c32b2b0644a16ab\" data-gist-file=\"style.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/39e4a8a38d31be496c32b2b0644a16ab.js?file=style.css\">Loading gist 39e4a8a38d31be496c32b2b0644a16ab<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Add the following to the <code>functions.php<\/code> and save it:<\/p>\n<div class=\"gist\" data-gist=\"dc8d4cf9aa3c7f334cb6a360fac7bab7\" data-gist-file=\"functions.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/dc8d4cf9aa3c7f334cb6a360fac7bab7.js?file=functions.php\">Loading gist dc8d4cf9aa3c7f334cb6a360fac7bab7<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Don&#8217;t worry if you don&#8217;t understand what&#8217;s going on here, we&#8217;re just setting up our test environment, focus on the upcoming Javascript code for now. Once you&#8217;ve put that code into place you should see your child theme in the appearance section.<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1364x1364 size-1364x1364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/child-theme.png\" alt=\"Our child theme in the Appearance section.\" width=\"1364\" height=\"421\" \/><figcaption class=\"wp-caption-text\">Our child theme in the Appearance section.<\/figcaption><\/figure>\n<h4>jQuery Without WordPress<\/h4>\n<p>WordPress loads jQuery for you but if you&#8217;re not working in WordPress you&#8217;ll need to include it yourself before any jQuery code you write. Head over to the <a href=\"http:\/\/jquery.com\/\" target=\"_blank\">jQuery website<\/a> to grab a copy.<\/p>\n<h3>jQuery Basics<\/h3>\n<p>jQuery is a Javascript framework used primarily for DOM traversal and manipulation (finding things on page and modifying them), handling events (modifying what item do on click, hover, etc.) and AJAX (asynchronous loading of data).<\/p>\n<p>In this tutorial, we&#8217;ll be focusing on the first two. Let&#8217;s start with DOM traversal and manipulation.<\/p>\n<p><em>Note: Usually jQuery allows you to use the <code>$<\/code> function. To make sure conflicts don&#8217;t happen WordPress uses safe mode which means you need to use <code>jQuery<\/code> instead of the dollar sign. There are ways around this which we&#8217;ll discuss later<\/em><\/p>\n<h4>Finding Elements With jQuery Selectors<\/h4>\n<p>Adding a selector within a <code>jQuery()<\/code> function will grab all instances of that element. We can use it to grab the theme&#8217;s header and recolor it. Write the following code in your <code>scripts.js<\/code> file.<\/p>\n<div class=\"gist\" data-gist=\"93e9b5837f3e42681307d3667ea1dbe3\" data-gist-file=\"selector.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/93e9b5837f3e42681307d3667ea1dbe3.js?file=selector.js\">Loading gist 93e9b5837f3e42681307d3667ea1dbe3<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>This should result in something similar to the rather ugly display below.<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/modified-element-1.png\" alt=\"Modified element with jQuery\" width=\"670\" height=\"529\" \/><figcaption class=\"wp-caption-text\">Modified element with jQuery<\/figcaption><\/figure>\n<p>If you use a selector which matches multiple elements they will all be grabbed by jQuery so you can modify them all in one go.<\/p>\n<div class=\"gist\" data-gist=\"341e6a7f1623fb003f379e189d03ec7c\" data-gist-file=\"multiple-elements.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/341e6a7f1623fb003f379e189d03ec7c.js?file=multiple-elements.js\">Loading gist 341e6a7f1623fb003f379e189d03ec7c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/modified-widget-title.png\" alt=\"Modified widget titles\" width=\"670\" height=\"419\" \/><figcaption class=\"wp-caption-text\">Modified widget titles<\/figcaption><\/figure>\n<p>A number of selectors can be used to fine-tune the elements you want to select. For example, you can use <code>:eq()<\/code> to select an element with the given index from a section. Let&#8217;s only make the first widget&#8217;s title red.<\/p>\n<div class=\"gist\" data-gist=\"59d434689d40a9b90f50bd97f1f69b24\" data-gist-file=\"eq.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/59d434689d40a9b90f50bd97f1f69b24.js?file=eq.js\">Loading gist 59d434689d40a9b90f50bd97f1f69b24<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The <code>:gt()<\/code> selector selects elements with an index greater than the one given. Let&#8217;s recolor all widget titles after the third:<\/p>\n<div class=\"gist\" data-gist=\"42ad66f9ad28969ec01df03cb15b51c5\" data-gist-file=\"gt.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/42ad66f9ad28969ec01df03cb15b51c5.js?file=gt.js\">Loading gist 42ad66f9ad28969ec01df03cb15b51c5<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Indexes always start at 0 so 2 is actually the third element. Since we&#8217;re recoloring everything after the third element the first element to be recolored will actually be the fourth.<\/p>\n<p>The <code>:not()<\/code> selector removes an item from a selection. We can utilize it to recolor all titles except ones in category widgets.<\/p>\n<div class=\"gist\" data-gist=\"be70314f2db062d4f646779b9daa6e98\" data-gist-file=\"not.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/be70314f2db062d4f646779b9daa6e98.js?file=not.js\">Loading gist be70314f2db062d4f646779b9daa6e98<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/not-selector.png\" alt=\"Using the not selector\" width=\"670\" height=\"523\" \/><figcaption class=\"wp-caption-text\">Using the not selector<\/figcaption><\/figure>\n<p>Take a look at the <a href=\"https:\/\/api.jquery.com\/category\/selectors\/\" target=\"_blank\">full list of selectors<\/a> on the jQuery documentation page.<\/p>\n<h4>Traversing the DOM<\/h4>\n<p>jQuery offers a bunch of functions that allow you to traverse the DOM. You start out from a selected DOM node and then use traversal functions to arrive at your final destination.<\/p>\n<p>Let&#8217;s use some of these functions to recolor the widget titles using a different method.<\/p>\n<div class=\"gist\" data-gist=\"6b4087645bdc1d920539e0e73ec56f5f\" data-gist-file=\"traversal.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/6b4087645bdc1d920539e0e73ec56f5f.js?file=traversal.js\">Loading gist 6b4087645bdc1d920539e0e73ec56f5f<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Initially, we select <code>aside<\/code>, which is the sidebar&#8217;s container. We then use the <code>children()<\/code> function to grab all direct children of the node. In our case, these are section elements that contain the widgets. Finally, we use <code>find()<\/code> to find elements with the given selector \u2013 h2 \u2013 and we recolor those.<\/p>\n<p>Beware of how you select! Since we&#8217;re selecting all <code>h2<\/code> elements within the widget we might recolor titles that are contained within, not the widget title.<\/p>\n<p>The <code>has()<\/code> function can check for the existence of a selector within an element. We could use it to recolor the background of widgets that have a widget title. This would exclude the search widget, which has no title.<\/p>\n<div class=\"gist\" data-gist=\"cb047bd04059a8a71a5bd401f049d3d7\" data-gist-file=\"has.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/cb047bd04059a8a71a5bd401f049d3d7.js?file=has.js\">Loading gist cb047bd04059a8a71a5bd401f049d3d7<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>There are a number of useful <a href=\"https:\/\/api.jquery.com\/category\/traversing\/\" target=\"_blank\">traversal functions<\/a> you can use to pinpoint elements exactly.<\/p>\n<h4>Modifying Content<\/h4>\n<p>You can also remove, add or modify content on the page by using a few jQuery functions. The most basic way to add content is to select and element and use <code>html()<\/code> or <code>text()<\/code> to inject content into it.<\/p>\n<div class=\"gist\" data-gist=\"5d1e4601d513e6b753e84e33e5223d51\" data-gist-file=\"html-and-text.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/5d1e4601d513e6b753e84e33e5223d51.js?file=html-and-text.js\">Loading gist 5d1e4601d513e6b753e84e33e5223d51<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The <code>html()<\/code> treats the string you enter as HTML, Tags will be converted to the proper elements. <code>text<\/code> treats the string as text, tags will not be converted but output as-is.<\/p>\n<p>The <code>append()<\/code> and <code>prepend()<\/code> function can add content before and after the content contained within the selected element.<\/p>\n<div class=\"gist\" data-gist=\"cbd5300e14528d8fc5242044e104e35d\" data-gist-file=\"append.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/cbd5300e14528d8fc5242044e104e35d.js?file=append.js\">Loading gist cbd5300e14528d8fc5242044e104e35d<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/append-jQuery.png\" alt=\"Appending text to the site description\" width=\"670\" height=\"332\" \/><figcaption class=\"wp-caption-text\">Appending text to the site description<\/figcaption><\/figure>\n<h4>Modifying Properties and Styling Elements<\/h4>\n<p>You&#8217;ve already seen a bit of styling \u2013 I&#8217;ve used the <code>css()<\/code> function in most of the code samples above. The function takes an object you can use to apply multiple CSS properties and values. Here&#8217;s an example that modifies post titles:<\/p>\n<div class=\"gist\" data-gist=\"df77dcb5aef92b7a24a8100e01c2c502\" data-gist-file=\"css.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/df77dcb5aef92b7a24a8100e01c2c502.js?file=css.js\">Loading gist df77dcb5aef92b7a24a8100e01c2c502<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/jquery-styling.png\" alt=\"Styling with jQuery\" width=\"670\" height=\"360\" \/><figcaption class=\"wp-caption-text\">Styling with jQuery<\/figcaption><\/figure>\n<p>Note that CSS properties with dashes get converted to camel case so you should use <code>marginBottom<\/code>, <code>borderRadius<\/code> and so on. Camel casing is quite popular in JavaScript so you should start getting used to it now!<\/p>\n<p>Awesome as that might look, it&#8217;s not really jQuery&#8217;s job to make things look nice \u2013 that falls under CSS&#8217;s purvey. If you really must add styles with jQuery, I recommend modifying class names instead and using your stylesheet to implement styles.<\/p>\n<div class=\"gist\" data-gist=\"368bb54cad1c024c6a6bce110874426f\" data-gist-file=\"addClass.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/368bb54cad1c024c6a6bce110874426f.js?file=addClass.js\">Loading gist 368bb54cad1c024c6a6bce110874426f<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The <code>addClass()<\/code> function adds the given class so we can then add the styles to our stylesheet instead. You can use <code>removeClass()<\/code> to remove a class or <code>toggleClass()<\/code> to toggle it.<\/p>\n<p>To modify HTML attributes you&#8217;ll need the <code>attr()<\/code> function. If used with one parameter it gets the attribute, if you used with two it sets the given attribute to the given value.<\/p>\n<div class=\"gist\" data-gist=\"b09bab0a88f1b624b314c74bf0f1ca61\" data-gist-file=\"attr.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/b09bab0a88f1b624b314c74bf0f1ca61.js?file=attr.js\">Loading gist b09bab0a88f1b624b314c74bf0f1ca61<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The first line returns the id of the given element. The second line modifies the ID to the one given.<\/p>\n<p>With the Javascript now becoming more widespread data attributes have become more prevalent. These are used for adding our custom data to HTML elements. If I wanted to delete a post using jQuery I would need a way to read its ID from the HTML element.<\/p>\n<p>Currently, this is possible, but I would need to look at the <code>id<\/code>, remove the string &#8220;post-&#8221; and use the remainder as a numeric ID.<\/p>\n<p>Information like this is often stored in a data attribute, it looks something like this: <code>&lt;div class='post' id='post-8' data-id='8'&gt;&lt;\/post&gt;<\/code>.<\/p>\n<p>You can use <code>attr( 'data-id' )<\/code> to retrieve this value but jQuery has a shortcut: the <code>data()<\/code> function. It works the same way as <code>attr()<\/code>. If you give it a parameter like <code>id<\/code> it will get the value from <code>data-id<\/code>.<\/p>\n<h3>Events in jQuery<\/h3>\n<p>Events allow you to respond to certain user actions. You could create a drop-down menu that opens on hover, implement a popup when the user reaches the bottom of the screen, and so on.<\/p>\n<p>W3Schools has a list of <a href=\"http:\/\/www.w3schools.com\/jquery\/jquery_events.asp\" target=\"_blank\">commonly used jQuery events<\/a>. We&#8217;ll take a look at how to implement one here.<\/p>\n<div class=\"gist\" data-gist=\"be89968bbcdc2f93a493cf66912b8f9c\" data-gist-file=\"event.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/be89968bbcdc2f93a493cf66912b8f9c.js?file=event.js\">Loading gist be89968bbcdc2f93a493cf66912b8f9c<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The result of this function is an easter egg on your site. If the user double-clicks the masthead the text of the site description will change.<\/p>\n<p>There are a few ways to attach events to elements. I favor this method because it will work even if the element is added after page load \u2013 this will be an issue when we look at AJAX in the next article.<\/p>\n<p>The <code>on()<\/code> function takes three arguments. The first one is the event to listen for, the second is the element to attach it to, the third is an anonymous function that performs a given action.<\/p>\n<h3>Toggling Widgets With jQuery<\/h3>\n<p>Let&#8217;s use what we&#8217;ve learned to create a simple widget toggle functionality without touching any code in theme files. We&#8217;ll prepend an element to the widget, which will toggle the widget contents on-click. We only need four lines of code!<\/p>\n<div class=\"gist\" data-gist=\"12e8e701ac10bfbd1fb155cd406843c1\" data-gist-file=\"toggle.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/12e8e701ac10bfbd1fb155cd406843c1.js?file=toggle.js\">Loading gist 12e8e701ac10bfbd1fb155cd406843c1<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>The first line prepends a <code>span<\/code> element with the class <code>toggle-widget<\/code> to each widget. A click event is attached to this element. Within the anonymous function we use <code>jQuery(this)<\/code> which refers to the actual element clicked.<\/p>\n<p>This is different for each widget since each toggle span is a separate element. We find the element&#8217;s parent by traversing the DOM and then find all elements within the widget that are not the title or the toggle button and use the <code>toggle()<\/code> function to toggle them. That&#8217;s it!<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735 size-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/07\/toggled-widgets.png\" alt=\"Toggling widgets using jQuery\" width=\"670\" height=\"424\" \/><figcaption class=\"wp-caption-text\">Toggling widgets using jQuery<\/figcaption><\/figure>\n<h3>Practice, Practice, Practice!<\/h3>\n<p>At this point you know a lot of things about jQuery. You could create functionality, which would take the user to the article when any part of the excerpt is clicked, you could create selectable skins for your website and a lot more. I recommend practicing as much as possible .<\/p>\n<p>In the next tutorial, we&#8217;ll take a look at how we can use jQuery and jQuery plugins in WordPress themes and plugins.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>jQuery is a popular open source JavaScript library that enables you to make websites interactive and create animations. It was designed to simplify the client-side scripting of HTML and is widely used, with installation on 65% of the top 10 million highest-trafficked sites on the web. This is the third post in our five-part series [&hellip;]<\/p>\n","protected":false},"author":344049,"featured_media":157784,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[557],"tags":[9770,505,679],"tutorials_categories":[],"class_list":["post-157269","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-development-2","tag-javascript","tag-jquery"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/157269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/344049"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=157269"}],"version-history":[{"count":17,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/157269\/revisions"}],"predecessor-version":[{"id":209278,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/157269\/revisions\/209278"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/157784"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=157269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=157269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=157269"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=157269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}