30 Tutorials Combining Both WordPress and jQuery

Take the most popular CMS, WordPress, and then take the easiest and most versatile of Javscript libraries, jQuery, and you have a match made in heaven. Implementing jQuery within WordPress is a lot easier than you would think, all you need is a little support from the huge WP community and a little patience, and you are good to go. Below you will find 30 Tutorials Combining both WordPress and jQuery.

Including jQuery in WordPress (The Right Way)

Wordpress and jQuery

View Tutorial »

When you download jQuery, put it on your server and link to it from your header.php file in the <head> section, this can cause you problems. Some plugins use the jQuery library, and they are going to load it as well and on top of that already has the jQuery library included. This can cause problems.
In this tutorial you will learn how to load up jQuery in your theme the smart (and intended) way, avoiding conflicts.

Display a Random Post (with AJAX Refresh)

Wordpress and jQuery

View Tutorial »

In this tutorial you will learn how to display a random post with Ajax refresh, and you will be surprised at how easy this is to do. You are going to leverage some serious smartness from both WordPress and from the JavaScript library jQuery.

Design An Elegant Featured Content Slider for WordPress

Wordpress and jQuery

View Tutorial »

In this tutorial, you’ll create an elegant featured content slider for WordPress based on The Coda Slider, a neat device used by Panic Software to display information about their “Coda” product on their website. This effect is beautiful, flexible, and often emulated.

View Demo »

Create an Attractive jQuery Menu with Fadein and Fadeout Effect

Wordpress and jQuery

View Tutorial »

In this tutorial you will create a jQuery menu using the Fadein and Fadeout effect. To develop the menu it requires a lot of CSS works, so roll up your sleeves.

View Demo »

How to Highlight Search Terms with jQuery

Wordpress and jQuery

View Tutorial »

A nice way to spice up your WordPress search page is to highlight search terms within your search results. In this tutorial you will learn to highlight both title and post content.

WordPress Featured Post Slideshow

Wordpress and jQuery

View Tutorial »

In this tut you'll be learning how to create a featured and "latest posts" section within WordPress, and animate it with jQuery. You will be using the jQuery Cycle plugin built for slideshows. To make it work you give it an element and it turns every child of that element into a slide.

Implement a Nice & Clean jQuery Sliding Panel in WordPress

Wordpress and jQuery

View Tutorial »

In this tutorial, you will learn how to create a smooth sliding login/signup panel for your WordPress site using jQuery.

View Demo »

Build a Basic Newspaper style layout with WordPress and jQuery

Wordpress and jQuery

View Tutorial »

Grid and Magazine templates are becoming more and more popular in WordPress development, so, in this tutorial you will use jQuery to create a grid layout with size-degrading headers.

View Demo »

Build the ANidea Theme Switcher using jQuery

Wordpress and jQuery

View Tutorial »

This tutorial will teach you how to create the cool theme switcher that is used on the ANidea web site. In the tutorial, you’ll cover the client side of Theme Switcher, which consists of the HTML, CSS and JavaScript (jQuery).

View Demo »

How To Create Tabs Using jQuery

Wordpress and jQuery

View Tutorial »

This tutorial is primarily for WordPress, but can easily be ported anywhere else. You will be creating a tabs section within the sidebar, a popular and useful feature in WordPress themes.

Use jQuery to Jazz Up Your List of Latest Posts

Wordpress and jQuery

View Tutorial »

A lot of blogs display a list of their most recent or popular posts in their sidebar, more often than not just showing the title of each one. But how can you give your reader an idea of what that post is about by using the excerpt, without taking up too much room? Using a little jQuery, you can.

Create a jQuery Carousel with WordPress Posts

Wordpress and jQuery

View Tutorial »

This tutorial 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, using the jQuery plugin jFlow.

View Demo »

Adding Form Validation to WordPress Comments using jQuery

Wordpress and jQuery

View Tutorial »

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'll be shown how to use jQuery to do some instant checking on a comment form.

View Demo »

Using jQuery to liven up your WordPress Login

Wordpress and jQuery

View Tutorial »

Using the jQuery principal "less is more…", in this tutorial you will learn a quick method of simplifying the clients login process using a jQuery lightbox.

View Demo »

Create a Twitter-Like Load More Widget

Wordpress and jQuery

View Tutorial »

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 the effect.

View Demo »

Fetching posts in WordPress with jQuery and AJAX

Wordpress and jQuery

View Tutorial »

In this tutorial you will learn how to allow site visitor to load posts from a certain category into the same part of the page via AJAX.

Making WordPress comments collapsible using jQuery

Wordpress and jQuery

View Tutorial »

Some blogs have over 100 comments on every new posts, which makes the page extremely large. So lets say you want to shorten those pages by making the comments collapsable, well there is a easy solution for that, using jQuery. In this tut you are going to integrate jQuery into WordPress and make the comments collapsible.

View Demo »

Create astonishing iCal-like calendars with jQuery

Wordpress and jQuery

View Tutorial »

Finding a good place to position a big table like a calendar within your WordPress template is always tough. In addition, the <table> tag itself is often quite difficult to style in a good way. What you will create in this tutorial is a compact calendar similar to the iPhone Calendar application.

View Demo »

How to add featured sliding content to WordPress

Wordpress and jQuery

View Tutorial »

In this easy to follow tutorial, you'll learn how to add a sliding content region to your WordPress site. You can download the source code for the tutorial, which contains everything you need to put this feature on your site in 5 minutes.

View Demo »

WordPress Sidebar Turned Apple-Flashy Using jQuery UI

Wordpress and jQuery

View Tutorial »

Apple have always been Gods in terms of the way they present themselves and their products. in this tutorial you will recreate the sidebar on the Apple Startpage, using a jQuery Accordion plugin to achieve this.

View Demo »

jQuery Sequential List

Wordpress and jQuery

View Tutorial »

Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list.

View Demo »

Twitter News Ticker for WordPress

Wordpress and jQuery

View Tutorial »

Over the last few years, Twitter has become a very popular marketing tool and more and more people are integrating their Twitter updates onto sites outside of Twitter. This tutorial will teach you how to display up to 20 of your latest Twitter updates in a fading news ticker on your WordPress blog. This is an elegant alternative to using a Twitter Badge and takes up little room on your site.

WordPress Multi-Level Drop Down menu using jQuery

Wordpress and jQuery

View Tutorial »

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 Demo »

WordPress & jQuery Contact Form without a Plugin

Wordpress and jQuery

View Tutorial »

There are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, yo are going to be shown how to use a custom page template to create a contact form in WordPress without a plugin.

View Demo »

Make A Dynamic Page Accordion Menu With jQuery

Wordpress and jQuery

View Tutorial »

In this tut you are going to create a menu from an unordered list and using jQuery toggle for the accordian effect, and yo will learn how to hide/show the related page to the viewer.

How To Add Flickr To WordPress In 5 Simple Steps

Wordpress and jQuery

View Tutorial »

In this tutorial, you will be shown how to add your Flickr Photostream to your WordPress blog using jSon and jQuery in five easy steps.

Integrate Feature Article Content Slide Show into WordPress

Wordpress and jQuery

View Tutorial »

In this tutorial you will learn how to create a Feature Article slide show with thumbnails and indicator and integrate it easily into WordPress.

View Demo »

jQuery Image Gallery/News Slider with Captions Tutorial

Wordpress and jQuery

View Tutorial »

In this tut you will create a really cool News Slider that uses two scrollers to create a very slick effect. It uses scrollTo to scroll both description and image items and it comes with previous, next, play, stop and mouseover events.

View Demo »

Creating Featured Slider in WordPress Theme using JQuery s3Slider

Wordpress and jQuery

View Tutorial »

In this tutorial you will create a featured slider section on your WP blog using the jQuery plugin s3Slider.

View Demo »

Show/Hide Toggle a widget using jQuery in WordPress

Wordpress and jQuery

View Tutorial »

Learn how to create a show/hide sidebar widget using jQuery.

Author: (582 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments