Disqus Comment System

Disqus is a third-party commenting platform that facilitates user interaction by providing a single log in for every Disqus-enabled site. They also offer various login options (Twitter, Facebook, etc) as well as content appreciation features. Essentially, it's a very simple comment system that doesn't require local registrations or theming. One of its great feature is the ability to export all the local WordPress-based comments into their database for a smooth transition.

Google Analytics for WordPress

I'm not much of an SEO person, but I'm still aware it has a definitive importance and impact to have a properly indexed website. There's a bunch of options that I don't understand, but luckily I have friends who make a living of SEO and Analytics and they insist Joost de Valk's Google Analytics for WordPress is there best option available.

Google XML Sitemaps

In June 2005, Google announced a new service called Google Sitemaps. This plugin allows webmasters to submit an index of URLs which they want to have included in Googles web search. It's free to use and helps Google to get a more complete overview of your website. More information regarding Google Sitemaps and how this plugin implements it over at Arne Brachhold's FAQ

SyntaxHighlighter Evolved

My blog can get somewhat technical when I write about WordPress, PHP, Linux or JavaScript. SyntaxHighlighter Evolved allows code to be highlighted and formatted nicely using a predefined set of language-based shortcodes.

Widget Logic

This one is kind of complicated to get your head around. Essentially, Widget Logic will add an input box inside every widget that allows you to use WordPress template tags to conditionally display (or not) the widget's content.

WordPress Admin Bar

I have to admit I found this little gem only today, and I don't know how I was able to live without it before. WordPress Admin Bar will, if configured to do so, add a nice little bar at the top your WordPress content like this giving you easy access to all your administrative functions while surfing the non-admin part of your blog. It's worth noting that WordPress Admin Bar is made by the same developer who makes SyntaxHighlighter Evolved (and who works for Automattic). For more of Alex's plugins, check out the full list on his website

WPtouch

The guys at BraveNewCode have been around ever since there was an interest for mobile-friendly versions of standard websites. It was the first mobile-rendering plugin that WordPress had, and as far as I'm concerned, it's still the very best. The only downside is that it lacks a design modification aspect - but then again, how else are you going to render if not this way? In today's mobile-crazed world, it's a pretty good idea to use WPtouch to render a mobile-friendly version to known mobile browsers.

WP Super Cache

WordPress does not come with a file caching system by default. If your blog has high pageviews, using WP Super Cache will significantly reduce the load on your server, which can then stay responsive longer because it doesn't have to call and process the files queued for serving.

Akismet

One of the very few plugin that comes bundled with WordPress by default, Akismet is a merciless spam filter for your comments. It's been pretty good to me since I've started using it. It can also be used in various independent user-input-based plugins like Contact Form 7.

WP-prettyPhoto

Obligatory self-promotion, yes, but I genuinely believe it my plugin deserves a spot on this list. Stéphane Caron did a fantastic job with his prettyPhoto jQuery plugin, (more Stéphane projects) even more so with the 3.0 release which will be implemented in WP-prettyPhoto soon. This plugin automatically makes all self-linked images open in a cute prettyPhoto inline window that supports multiple media formats, YouTube, Vimeo, QuickTime and Flash videos, external sites and even inline (textual!) content. Read up on the current version's usage instructions to get an idea of what it's capable of!

Revision History: This article is intended to document the current WP-prettyPhoto (1.5.1) & prettyPhoto (2.5.2) versions.

Now for some organization, here are the topics that will be discussed in this article:

• 1. Technical Information
• 2. Installing WP-prettyPhoto
• 3. Using WP-prettyPhoto
  • 3.1. On Images
  • 3.2. On Videos (MOV) and Flash (SWF)
  • 3.3. On YouTube Videos
  • 3.4. On External Sites (iFrame)
  • 3.5. Shortcode API Calls
• 4. Examples

1. Technical Information

The idea behind WP-prettyPhoto is to avoid having to use Lightbox to display pictures. Lightbox is based on the Prototype JavaScript library, and most WordPress plugins tend to use jQuery. Using WP-prettyPhoto thus allows you to avoid loading multiple libraries to perform a single task. Stephane Caron developed prettyPhoto because the jQuery Lightbox clones, at the time, were close enough to the real Lightbox.

prettyPhoto uses attribute hooks to bind itself on elements to display. In other words, if prettyPhoto finds a rel attribute inside a link pointing to one of its supported format (bmp, gif, jpg, jpeg, png, swf, mov), and that rel attribute matches the one prettyPhoto looks for, it will know that link is meant to be displayed within a prettyPhoto box. Since prettyPhoto 2.4, it also looks for simple text links with the configured rel attribute and the string "iframes=true" within the target URL. Since prettyPhoto 2.5, an API is available.

2. Installing WP-prettyPhoto

The installation of WP-prettyPhoto is pretty straightforward, as with most WordPress plugins. Once you have downloaded the current version of WP-prettyPhoto, you have two options:

1. Use WordPress' builtin plugin installation system located in your WordPress admin panel, labeled as the "Add New" options in the "Plugins" menu to upload the zip file you downloaded
2. Extract the zip file and upload the resulting "wp-prettyphoto" folder on your server under "wp-content/plugins/".

All you need to do after that is navigate to your blog's administration panel, go in the plugins section and enable WP-prettyPhoto.

For more information, see the "Installing Plugins" article from the WordPress Codex.

3. Using WP-prettyPhoto

There are several ways to use WP-prettyPhoto on your blog. All of them can be automatically achieved by enabling the "All Formats" option in the "Automate" section of the WP-prettyPhoto settings, located inside WordPress' Media settings page. All of the "Automate" options will trigger automatic activation of the specific format. That is how to use WP-prettyPhoto automatically. However, some of prettyPhoto's formats require specific instructions. For all formats, you will need to do the following: Insert the media you want prettyPhoto to bind itself on in your post or page, surround it by a link and make the HREF attribute point to the original media Then, simply add WP-prettyPhoto's configurable REL string to the link.

It is important to note that there is also a way to exclude specific elements from being displayed in prettyPhoto. To do so, simply make the link point to a new window using "_blank" as the value of the link's TARGET attribute.

3.1. On images

Manually using prettyPhoto on images is simple.  If you want to display a title inside the prettyPhoto box, make sure the "Display title" setting is activated. When active, prettyPhoto will use whatever is inside the image's ALT attribute. To display a description, use the link's TITLE attribute.

To manually insert a prettyPhoto gallery, the process is similar. All you need to do is make sure all your images have the same REL attribute with a slight modification. The REL attribute should define the gallery's unique name between [square brackets]. Doing so will allow prettyPhoto to display next/previous links as well as display the current picture count and the total pictures found in the gallery.

3.2. On videos and flash

The process of linking prettyPhoto to your video files is the same as images. Link to the .swf or .mov file, then specify the width and height. In the case your flash needs specifics parameters, add &flashparams to the URL specify the parameters.

3.3. On YouTube Videos

To load a YouTube video, simply link to the YouTube video url. You can also add "&width" and "&height" to specify the sizes, if not provided, default dimensions will be applied.

3.4. On External Sites

To load sites in an iframe inside prettyPhoto, link to the desired website and add the following params. "?iframe=true", to tell prettyPhoto to open the page in an iframe and "&width=300" "&height=300", to specify the iframe dimensions.

3.5. Shortcode API Calls

Since WP-prettyPhoto 1.5 and prettyPhoto 2.5, API calls are supported through WordPress shortcodes. There are two distinct shortcodes available to users, please note that shortcode usage must first be enabled in WP-prettyPhoto settings.

• Text: Opens a prettyPhoto box using img value for image source, title value for title, desc value for description. If you want to display a button instead of a link, set the button parameter to true.
• Text: Opens a prettyPhoto gallery using files values for images, titles value for image titles and desc values for descriptions. All values should be comma-separated and ordered properly. The second desc item corresponds to the description of the second files item. Here again, you can output a button instead of a link using button="true".

4. Examples

• Simple image hook with no title and with description.

  <a title="Simple image hook with no title and with description." href="http://blog.fusi0n.org/wp-content/uploads/2009/05/avatar-trans.png">Simple image hook with no title and with description.</a>

• YouTube video

  <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0" rel="wp-prettyPhoto">YouTube video</a>

• Flash Movie

  <a href="http://movies.apple.com/movies/weinstein/nine/nine-tlr1_h.480.mov?width=480&height=204" rel="wp-prettyPhoto">Flash Movie</a>

• External Site

  <a href="http://m.reddit.com/?iframe=true" rel="wp-prettyPhoto">External Site</a>

[plugin_downloads]

Enjoy!

It's been a while since any activity has happened with prettyPhoto and WP-prettyPhoto. I was waiting for some changes to the prettyPhoto code to release a new version, and Stéphane Caron has released version 2.3 of his prettyPhoto jQuery plugin recently, so it was time to roll out a new WP-prettyPhoto version, 1.2, with all the changes and features that have been suggested since the last release. To skip the blah blah and go straight to downloading, head over to WordPress Extend.

What's new in this version? There's quite a lot! First off, let's talk of the changes made by Stéphane to prettyPhoto:

• Video and flash support has been reinstated! prettyPhoto can now handle prettifying links to MOV (Apple QuickTime) and SWF (Shockwave Flash/Small Web Format). There is a specific format you need to respect when linking to those media types. More information can be obtained on the prettyPhoto project page (near the bottom)
• Code has been optimized and design tweaked
• More information on the 2.3 release of prettyPhoto can be obtained on the project page.

As for WP-prettyPhoto, I have obviously integrated the changes from prettyPhoto inside this release, that means:

• Video and flash support for links pointing to .mov and .swf media files. Again, be aware there's a specific format to respect if you want your movies and animations to be hooked correctly. More info on this on the prettyPhoto project page.
• Added an option to toggle media hooks (disabling it will disable WP-prettyPhoto prettifying your video and animations)

There's also a few new features that will improve usability and user-friendliness such as...

• There's now an option to disable jQuery substitution. prettyPhoto relies on version 2.3.1 of jQuery. WordPress bundles a jQuery version that was inadequate to use with prettyPhoto, so to solve that problem, WP-prettyPhoto removes the JavaScript library that is shipped with WordPress and substitutes it for an adequate version that's shipped with WP-prettyPhoto, namely 2.3.1. More info on how to do that here, should you find yourself wondering. Thanks to Stéphane Caron for suggesting this feature.
• There's a new feature to exclude prettyPhoto hooking on certain links. In order to do so, all you need to do is set the link of your image, flash animation or QuickTime video to a new window (target="_blank") and WP-prettyPhoto will skip prettifying it. Thanks to Tommy Jones for suggesting this feature.
• Upgraded bundled jQuery from 1.3.1 to 1.3.2. Not really something that's necessary for the plugin, but I figured that since I substitute it, it might as well be the version that users might want, namely the most current at the time of the release. You can always disable substitution and include the version you desire by some other means.
• Switched prettyPhoto version type from uncompressed (17.5kb) to compressed (11.5kb), more fitting to production environments. Should you want to hack it up, there's an uncompressed version over at the prettyPhoto project.
• Obviously with the new changes, English and French localizations have been updated.
• Fixed a bug where DD_belatedPNG (PNG transparency hack for IE6) would be included even if the selected theme wasn't dark, which made it useless.

That's enough for now, isn't it? As always, if you have feature suggestions do not hesitate to contact me, they might make it to the next release! Now that you're educated as to what and how, feel free to head over to WordPress Extend to download this new version. Enjoy!

Note: Version 1.2 pretty much hit a wall.. I made the mistake not to add jQuery 1.3.2 in the package.. so yeah.. nothing worked. It's fixed in 1.2.0.1. Sorry about that.

All that being said, I upgraded my WordPress from 2.7 to 2.7.1 in the middle of coding some new features for the latest release of WP-prettyphoto, 1.1. That made me realize that updating WordPress' core also updates the installed JavaScript modules, namely jQuery (among many others). When I first coded WP-prettyphoto, when things weren't working I just replaced the jQuery I had with the latest official stable release and things worked fine. I didn't give it much thought. So when I updated WordPress, all hell broke loose and WP-prettyphoto was metaphorically crying in agony because jQuery wasn't man enough for it. I then tried performing the same manual updating procedure, and without really surprising anyone -- I was alone anyway -- WP-prettyphoto was back prettyfying my stuff like a starving fat kid eats a cheesecake.

Morale of the story, I needed to code a jQuery version check in my WP-prettyphoto code, and if jQuery's version wasn't matching what I wanted, I had to replace the script with one that would make WP-prettyPhoto work the way it's supposed to. The goal's clear, the execution, however, was somewhat more obscure. Obviously, not being a WordPress plugin genius, I googled for solutions or anything that could help me achieve what I wanted. I didn't find much on how to replace a bundled script loaded by default. I found what I was looking for in a competing (and I use that term very, very loosely!) plugin for a jQuery Lightbox clone cleverly called jQuery Lightbox by Pedro Lamas. It's basically de-registering the default WordPress jQuery plugin and replacing it with one bundled with the plugin. Using native functions. Nice. Here's the code:

// jQuery - removing to make sure we're using 1.3.1
//Deregister bundled jQuery (1.2.6 as of WP 2.7.1)
wp_deregister_script('jquery');
//Registering our up to date jQuery
//$wppp_url is WP_CONTENT_URL.'/plugins/'.plugin_basename(dirname(__FILE__));
wp_register_script('jquery', ("$wppp_url/js/jquery-1.3.1.min.js"), false, '1.3.1');
//Giving WordPress our new jQuery script to enqueue (display)
wp_enqueue_script('jquery');

So there you have it. That's how to replace the version of a bundled WordPress JavaScript library.