Tag Archives: jQuery

How to fade an element with CSS and jQuery

You can hide and show DOM elements in CSS as well as jQuery. But you can also combine the effects and create very elegant presentations with ease.

Let’s consider my own ID named #myown. Once styled to look ravishing, I’ll set it to disappear via this bit of CSS:

My element won’t show up when the page loads – but I can make it fade in like in the movies with this bit of jQuery:

Here I’ll grab a reference to #myown and then use .fadeIn to make my element visible.

We can chain other methods in the same call too. In this example I’ll do the same thing, but wait for one second until the fade in begins:

How to combine DOM elements in jQuery

Sometimes you want to add your own DOM element to an existing class or ID. For example, maybe you’d like to insert something like a header advert into an existing theme without having to hack core files. jQuery makes this possible.

You can either add your own element to the beginning or the end of an existing one by using .prepend() or .append() respectively.

In this example I’m adding my own #myown id inside an existing #header:

The first line gets a reference to my own content and stores it inside a variable with the same name. The second line takes this references and appends it as the last element inside the existing #header.

.prepend works the same, but would add my element as the first inside the existing one:

How to use jQuery UI elements in the WordPress admin interface

One thing I’ve been struggling with was to use jQuery UI elements in my plugins, for example jQuery UI Tabs. Even though the libraries are included with WordPress, I couldn’t get them to work.

Thanks to Pippin’s Plugins I could figure it out – thanks, Pippin!

My initial mistake was the way I created the admin page. WordPress provides so called wrapper functions that make creating an admin page very easy. For example, adding an admin page under the Dashboard works like this:

Check the WordPress Codex for detailed explanations on how to create other pages: http://codex.wordpress.org/Administration_Menus

Even though this works fine, it’s not quite possible to enqueue scripts inside pages created like that – which is why it wasn’t working for me. Instead, as Pippin points out, you can create admin pages in a more complex fashion:

The reason for this extra complexity is that now we have a global reference to our menu page. This is important, because now we can

– use that reference to call scripts, and
– make sure we load our scripts only in our own admin page, not in every admin page there is

The latter point is rather important: just image what would happen if my scripts are loaded on every possible admin page, potentially causing problems with many other plugins and core functions.

I know this is complex stuff, so please bear with me before we start loading those builtin scripts. Because before we do, we probably have a js file of our own we want WordPress to load on our admin page. To make that possible, we’ll have to register it first, like so:

Nothing is happening just yet, other than WordPress being aware that a new script has been registered and is ready for use if enqueued.

With our reference at hand, and our own script registered, let’s enqueue all the scripts we need to make our admin page look smashing. For this example, I’ll use jQuery UI Tabs, and of course my own custom-starter-script:

You can find a list of libraries included in WordPress and their respective enqueue codes here: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

If we’d build an interface without WordPress we’d also have to load the jQuery library (as jQuery UI needs it to work), however there’s no need for it when we’re using WordPress because it’s clever enough to load dependencies for us. Neat, huh?

Full Project Code

All that’s left now is to display the HTML for our tabs inside the main function. Rather than pasting that here, take a look at a full working project I’ve posted to GitHub called Plugin Starter. The code is well documented and contains links to further reading too.

I think I would never have understood this concept had it not been for Pippin’s excellent explanations, with many “how not to” examples. Check out his post here:

Loading Scripts Correctly in the WordPress Admin

Now go forth and create many funky admin interfaces for themes and plugins!

How to use jQuery in WordPress

jQueryOn a standalone (non-WordPress) project you’d import the jQuery library in the head tag, then call a jQuery function towards the bottom of your file.

This approach isn’t working in WordPress.

Since jQuery and many other useful libraries are already part of WordPress, there’s no need to link to your own copy. Instead, you need to “enqueue” such scripts before the closing head tag (and before wp_head() is called). This is done in your theme’s header.php file:

Every additional library must be called separately, such as jQuery UI components.

Then in your footer.php file, just before the call to wp_footer(), trigger your script like this:

Note that the usual $(document).ready(function() or $function() will not work in WordPress.

Thanks to Joseph Lowery for this tip.

For a full list of which scripts you can enqueue, check out this article from the WordPress Codex.

Full Working Example

Imagine you want to call a simple JavaScript alert in your project. Let’s see how we can call that from within WordPress.

In your main plugin file, add a function that sets up and enqueues your script. In this example our script file is called “test.js” and resides in the main directory of our plugin:

First we enqueue jQuery which ships with WordPress. Next we grab a reference to our own file and store it in a variable, using the plugins_url() function. Then we enqueue our script by giving it a handle and passing in the reference to the file.

In the last line we add this as an action early on in the process using the init hook. Now our jQuery script is loading on every page (something to be aware of).

Our jQuery code can only be executed when the document is ready, so it won’t work by just adding one line to our test.js file. Instead, we need to wrap our code into the document.ready function like so: