10 Tutorials Using WordPress and JQuery
SHARE THIS

Getting the awesomess of JQuery integrated into WordPress is much more simple than you think. Here are 10 Tutorials using WordPress and JQuery.

Let’s start this off by properly including JQuery in WordPress.

1. Including jQuery in WordPress (The Right Way)

[php]<?php wp_enqueue_script("jquery"); ?>[/php]
If you want, you can just download jQuery, put it on your server and link to it from your header.php file in the section. But that can cause you grief. For one thing, some plugins use the jQuery library, and they are going to load it as well. This can cause problems. How was your plugin to know you already had it loaded?

View Tutorial

Now that you have the awesomeness that is JQuery included in your WordPress theme, check out these tutorials.

2. Create A Tabbed WordPress Sidebar Using jQuery

wordpress-jquery-justin-tadlock
Tabbed sidebar elements are in. Why bother making users scroll down the page, when they can simply click a tab to quickly access various parts of your site? This tutorial is primarily based off WordPress, but can easily be ported anywhere else.

View Tutorial

3. WordPress Featured Post Slideshow

wordpress-sliding-featured-content-jquery
Here, we’ll be learning how to create a featured content section with WordPress and animate it with jQuery. This is great for News or Magazine themes. Plus it’s just awesome.

View Tutorial

4. Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+

wordpress-sliding-login
Implement a nice & clean sliding login panel built with jQuery into your WordPress blog.

View Tutorial

5. Build the ANidea Theme Switcher using jQuery

anidea-wordpress-theme-switcher-jquery
This tutorial walks you through the process of creating a theme switcher like the one used on ANidea.

View Tutorial

6. Create a jQuery Carousel with WordPress Posts

wordpress-post-carousel-jquery
This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

View Tutorial

7. WordPress Multi-Level Drop Down menu using jQuery

WordPress-jQuery-Multi-Level-Drop-Down-Menu
As WordPress theme designers, we’re often faced between the choice of going for purely CSS drop-down menu or javascript drop-down menus in our struggle with cross-browser compatibility.

The aim of this short tutorial is help you build a simple multi-level drop-down menu in your WordPress theme using jQuery’s JavaScript library to ensure cross-browser compatibility.

View Tutorial

8. Create a Twitter-Like “Load More” Widget

load-more-wordpress-widget-twitter
Both Twitter and the Apple App Store use a brilliant technique for loading more information; you click the link and fresh items magically appear on the screen. This tutorial teaches you to use AJAX, CSS, Javascript, JSON, PHP, and HTML to create that magic. This tutorial will also feature both jQuery and MooTools versions of the script.

View Tutorial

9. Using jQuery to liven up your WordPress login

jquery-wordpress-login
Here’s a really quick method of simplifying the WordPress login process using a jQuery lightbox.

View Tutorial

10. Adding Form Validation to WordPress Comments using jQuery

comment-validation
When it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial you will be shown you how to use jQuery to do some instant checking on an example comment form.

View Tutorial
1000s Template Choices for Your Site - From $5