I would also like to thank all those that tweeted my presentation, and all those who came and spoke with me after and through out Confoo.

Here’s my presentation:

The good people of PHP Quebec have asked me to speak at CONFOO this year! I am very excited about this presentation, I have spoken at many conferences and it is always nice to do one you have not done before.

I will be doing a session on WordPress theming, description below…

WordPress is NOT just a blog anymore!

For the seasoned WordPress developer or anyone coding in PHP, CSS, and jQuery, we will look at how you can take your theme to the next level. I will explain how theme architecture works, how to extend this architecture with custom template files, and how to create custom functions. I will also walk through the some interested CSS frameworks, like 960grid, implementing intermediate to advanced jQuery features, and how to customize the back end. Finally I will briefly discuss how to take your theme mobile using WPTouch and WPMobile.

What’s CONFOO

PHP Québec, Montréal-Python, Montréal on Rails, W3Qc and OWASP Montréal are proud to announce the first edition of the Confoo.ca Conference. From March 10^th to 12^th 2010, international experts in Java, .Net, PHP, Python and Ruby will present solutions for developers and project managers the prestigious Hilton Bonaventure Hotel, located in downtown Montréal.

There’s only 15 days left to register!

Hope to see you all there!

–

Check out some of the slide from other events I have presented at.

However, after much deliberation I have temporarily disabled the Lifestream feature, and decided to go with a portal page instead. I was inspired by quite a few one page sites. Check out One Page Love, its a great showcase!

The making of
The site is running on the current version of WordPress, yes I know, it’s probably over kill for a one pager, but you never know where it will grow from there.

One of the coolest features of this new design is the tool tips over the social icons. I know it’s nothing new but I really love this package I stumbled upon, jQueryTOOLS by Flowplayer.

Credit where credit is due
Thanks to evablue for the awesome photo of me from WordCamp Montreal! The social icons are a free icon pack from ThinkDesign.

Future work
I have plans to renovate dropthedigibomb and digibombinc as well…who knows what the future will bring!

Here is a small list to get you started, they are all built using the jQuery library and licensed under both MIT and GPL licenses.

ColorBox

The nice thing about ColorBox is that it works on Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8. This tool will pretty much load anything you need, it is really easy to modify at CSS level, image level, and the jQuery is pretty standard. One thing I did notice is that id tends to conflict with jquery-latest.js.

FancyBox

Great tool, updated often, lots of good documentation and examples.

Lightbox2

Lightbox is slowly becoming a standard and first choice for most developers. It is very user friendly if you are a nOOb to jQuery. Lightbox also has a very reliable WordPress plugin. You can see this plugin in in action on my portfolio.

Shadowbox.js

Shadowbox is written entirely in JavaScript and CSS and is highly customizable. This package is not jQuery (very similar), but very useful and has some nice effects. They offer both free and commercial licenses (30$-50$).

jQuery Dialog

jQuery dialog allows you to display floating windows. You can add scrollbars and drag features and they are easily customizable with minimal code.

If you have created anything unique or different with these tools, or want to recommend other alternatives please feel free to comment on this post.

So, why am I written this post? At almost every workshop or class I teach on WordPress  my students always ask the same questions “what is jQuery, and how can I add it to WordPress?” The answer is simple, jQuery is and easy way to add another layer of interactivity and creativity without having to worry about a lot of obtrusive Java or the bulkiness/complications that come with integrating Flash.

I’m not saying that jQuery is perfect, there is code that can conflict with WordPress or other jQuery additions, and not all JQuery versions are cross platform, however it is for the most part the best solution. In terms of an alternative for Flash, it can be very useful. Flash is not bad, but it is not always the answer either. If you require/desire some simple interactivity such as: sliding portfolios, galleries, drag and drop, hide and reveal, rollovers, tool tips, basic fading elements, why bother spending all that development time in Flash and worry about players and plugins?

Here are 2 really good examples of jQuery as an alternative to Flash  http://www.wearebuild.com and http://www.x3studios.com

Ok, enough talk, let’s get started. What is jQuery for those of you who don’t already know?

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. – JQuery.com

Loading  jQuery

There are a couple of ways to do this in WordPress.

The first and easiest way is to load the jQuery library that comes bundled with WordPress. To do this we use the wp_enqueue_script() function, which automatically enqueue’s the JavaScript file in your theme header. Open your header.php file and paste the following within the <head> and </head> tags:

<?php wp_enqueue_script("jquery"); ?>

*I have heard that this does not work all the time in WordPress 2.8.1

Quick tip: One thing worth taking note of is the conflict with prototype which may cause it to not work in IE. Be sure to call the noConflict() method.

$j = jQuery.noConflict();

And you can call any jQuery functions like this:

$j(this).fadeTo("normal", 0.5);

The second way to load jQuery is to call it remotely from Google, this way you can be assured you’re always using the most up-to-date version. Otherwise, the version included inside WordPress may be dated.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

The third and final way is to load jQuery from your server, so if you have downloaded a specific version you can enqueue it internally. To do this, open your header.php file and paste the following within the <head> and </head> tags:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/includes/js/jquery.js"></script>

*I usually put all my scripts in an includes directory located in my theme directory. You could also use an absolute path if your file is located elsewhere.

Now the fun begins! Once you have loaded jQuery you can take advantage of hundreds of great libraries for adding more interactivity or complexity to your themes.

Here’s a list of some of my favorites

Lightbox

A  light Javascript used to display overlay images on the current page. The original Lightbox was released in 2005. Since then, there are many scripts released with similar features using different approaches and Javascript libraries.

FancyBox

FancyBox is a jQuery plugin that is designed to replace the overused Lightbox. It has similar features, but better transition effects (the design is Mac-like).

jCarousel

jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. The items, which can be static HTML content or loaded with (or without) AJAX, can be scrolled back and forth (with or without animation).

Code Slider

Coda Slider is a jQuery plugin that imitates the panel sliding effects as seen on the Coda website.

jQuery Tabs

jQuery Tabs is a powerful and flexible jQuery plugin that lets you create customizable tab navigation (highly recommended).

jQuery Tool Tip Plugin

Another nice Tooltip plugin.

jQuery Accordion

This plugin creates an accordion menu. It works with nested lists, definition lists, or just nested divs.

jQuery Validate

A very plugin that allows you to build client-side validation and Ajax form.

More resources

• jQuery
• A list of jQuery plugins for WordPress
• More jQuery stuff
• net-tuts – Lot’s of great jQuery and WordPress tutorials

Enjoy!