So... how do we remotely create users on a platform that doesn't let you create users with their API? After a bit of looking around for solution, I stumbled upon my client's store registration form (which is hosted, like everything related to Big Commerce, on a server you don't control). Different domains, different servers, no API methods... but I have a form. Have you ever heard of XSS? In the world of developers, it's a real annoyance. Essentially, if you fail to secure your forms properly, anyone can grab your form, put it somewhere else on the internet and submit bogus data (because the form still sends to you, get it?). Anyway, it's usually really only a security concern, but for this particular project, it became a feature.

Big Commerce does not validate their registration form, so you can submit it from anywhere... like right after a WordPress (or in my case, BuddyPress) user is created for example! A simple cURL request with the proper data set and we've got ourselves a relatively easy bridge. Now, there are cons to this method... for example, if Big Commerce ever realizes that their lack of respect for good practices is used as a feature, I'm not sure they'll keep it up for long. Notice how this post doesn't have a single link...? Yeah.

If this reaches their ears, can we please make a compromise? You pull the non-feature in exchange for a user creation method in your API. Deal?

On to other things..

That wasn't the only thing I was tasked with doing. My client also wanted the ability to use the header from his WordPress theme on his Big Commerce site. Again, Big Commerce doesn't let you put any code on their servers (except static files like HTML and CSS) even though that's where your store resides. Not hating, it's a business model... it's just not a very convenient one. So I have a WordPress header (including a carousel and a drop-down menu of WordPress-centric items) and a lousy API. I initially tried to use BC's %%Include%% "feature", but as you can guess, it fails for remote resources.

Long story short, I created a new file at the root of my client's WordPress site and tossed this in:

define('WP_USE_THEMES', false);
require('./wp-blog-header.php');
get_header('store');

With that, I can essentially be inside WordPress while remaining outside of its scope. Notice the get_header() parameter that allows you to use specific files (such as, in my case, header-store.php). Alright, so I have a decent looking header (that's a few lines of random HTML, JavaScript and CSS) but I still can't fetch it from the store. So I had to get creative. After a fair amount of digging around, I found that I could upload files to Big Commerce - but only static (HTML, CSS, JS, etc) and only in a very specific location (that's /content by the way). With that, I can build something:

#!/usr/bin/php
$ch = curl_init('http://secret.url/headerForBC.php');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HEADER, false);
$header = curl_exec($ch);
$file = tempnam('/tmp', 'bc2wp');
file_put_contents($file, $header);

$context = stream_context_create(array('ftp' => array('overwrite' => true)));
// Big Commerce requires a secure connection
$ftp = ftp_ssl_connect('server2600.bigcommerce.com');
$login_result = ftp_login($ftp, 'duh', 'ohai');
echo ftp_put($ftp, '/content/wpheader.html', $file, FTP_ASCII)? 'success' : 'fail';
ftp_close($ftp);

Then toss it in a cron that'll run it every 24 hours and use %%Include.http://my.store-url.com/content/wpheader.html%% to render it. That wasn't so bad, was it?

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!

I wanted to rename the "Posts" menu in the WordPress admin. In the example I've described above, I wanted to rename the "Posts" to "Songs" and "Categories" to "Artists". The problem with that is that those are hardcoded in the a WordPress file and no hooks are defined, so we can't dynamically change it. It's also useless to manipulate the $menu variable which contains the admin sidebar items since "Posts" is also displayed on pages and at a bunch of other places. So how to efficiently turn that into a different string without hacking up the core?

The solution I came up with was to use WordPress' built-in localization mechanism. When theme and plugin developers want to output a string, they can enclose it in the__('string'); function, which calls up a gettext parser to translate. I'm not a fan of the system, it obliges you to compile a new language file for every version of your theme/plugin - and add one more for every language. But it's what WordPress uses, so we'll deal with it.

The first thing we need to do is get a copy of the default language files since they're not included with WordPress. Make sure you get the appropriate version of the file - it has to match your WordPress version. The latest one can be found here. Once we have that, check out what WordPress says about translating using gettext and POT/PO/MO files. You'll agree then that it's not a very convenient way. If you want to replace specific words like posts, categories - I was able to use Komodo Edit's regular expression replace to change everything at once with some regex voodoo (search for ^msgstr \"(.*)posts (.*)\"$ and replace with msgstr "\1songs\2" for example). Once you've done that for all your strings, either upload it to ./wp-includes/languages/LOCALE.mo (where locale is whatever locale you'll enable in the WordPress admin - I used "default.mo") which will make WordPress automatically parse it or, the smart and portable way make a plugin to dynamically replace the language:

add_filter('load_textdomain_mofile', create_function('$moFile', "return dirname(__FILE__).'/lang/default.mo';"));

Using that will dynamically replace the default localization file (if any) with the one you've uploaded in your plugin/lang directory named "default.mo".

In the end, WordPress is a great flexible platform. You can literally do anything you want with it even something that it completely isn't usually thought to be in the "blogging application" domain. I guess this is where I reiterate that if you can use custom posts type and keep the regular menu, you're definitely encouraged to do so, or even remove the menus altogether by manipulating the $menu variable. However if you need global translation of the admin while keeping a few or all of the WordPress default features, it's still a pretty interesting way to do it.

I've also incorporated ads into this design. Yes. This blog is amazingly popular for mobile-related stuff (mostly Cydia), and well I'd be stupid not to monetize it. There's one ad unit in the sidebar that's low enough to be unobtrusive and another more obvious one at the top of single posts. I've discovered why my blog has been showing public service ads for the last 2 years and fixed that (shows how much I care).

Ideally, I'll start posting interesting stuff here eventually about WordPress, Mobile and general development. Stay tuned, and thanks for your loyalty - I still don't understand why anyone would read this blog, but whatever floats your boats.

• Introduction to creating WordPress plugins
• Managing your sidebars and widgets
• Using WordPress' Codex and API documentation
• Hacking up your templates to use all the power provided by WordPress

If you're not registered yet, you have until July 9th to do so on EventBrite. For more information regarding WordPress Montreal 2009, check out the official site, mailing list, blog, Facebook group and Twitter account or see what's going on by looking up the #wcmtl tag.

This will be my first talk on WordPress. I started working with WordPress as a platform not too long ago, when working at CloudRaker with Stéphane Caron, who happened to have a really nice jQuery plugin to replicate the behavior of the famous Lightbox, called prettyPhoto. Since WordPress uses jQuery (and so do most of its plugins), I figured it'd be a good idea to integrate his plugin in WordPress while adding flexibility. That's how it all started. I still can't believe I'll be telling anyone my take on how to do things, but it's happening!

I'll probably be using this post to mark my progress in the elaboration of my talk. I'd love to get feedback and comments on what I'm doing since this is a first for me. Stay tuned!

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.