The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials

jQuery is ideal because it can create impressive animations and interactions while being simple to understand and easy to use. WordPress awesomeness lies in its fact that it can be customized to power any type of site you like! But what happens when you combine the power of jQuery with WordPress, the possibilities are infinite.

 

This article will share some best practices, examples & Plugins for using the most popular Javascript framework to create unobtrusive, accessible DOM scripting effects for your WordPress site.

Let’s take a look at 25 26 useful, yet rather unknown WordPress Plugins and tutorials using jQuery to its fullest potential.

Don’t Forget to…

subscribe to our RSS-Feed and visit my twitter page : nourayehia get notified when our next post is here.

1. Infinite Scroll

Wp-jquery17 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page. There is a little known feature in the .load() method that lets you specify the CSS selector of the html you want to include. jQuery will load in any local URL, then parse the html and grab only the elements you’ve defined with your selector.

Check Out a live demo here

2. jQuery Lightbox

Wp-jquery1 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


This is the WordPress’s version of the jQuery Lightbox Plugin Used to overlay images on the current page, perfectly working with WordPress 2.2 or up, and fully compatible with K2!

Download Plugin from here

3. WordPress post information plugin

Wp-jquery2 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


If real estate is a priority in your theme then this plugin can help by showing post meta information on demand by using a JavaScript toggle function.

Download Plugin from here

4. Snazzy Archives

Wp-jquery7 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


Snazzy Archives is a visualization plugin for your WordPress site featuring an unique way to display all your posts. You can select different layouts and special effects. Main features of Snazzy Archives are: Unique visual presentation of blog posts, Will work out of the box with all features, Posts are scanned for images and youtube videos and shown together with number of comments, Different editable layouts (HTML and CSS), Special effects using jQuery and more.

Download Plugin from here

5. J Post Slider

Wp-jquery3 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


Show your post in fancy jQuery box, rotating images, with show-up text box with post description. Mousover stop the animation, and user can click on post link anytime.

Download Plugin from here

6. WP-Imagefit

Rather than relying on a CSS or HTML-driven approach to resize large or wide images, WP-Imagefit relies on Javascript to proportionately resize images based on the width of the containing column.

Download Plugin from here

7. WP Wall

Wp-jquery5 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


WP Wall is a “Wall” widget that appears in your blog’s side bar. Readers can add a quick comment about the blog as a whole, and the comment will appear in the sidebar immediately, without reloading the page.
All comments are internally handled by WordPress so that means you have normal comment moderation, SPAM protection and new comment notification.

Download Plugin from here

8. jQuery Comment Preview

Wp-jquery15 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


Live comment preview without page reboot using a simple HTML-editor.

Download Plugin from here

9. Insights

Wp-jquery6 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


Insights brings a powerful new way to write your blog posts. It increases productivity and at the same time quality of your posts by using dynamic AJAX interface which loads the relevant information to your post in just a few seconds. Insights performs following functions in real-time: Interlink your posts, Insert Flickr images, Insert Youtube videos, Search Wikipedia, Search Google, Insert a Google Map and more.

Download Plugin from here

10. µAudio Player

Wp-jquery9 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


µAudio is a slim (450 Bytes!), fast plugin to create a flash mp3 player when mp3 links are clicked. In order to reduce clutter and file transfer, the links are unmodified until they are clicked, at which point a div with the player is faded in after the link. A second click on the link fades the player back out.

Download Plugin from here

11. SimpleModal Contact Form

Wp-jquery12 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


SimpleModal Contact Form (SMCF) is an Ajax powered modal contact form. It utilizes the jQuery JavaScript library and the SimpleModal jQuery plugin. SMCF has options to include certain contact form elements, like a Subject field and “Send me a copy” option for the sender.

Download Plugin from here

12. Events Calendar

Wp-jquery11 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


Events-Calendar is a diverse replacement for the original calendar included with WordPress adding many useful functions to keep track of your events.

Download Plugin from here

13. µMint Plugin

Wp-jquery14 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


µMint is a slim plugin to integrate statistics from Shaun Inman’s Mint statistics package into WordPress.

Download Plugin from here

14. Shockingly Big IE6 Warning

Wp-jquery10 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


The Shockingly Big IE6 Warning is a plugin that shows a warning message alerting the user why is bad to use IE6, the security risk and the bad compatibility of Web Standards.

Download Plugin from here

15. WP-Slimbox2 Plugin

Wp-jquery8 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


A WordPress implementation of the stellar Slimbox2 script by Christophe Beyls (an enhanced clone of the Lightbox script) which utilizes the jQuery library to create an impressive image overlay with slide-out effects. Almost all options are configurable from the administration panel.

Download Plugin from here

16. Live Blogroll

Wp-jquery16 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


Live Blogroll will make your blogroll livelier. It will show a number of ‘recent posts’ for each link in your Blogroll using Ajax. When the user hovers the mouse above the link, RSS feed from the site is automatically discovered and a number of recent posts is shown dynamically in a box.

Download Plugin from here

17. PhotoXhibit

Wp-jquery4 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


This plugin uses photos from your Flickr, Picasa, and/or SmugMug accounts as well as allows you to upload and build Albums to help you build inviting Photo Galleries on your site using the most popular JavaScript based gallery plugins. This plugin is not yet compatible with WordPress2.7

Download Plugin from here

18. WordPress Sidebar Turned Apple-Flashy Using jQuery UI

Wp-jquery17 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


A tutorial to show you how to create Accordion plugin in jQuery UI to get the sidebar on the Apple Startpage and be able to show and hide it at your pleasure as well.

Check Out the demo here

19. How To Create WordPress Tabs Using jQuery

Tabbed sidebar elements makes users simply click a tab to quickly access various parts of your site. This tutorial will teach you how to do this in your WordPress blog using jQuery.

Check Out the demo here

  1. <div class=”tabbed”>
  2. <!– The tabs –>
  3. <ul class=”tabs”>
  4. php _e(‘Tab 1′;); ?>”>php _e(‘Tab 1′;); ?></a></li>
  5. php _e(‘Tab 2′;); ?>”>php _e(‘Tab 2′;); ?></a></li>
  6. php _e(‘Tab 3′;); ?>”>php _e(‘Tab 3′;); ?></a></li>
  7. php _e(‘Tab 4′;); ?>”>php _e(‘Tab 4′;); ?></a></li>
  8. </ul>
  9. <!– tab 1 –>
  10. <div class=”t1″>
  11. <!– Put what you want in here.  For the sake of this tutorial, we’ll make a list.  –>
  12. <ul>
  13. <li>List item</li>
  14. <li>List item</li>
  15. <li>List item</li>
  16. <li>List item</li>
  17. <li>List item</li>
  18. </ul>
  19. </div>
  20. <!– tab 2 –>
  21. <div class=”t2″>
  22. <!– Or, we could put a paragraph –>
  23. <p>This is a paragraph about the jQuery tabs tutorial.</p>
  24. </div>
  25. <!– tab 3 –>
  26. <div class=”t3″>
  27. <!– Or, we could add a div –>
  28. <div>Something needs to go in here!</div>
  29. </div>
  30. <!– tab 4 –>
  31. <div class=”t4″>
  32. <!– Why not put a few images in here? –>
  33. <p>
  34. <img src=”image.gif” alt=”Sample” />
  35. <img src=”image.gif” alt=”Sample” />
  36. <img src=”image.gif” alt=”Sample” />
  37. </p>
  38. </div>
  39. </div><!– tabbed –>
<div>
	<!-- The tabs -->
	<ul>

	
  • php
  • _e('Tab 1'); ?>">
  • php
  • _e('Tab 2'); ?>">
  • php
  • _e('Tab 3'); ?>">
  • php
  • _e('Tab 4'); ?>"> </ul> <!-- tab 1 --> <div> <!-- Put what you want in here. For the sake of this tutorial, we'll make a list. --> <ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </div> <!-- tab 2 --> <div> <!-- Or, we could put a paragraph --> <p>This is a paragraph about the jQuery tabs tutorial.</p> </div> <!-- tab 3 --> <div> <!-- Or, we could add a div --> <div>Something needs to go in here!</div> </div> <!-- tab 4 --> <div> <!-- Why not put a few images in here? --> <p> <img src="image.gif" alt="Sample" /> <img src="image.gif" alt="Sample" /> <img src="image.gif" alt="Sample" /> </p> </div> </div><!-- tabbed -->

    Wp-jquery18-2 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


    Another great tutorial by Nettuts teaching us how to Create A Tabbed Interface Using jQuery.

    Check Out a live demo here

    20. jQuery Reply to Comment

    Add “reply” and “quote” features on each comment list. If you have jQuery installed on you blog, this Plugin add two link in each comments list (on single page). This plugin can auto include jQuery from Google Ajax API repository.

    Download Plugin from here

    21. My Page Order

    My Page Order allows you to set the order of pages through a drag and drop interface. The default method of setting the order page by page is extremely clumsy, especially with a large number of pages. jQuery is used a smooth for drag and drop effect.

    Download Plugin from here

    22. WordPress Featured Post Slideshow

    Wp-jquery22 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


    Learn how to create an animated featured posts section in WordPress

    Download Plugin from here

    23. GD Star Rating plugin

    Wp-jquery23 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


    GD Star Rating plugin allows you to set up rating system for posts, pages and comments in your blog. You can set many options for displaying the rating stars, and also add widgets into the sidebars for displaying top ratings and other statistics generated by the plugin.

    Download Plugin from here

    24. Create a featured posts slider in WordPress using jFlow

    Wp-jquery24 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


    Many premium themes feature cool featured content sliding areas, where the latest posts appear. There is one such plugin, built around the Mootools library, but in this tutorial you will learn how to do this using jFlow jQuery plugin. It will also automatically scroll. Of course, this can easily be modified to use the navigation buttons as well.

    Demo of the jFlow plugin can be seen here

    25. Adding Form Validation to WordPress Comments using jQuery

    Wp-jquery25 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


    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 learn how to use jQuery to do some instant checking on an example comment form.

    Demo can be seen here

    26. Using jQuery to liven up your WordPress login

    Wp-jquery26 in The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials


    A quick method of simplifying the clients login process using jQuery lightbox.

    Demo can be seen here

    source : http://www.noupe.com/jquery/the-power-of-wordpress-and-jquery-30-useful-plugins-tutorials.html

    17 thoughts on “The Power of WordPress and jQuery: 25+ Useful Plugins & Tutorials

    1. You actually make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand. It seems too complicated and very broad for me. I am looking forward for your next post, I’ll try to get the hang of it!

    2. Kolkata is also known to be a leading city with adding efficiently to the economy of
      nation. The guides linked above give you access to articles covering all aspects of retirement savings and planning.
      The beauty of these online trading investing programs is that you don’t have to work your brains out looking for customers online or pound the pavement looking for prospects.

    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s