Admin Drop Down Menu 2.0.3

In: , , , On: 2008 / 04 / 03 Short URL: http://ozh.in/he

Updated: version 2.0.3 fixes the media uploader bug mentionned by kind commenters. Sorry for the inconvenience!

After nearly 33.000 downloads of my Admin Drop Down Menus (woweee!) I finally took some time to fix a bug that has been present since the very begining: incorrect links in sub menus below top level links added by plugins.

Admin Drop Down Menus

Version 2.0.3 is waiting for you, go download it. Did I mention it looks awesome with Fluency ? :)

The Lightbox Clones Matrix: Compare 30+ Lightbox Scripts

In: , , , , On: 2008 / 04 / 03 Short URL: http://ozh.in/hd

Early 2006, a cool guy named Lokesh Dhakar introduced Lightbox, a unobtrusive script used to display large images using modal dialogs over a black faded background. A great script, really. Since, every once in a while, someone comes up with their own take at this concept, using this or that javascript library (jQuery, Prototype, Mootools, YUI, you name it) and supporting various types of objects: images, flash objects, videos, inline HTML content, iframes, content fetched via an Ajax call, etc…

Recently, thinking about ditching Prototype here on this blog, I wondered if there was any cool Lightbox clone for jQuery. Man, there are dozens of them. How am I supposed to chose the one that will suit my needs? I started to write down a few URLs and comments, then it occurred to me that I could make something cooler. A few coding later, here is the Lightbox Clones Matrix!

Lightbox Clones Matrix

I've listed more than 30 scripts, detailing for each one:

  • Its javascript size (not considering CSS, images or anything else)
  • The library needed, if any, mentionning its javascript size. I opted to compare uncompressed javascript file sizes, as it (sorts of) reflects the complexity and/or power of the library, regardless of how packed/minified/obfuscated it usually ships.
  • The total javascript size. This data won't interest someone already using a javascript library on their site, obviously.
  • Image support
  • The ability to group images into a single collection, allowing for easily browsing through images within the same overlay
  • Any other common object supported: inline content (ie content already existing in the page, but typically hidden), iframe, content fetched by an Ajax call, video, Flash.

To make things cuter and quicker to read, everything is summarized by a row of pretty icons (mostly coming from the wonderful Silk set)

Lightbox Clones Matrix: the comparisons

Of course, what would be the point of it if you couldn't quickly restrict you search to a few criteria? There's a handy filter set to make your selection easier. All the options are logical "OR", ie selecting several features will list scripts with at least one of them. Note that you can shrink the filter box if you don't need it.

Lightbox Clones Matrix: filters

Overall I had some fun making the Lightbox Clones Matrix. I hope it will be actually of any use to someone. Bookmark it, just in case you need it in the future! ;)

Pretty Comments is a tiny (1kb) jQuery plugin that makes textareas grow as content goes in. This should make a pretty cool addition to any jQuerified comment form. I think I’ll add this here to my own theme when I have some time to do some coding in order to get rid of Prototype. (1) «

WordPress 2.5 ShortCodes API Overview

In: , , , On: 2008 / 03 / 28 Short URL: http://ozh.in/hb

WordPress 2.5 comes with a very handy API that plugin authors should love: shortcodes, ie. BBcode-like tags, that are parsed when found in post contents. The API is very easy to use, and well done enough that it's relatively foolproof.

Shortcode types

The API allows for all the possible combinations and forms you'd think of: selfclosing or open tags, attributes with single or double quotes.

< View plain text >
code

  1. [tag]
  2. [tag /]
  3. [tag attribute="value" /]
  4. [tag attr1='value1' attr2="value2" ]
  5. [tag]enclosed content[/tag]
  6. [tag attr="value"]enclosed content[/tag]

The Concept

First, you have to define a function that will take care of your shortcodes, their potential attributes, and any enclosed content:

< View plain text >
php

  1. function my_shortcode_func($attr, $content) {
  2.     // $attr is an array of $key=>$value pairs
  3.     // $content is a string containing the enclosed content
  4.     // ... do something with $attr and $content
  5.     // return the expected result
  6. }

Then, to register your new shortcode so that [tag attr="value"]content[/tag] is processed as wished by my_shortcode_func(), you just add:

< View plain text >
php

  1. add_shortcode('tag', 'my_shortcode_func');

All API functions

The API comes with a set of mostly self explanatory functions you can use:

< View plain text >
php

  1. add_shortcode('tag', 'function_name'); // register a new shortcode
  2. remove_shortcode('tag'); // unregister
  3. remove_all_shortcodes(); // just as it says
  4. $return = do_shortcode($content); // apply shortcodes to content without echoing anything

Examples

[tag1] → Some Longer Text

< View plain text >
php

  1. function shortcode_example1() {
  2.     return 'Some Longer Text';
  3. }
  4. add_shortcode('tag1', 'shortcode_example1');

[tag2 param="something"] → Some Longer Text and something

< View plain text >
php

  1. function shortcode_example2($attr) {
  2.     return 'Some Longer Text and '.$attr['param'];
  3. }
  4. add_shortcode('tag2', 'shortcode_example2');

[tag3]something[/tag3] → You just said "something", didn't you ?

< View plain text >
php

  1. function shortcode_example3($attr, $content) {
  2.     return "You just said '$content', didn't you ?";
  3. }
  4. add_shortcode('tag3', 'shortcode_example3');

[tag4 any attribute]something[/tag4] → Attributes: {list of attributes}. Content: {content}

< View plain text >
php

  1. function shortcode_example4($attr, $content) {
  2.     $attributes = '';
  3.     foreach ($attr as $key=>$value) {
  4.         $attributes .= "$key: $value\n";
  5.     }
  6.     return "Attributes: $attributes<br/>Content: $content";
  7. }
  8. add_shortcode('tag4', 'shortcode_example4');

Experiment and read more

Test and experiment: all the examples above are gathered into this simple Shortcodes plugin example (rename as shortcodes.php and put in your plugin directory). It's interesting to try to break things with unexpected attributes or enclosed content: the API is pretty foolproof and should ignore things just as you'd thought it should.

Read more : the whole API can be found in wp-includes/shortcodes.php and is relatively well commented. Jacob Santos also has a nice and detailed overview of the API

One of the most impressive and interesting changes in WP 2.5 is the built-in gallery. A page on the Codex gives some insight on how to use it: Using the Gallery shortcode. (0) «
Cool news: WordPress Custom Admin Branding supports my Admin Drop Down Menu! (0) «
Great news: next version of Fluency will support my Admin Drop Down Menu! (2) «

Going Down The Slopes

In: , , On: 2008 / 03 / 15 Short URL: http://ozh.in/h7

Expect some spam going through and comments stay unanswered, I'll be AFK for a little more than a week, skiing in the Alps instead of updating my plugins for 2.5 ;)

Skiing is good for you

Per User Custom Stylesheet in WordPress 2.5

In: , , On: 2008 / 03 / 14 Short URL: http://ozh.in/h6

WordPress 2.5 introduces a neat option: per user Admin Color Scheme. This means that each user can select a stylesheet they like best for the whole admin area. Now onto the fun stuff: adding a per-user selectable custom stylesheet for your blog.

Admin Color Scheme

Concept

The new function behind this feature is wp_admin_css_color(), which is used as following:

< View plain text >
php

  1. wp_admin_css_color(
  2.     $shortname, // eg 'mycoolstyle', used to store setting in the wp_options table
  3.     $longname, // eg 'My Cool Style'
  4.     $css_url, // URL to your custom stylesheet
  5.     array(
  6.         $color_code_1, // a HTML color code like '#123456'
  7.         $color_code_2, // or 'red'
  8.         $color_code_3, // or 'rgb(100,100,100)'
  9.         ... // any number of color codes you want
  10.     )
  11. );

This function call populates an array ($_wp_admin_css_colors) which is then used on the profile page to display the cute colorful little table cells. In your plugins, hook the function call into 'admin_init', and you're done.

Example

Say you're a Brazil fan and you want to make a plugin that adds some sunshine into your admin area. You would create a custom stylesheet that would reside into your plugin directory, and the plugin itself would be something like:

< View plain text >
php

  1. <?php
  2. /*
  3. Plugin Name: Admin Custom CSS: Brazil!
  4. Plugin URI: http://planetozh.com/blog/
  5. Description: Plugin example: add a per-user custom CSS to the admin area
  6. Author: Ozh
  7. Version: 0.1
  8. Author URI: http://planetozh.com/
  9. */
  10.  
  11. add_action('admin_init','custom_admin_css_brazil');
  12.  
  13. function custom_admin_css_brazil() {
  14.     $plugin_url = get_option( 'siteurl' ) . '/wp-content/plugins/' . plugin_basename(dirname(__FILE__)) ;
  15.     wp_admin_css_color(
  16.         'brazil',
  17.         __('Brazil'),
  18.         $plugin_url . '/wp-admin-brazil.css',
  19.         array(
  20.             '#3c940c',
  21.             '#fffc01',
  22.             '#3005eb',
  23.         )
  24.     );
  25. }
  26. ?>

Real example for the not-so-DIYers : I made this quick plugin and its very quick stylesheet (be warned, the visual result is rather ugly): Plugin Example: Custom Admin CSS.

Braziiiil

Note the cool CSS little trick in the options form :)

Five New Things In WordPress 2.5

In: , On: 2008 / 03 / 14 Short URL: http://ozh.in/h5

In a few days, the next blue thing will land: WordPress 2.5 should come to a download link near you. Being a fairly old WordPress user (I've started looking into it when it was version 0.72 and this very blog was first online on version 1.02) I can remember every major release and the new features they introduced. No doubt, I will remember version 2.5 as one of those memorable ones.

A new Admin look

This is the obvious visible part of the iceberg: the whole admin area has been completely restyled. Some will like it, some will hate it, but as a matter of fact you will have to get used to it.

New Admin Look

The admin menu in particular has been redesigned, aiming at simplifying day-to-day tasks for the average blogger: links to your regular blogging activities (writing content, managing content and managing comments) have been made more prominent, while the less frequent tasks (activating plugins, managing users and options) get more discreet links.

A native plugin updater

This feature simply rocks! When a plugin you run gets outdated (ie a newer version has been uploaded on the official repository) you get a notice telling you about the update. From within your plugins page, you can now update the plugin, without having to manually download or upload anything to your web server.

Update plugins

A new door has been opened with this file system, that will probably bring more goodness in the near future: updating themes, installing plugins, and obviously hopefully updating WordPress itself.

An improved media uploader

When writing a post, I find it crucial that uploading an image to illustrate what you're blogging about doesn't slow the publishing process. The new uploader is definetely in my opinion a step in the right direction. Managing your previously updated files is a lot more user friendly than before, and the uploading part in itself is greatly improved by a flash applet that, against all odds, I decided to really like to the point I find this one feature a good reason to upgrade your WordPress setup. "One click uploading", can it get faster than this?

New Lightning Fast Uploader

A widget based Dashboard

The Dashboard gets sexy: most parts are customizable real time, with no dirty hacking involved. This is yet another door that gets wide open for more fun and creative stuff: in the near future I guess we'll see more Dashboard plugins bringing crazy widgets in. What would you like? A small "quick post" mini forms? More feeds? A calendar, to-do lists, some weather forecast?

Widgets in the Dashboard

The Dashboard has been a boring page for too long now, it's high time it gets some well deserved attention!

Full feeds

OK, this one is no particular big deal, but I like it.

In the old days, feed items were not cut by the "More" tag and would always return full content. This was one of the reasons I made Better Feed, a plugin that amongst other things made feeds obey this teasing "More" tag. Then, it changed at some point (can't remember when, exactly) and feed items were returning partial content, cutting after the "Read more" link.

Now guess what? This has changed again, reverting to the original behavior: full feeds, no matter the "More" tag. I guess this is just a conspiracy to make me update my Better Feed plugin again :)

Overall

At first, I must say I was quite disappointed by the new interface. At first glance, I saw many things I didn't like, mainly the way admin links are splattered all over the header (which is fixed by my ubercool Admin Drop Down Menu).

The thing is, the more I'm using it (updating plugins or just hacking here and there to understand how new features where working under the hoods), the more I think this is a really great release. It has really cool features and some of them let us expecting very cool stuff in the future.

One more word, of importance: while WordPress 2.3 did bring some changes that required a few hours of sweat to get things working smooth due to the introduction of the tag system, WordPress 2.5 does not substantially change the "core engine". Upgrading to this version should be, more than ever, totally harmless to your blog and shouldn't break anything. The worse that will happen might be a plugin looking ugly in your admin area.

 « Previous page 
 Next page »