Under the Hood with WordPress, Part 6: jQuery / JavaScript

This is our final post of a 6-part series on diving “under the hood” with WordPress. Today, we’re covering jQuery and JavaScript – a power language that can manipulate elements and – in some cases – even bring content in, even after the site has loaded.

• Intro
• HTML
• CSS – Introduction
• CSS – Examples
• PHP / MySQL
• jQuery

We’re in the home stretch with our WordPress “Under the Hood” series.  We’ve covered HTML and CSS, the design and structure of your WordPress site.  We discovered PHP, and how it uses the various settings in the MySQL database to display content and set options.  Today, we look at jQuery and JavaScript – code that can change, manipulate, and even load elements depending upon actions or needs the user may take or have.

What is JavaScript?

JavaScript is an “assembly language” – meaning that it’s used to compile and modify information – that can interact with the user or work separately from the page load to modify and enhance content.  Contrary to what people believe, JavaScript has very little relation to Java – it’s closest cousin would actually be “C”.

OK, So What’s jQuery?

jQuery is best described as a JavaScript “library”.  It’s a collection of precompiled scripts and functions that, if written in straight JavaScript, would take multiple lines to write – instead of the very few needed to write in jQuery.  jQuery is actually a focused library dedicated to manipulation of elements, animations, browser events – like clicks, and AJAX – the ability to load content from an outside source based on an event or condition being met.  jQuery is used on nearly 60% of the top 10,000 websites, and is one of the most powerful – and easy to understand – libraries out there.

jQuery Syntax

jQuery works on a “selector” model – you tell the code what to modify and hook it to a function that modifies it.

$(document).ready(function(){
    $("a.click").click(function(){
        $(this).hide();
    });
});

So… to recap:

1. jQuery checks to see if the document has fully loaded – this ensures there’s no “strangeness” when the code is run – and ensures that any selectors are actually loaded.
2. A function is hooked onto a selector – in this case, any hyperlink with the class of “click” is a target
3. This rule defines that once a link is clicked, that link is hidden.  (this) is another name for “self” – and serves as a target for both absolute and relative positioning of elements to target.

Popular jQuery Functions

There are a ton of jQuery functions, but we’re going to look at the ones that you will most likely use working with WordPress.

.addClass()

$("a.click").addClass("added");

Adds  a class to a particular element

.appendTo() / .prependTo()

$( "<p>Test</p>" ).appendTo( ".inner" );

Appends text (to the end) of the specified selectors.  Prepend, on the other hand, adds text to the front of the specified elements.

.click()

$(document).ready(function(){
    $("a.click").click(function(){
        $(this).hide();
    });
});

Runs a function when an element is clicked.

.fadeIn() / .fadeOut() / .fadeToggle()

$(document).ready(function(){
    $("a.click").click(function(){
        $(this).fadeToggle();
    });
});

When this function is activated, it will fade in (or out) the element in question.

.slideUp() / .slideDown() / .slideToggle()

$(document).ready(function(){
    $("a.click").click(function(){
        $(this).slideToggle();
    });
});

Slides an element into- or out-of hiding.  Toggles will allow the element to be triggered on alternating clicks while -Up and -Down will only allow one-direction functionality.

.wrap() / .wrapInner()

$( ".inner" ).wrapInner( "<div class='new'></div>");

Wraps the content in question with the HTML tags.  WrapInner will allow the tags to be on the INSIDE of the elements.