Jan 26 2009

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

Advertisement

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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Download Plugin from here

9. Insights

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


µ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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


µ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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

<div class="tabbed">
	<!-- The tabs -->
	<ul class="tabs">
	<li class="t1"><a class="t1 tab" title="<?php _e('Tab 1'); ?>"><?php _e('Tab 1'); ?></a></li>
	<li class="t2"><a class="t2 tab" title="<?php _e('Tab 2'); ?>"><?php _e('Tab 2'); ?></a></li>
	<li class="t3"><a class="t3 tab" title="<?php _e('Tab 3'); ?>"><?php _e('Tab 3'); ?></a></li>
	<li class="t4"><a class="t4 tab" title="<?php _e('Tab 4'); ?>"><?php _e('Tab 4'); ?></a></li>
	</ul>

	<!-- tab 1 -->
	<div class="t1">
	<!-- 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 class="t2">
	<!-- Or, we could put a paragraph -->
		<p>This is a paragraph about the jQuery tabs tutorial.</p>
	</div>

	<!-- tab 3 -->
	<div class="t3">
	<!-- Or, we could add a div -->
		<div>Something needs to go in here!</div>
	</div>

	<!-- tab 4 -->
	<div class="t4">
	<!-- 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 -->

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


Learn how to create an animated featured posts section in WordPress

Download Plugin from here

23. GD Star Rating plugin

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Using jQuery With WordPress: 30+ Encrideble Plugins


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

Demo can be seen here

About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Graham Smith, 26 January 2009

    You never cease to amaze with your collections. Some useful things here, I had seen the simple modal form just a few weeks ago and am adding this to my own site.

    Great work
    Graham

    • Noupe, 26 January 2009

      Graham, I glad you found some useful plugins here. Good luck with your very well designed website ;)

  • Pavel Ciorici, 26 January 2009

    wow…. some great plugins I haven’t seen before…

  • very nice plugins and tuts thanks..

  • Jeremy, 26 January 2009

    Just in the nick of time a few of these that I hadn’t seen before are coming in super handy with a project I am working on right now.

    Thanks much you made my day a bit easier!

  • Andy, 26 January 2009

    Hi, I am very impressed by your blog. Well done!

  • Tommy Day, 26 January 2009

    Dang, pretty epic post.

  • Will Donovan, 26 January 2009

    As a side note, the Options plugin (http://www.themehybrid.com/themes/options/ utilizes the jQuery tabbed information without having to do much at all. The new version of the NextGen WordPress Gallery incorporates Slimbox – Finally, missing here, unless I am mistaken that it does not use jQuery, is the amazing non-Java image rotator Smooth Gallery, which now has integration into the NextGen plugin

    • Noupe, 26 January 2009

      Thanks Will for your feedback. I would like to address few points here.

      Options is an advanced, highly-configurable theme that gives users a lot of control over their site from the theme settings page.

      So options theme is a great theme but not a Plugin.

      The plugin that was mentioned here was using Slimbox 2 ( Lightbox clone for jQuery) :)

  • Eric Martin, 26 January 2009

    Thanks for including SimpleModal Contact Form on your list!

  • Paul Irish, 26 January 2009

    Thanks for the include of http://www.infinite-scroll.com. The jQuery plugin is on the site.. if anyone has questions, leave a comment there and I’ll help out!

  • Chris Poteet, 26 January 2009

    Thanks for the link to my plugin!

  • Noupe, 26 January 2009

    @Eric Martin, @Chris Poteet, @Paul Irish
    Thanks for stopping by here and for being so generous to share such beautiful Plugins :)

  • Vladimir, 26 January 2009

    Very interesting mashup. Thanks for listing my 1, 2, 3, 4! plugins :)

  • Abrishca Digital Media, 26 January 2009

    This is great timing for me, just getting into WordPress but I don’t like to just rely on “basic” themes or installs – anything to enhance websites in a simple way is worth a lot.

  • Mike Meisner, 26 January 2009

    Hi, and thanks for the include on my post for the featured slider. I’ll have to re-visit it and see if I can elaborate some. If anyone has questions feel free to ask and I’m happy to help.

    Thanks Noupe!

  • Wil waldon, 26 January 2009

    Awesome list. Might have to try out the contact form on my site.

  • Chris Poteet, 26 January 2009

    Hey Noupe – FYI I got this trackback. Looks like they’re lifting your content.

  • jankees, 26 January 2009

    I created this, and use it alot myself!

    http://blog.base42.nl/2008/10/03/jquery-plugin-for-sexy-css-buttons/

  • Tonylog, 27 January 2009

    Thank you for this helpful tut. I have always liked Jquery but never found proper wordpress plugins that used it. Thank you for your recommendations.
    Antonio

  • alizee, 27 January 2009

    This is great timing for me, just getting into WordPress but I don’t like to just rely on “basic” themes or installs – anything to enhance websites in a simple way is worth a lot..

  • Rahul, 27 January 2009

    Thanks for this article. Hope to make my site too a good one.

  • jesse, 27 January 2009

    Nice and thanks for the list, downloaded some.

  • Steve, 27 January 2009

    I really like the SimpleModal contact form plugin – it looks very, very nice.

  • herbal, 27 January 2009

    good article. I wish i know more about wordpress cuz i’m newbie :/

  • Spacedmonkey, 27 January 2009

    What an interesting mixture of wordpress and jquery. It is extremely is to implement it site wide. The only problem comes is when you have old code in posts that was generated by older versions wordpress.

  • Paradise Planet, 27 January 2009

    I think I should tweak the lightbox pluggin and use it in my site. This one looks quite cool.

  • insicdesigns, 27 January 2009

    this post show how awesome jQuery is.

  • Ronald Bien, 28 January 2009

    very useful post=)keep them coming!!

  • Bjorn, 28 January 2009

    I needs me a new WordPress project…

  • Carter Harkins, 28 January 2009

    Great resource! we are just getting in to jQuery, though I’ve been a WP user since the early days. Looks like a good excuse for a redesign! Now if only I had the Time Multiplicator plugin…

  • Nanomedicine, 28 January 2009

    Great collection! Will definitely help me. Thanks a bunch.

    David

  • alizee, 29 January 2009

    wow…. some great plugins I haven’t seen before….

  • Ramoonus, 29 January 2009

    This is a top list, I`ve just added a couple of these plugins to my site … and my site is even better now

  • Patirck Arlt, 29 January 2009

    Thanks for including my post about the featured post slideshow!

    Very exciting to get on this awesome site.

  • Baking Chef, 30 January 2009

    I love jquery. I don’t see how I ever got along with prototype etc. I’m very glad to see it getting integrated into so many different wordpress plugins.

  • eddie yang, 31 January 2009

    nice job.
    i love jquery and wordpress.and hope i could creat my own plugin for wp

  • WPCult, 02 February 2009

    That is quite an awesome jQuery collection for WordPress!

  • WPCult, 10 February 2009

    Got any plugins or tricks to implement the wp_page_menu API hook in WordPress 2.7? That would be nice..

  • blogsarticle, 20 February 2009

    I needs me a new WordPress project…

  • Jason Barone, 21 February 2009

    Wow, jquery looks very impressive. Thanks for the great list, I’m using Lightbox now, but the Tabs looks like a great feature that I’ll look in to.

  • milos, 10 March 2009

    heya, check out pageMash plugin for a better drag n drop for page order.
    sweet

  • Totally amazing post ! I`ve used many of them in my blog. Thnx Noupe

  • ohmkumar, 15 March 2009

    Cool
    Nice collection..

  • Arron Davies, 21 March 2009

    This stuff is amazing. getting the design of the blog interesting will set these of lovely.

  • kakday, 26 March 2009

    nice bro..

    thanks

  • divya, 29 October 2009

    can anyone suggest me some wordpress plugin for fast page loader??????

  • my photoshop tricks, 01 November 2009

    wicked collection, love it thanks for the great site

  • Dimox, 08 November 2009

    Hey, thanks for including my plugin (jQuery Comment Preview) in your review! I very like jQuery =)

  • Richie, 14 November 2009

    Awesome collection of wordpress and jquery based plugins..

  • Addereeorgaft, 23 November 2009

    Impressive Article , I considered it wonderful

    I look ahead to more interesting postings like this one. Does Your Blog have a RSS I can subscribe to for new posts?

  • web, 29 November 2009

    So many t choose from. Thanks fr the wonderful list.

  • sana, 06 December 2009

    Hi

    this is great jquery is awesome but i’m looking solution WP video gallery with jquery… any example for this thanks.

    sana

  • Kristina, 18 December 2009

    This is wonderful. Thanks!

  • vic, 18 December 2009

    You have some great and useful plugins. Thanks!

  • cristian cena, 24 December 2009

    compilation is perfect, thanks for sharing!

  • eflomi, 03 January 2010

    wow – really cool collection. I have tried 2 or 3 of this plugins on my website.

    great work! thanks

  • kris de jong, 11 January 2010

    nice list, thanx

  • web design cheltenham, 18 January 2010

    great post, thanks for sharing

  • Steve, 25 February 2010

    Hi,

    Thanks for this. Very useful, I will be using several on my site!

    Cheers,
    Steve

    ImageArcade – Photography By Steve Ayres

  • Daniel, 28 February 2010

    Loved this tips about wordkpress and jquery

  • Yvon Kruger, 02 April 2010

    Thanks for this great compilation. It helps me to understand Jquery possibilities. I will follow your blog!

  • Graham, 02 April 2010

    What do you consider your greatest achievement?

  • turc, 08 April 2010

    good post

  • Adal Design, 10 April 2010

    Great collection of snippets and all-made integrations!

  • Kissie, 18 April 2010

    Oh so cool! Thanks for doing a lot of my homework for me.

  • andol, 21 April 2010

    absolutely great post, useful

  • Faheem, 08 May 2010

    HI
    I was using demo named
    26. Using jQuery to liven up your WordPress login
    But unable to implement thick box. Then after little search i found that you have made little mistake in the code provided.
    In this anchor tag you have not applied css class named thickbox
    Login
    when i changed this to
    Login
    it works

  • Andrei, 13 May 2010

    Great collection of plugins. I love the page order plugin. I already have the “category order” plugin but I didn’t know there was a “page order” one

  • dattai, 17 May 2010

    that’s socool

    thanks alot

  • Mihir, 25 May 2010

    good set of wp jq plugins :)
    tx

  • tlumacz, 29 June 2010

    Many Thanks for sharing

  • Meisam31, 16 July 2010

    Perfect!

  • Sumon, 19 July 2010

    Really, It’s great plugin collection for wordpress. I love this very much. Many many thanks to you.

  • Yet Another Admin, 04 August 2010

    We are giving great use to this list.
    Thanx a lot.

  • Ali, 20 August 2010

    Nice Post, Last one is very good and creative.

  • Henning Nielsen, 14 September 2010

    The “How To Create WordPress Tabs Using jQuery” looks really neat – got to try it for one of my blogs. Thanks for making and sharing this collection.

  • Great stuff in there!

    I didn’t even know there was an audio plugin for wordpress.

    You should have put them in order we have to try them :)

  • jokeweb.net - david, 29 September 2010

    Very cool, thanks for the share.

  • Edward Rhidwan, 30 September 2010

    wow… thats amazing. I love WordPress.

  • shashank chinchli, 03 October 2010

    awesome colelction guys!
    jquery made wonders for my blog!

  • tom, 02 November 2010

    Comment preview was just what I was looking for. Thanks. Great job.

  • wiper blades, 03 November 2010

    Great list.Thanks..

  • kadee, 24 November 2010

    Excellent! Just stumbled in on Day 4, but already amazing content and guidance man. Happy to see you still doing it like you do! Keep it up and Thanks!

  • Adriana Web design Brisbane, 26 November 2010

    Thanks for the post. I am starting to use WordPress (I am web designer) and the SimpleModal Contact Form is what I needed!!! This page is saved in my favourites, you never know when you are going to need the rest! :)

  • Adriana Web design Brisbane, 26 November 2010

    BY THE WAY THE EXPLORER WARNING IS A MUST USE! hahahahahha
    Love it. You are using Explorer pleaseeeeeeeeeeeeeeee use another browser :)

  • kami, 30 December 2010

    How To Create WordPress Tabs Using jQuery” looks really neat – got to try it for one of my blogs. Thanks for making and sharing this collection.

  • EscayolistasValencia, 15 January 2011

    interesting article, is the first entered in this site and will not be the last
    Greetings

  • wangjiang, 22 January 2011

    Easily, the post is really the greatest on this laudable topic.

  • Media Chandler, 29 January 2011

    Thanks for sharing once again a great list… I do dig Jquery…

  • gunawan, 12 February 2011

    I feel very sturdy approximately it and would like to read more. If it’s OK, as you achieve extra extensive wisdom, would you thoughts adding more articles similar to this one with additional info? It will be extremely useful and useful for me and my friends.
    thanks for info

  • brian Abella, 20 February 2011

    nice collection. thanks for sharing

  • Drew Rakowski, 28 February 2011

    nice collection. thanks for sharing

  • balochkhan, 12 March 2011

    Was great
    But in my mind have one question
    jquery It has a negative impact on site seo?
    And thank you for putting this content

  • hicxo, 26 March 2011

    Great list of plugin!thanks for share it.

  • Mariana Salinas, 16 April 2011

    Nice post.Thanks for sharing useful information.

  • Genite, 19 May 2011

    Great material in present!
    Nice Post, final one is very good and resourceful.

  • Mike, 19 May 2011

    The Events Calendar is amazing! thank you.

  • Akif, 27 May 2011

    I have got the wp-wall and Jquery Comment preview oh and star rating aswell thank you for this post my friend :)

  • Elizabeth, 02 June 2011

    This is a wonderful list. Thanks for finding all of these WordPress goodies.

  • souvenir pernikahan, 03 June 2011

    Wow..very nice tutorial..I would like WordPress Sidebar Turned Apple-Flashy Using jQuery UI.I wanna to install it on my blog.

  • Schalk Joubert, 07 June 2011

    Hi,

    I need to replicate the jQuery as seen in this HTML website in into a WordPress page.

    Click on Wedding Concepts for instance, and you’ll see.

    Any plugins out there to get this working?

    Many thanx!

    Much appreciated.

  • Aminu, 22 August 2011

    Awesome Great Collections, Thanks!

  • MiLaT, 31 August 2011

    Thank you really need it for :)

  • Michael Allen, 27 September 2011

    great tutorials, thanks bro

  • idris, 17 November 2011

    great collection…thank you for sharing

  • Asfaha, 22 December 2011

    Appreciated, thanks

  • Umit, 02 January 2012

    Hi guys. Thanks for this list. I am looking for an rollover overlay plugin for images, which will display text on hovering with the mouse. I tried this one “CSS3 Image & Text Overlay Plugin”, but it doesn’t work in IE or I don’t know how the css has to be modified. Any ideas for another one or the solution??? The website of the coding guy is down … .

  • mohammad, 08 February 2012

    nice plugin are you given

    thanks a lot man ;)

  • julio, 05 April 2012

    thx bro

  • Thank you for this review, Image plugin are easy to use and the result can be awesome even for newbies in WordPress

  • andrew, 06 September 2012

    thank you for this information. i will enrich my website with these things.

search form
 
image description image description