The final bits of GSoC

September 16, 2007

I am now considering finalized my work on the GSoC project (from now on call it voluntary work… ;)). After a lot of bug fixing and some documentation, I am releasing the 1.0 version of both NestedSortables jQuery plugins. Please, visit the plugins’ homepage to check out and comment on the documentation. I have compiled the scripts into compressed format and they are now about 75% smaller, and will download pretty fast.

After a lot of helpful comments from folks at the WP-Hackers list, I improved a few details in the WordPress page ordering. I also managed to fix all the remaining problems I mentioned in my last post (more about them later on), so I believe it is now ready to be rolled out in the development version. To try it out, you can check my sandbox (user: test / pass: test), download the development version of WordPress with it (up-to-date as of 19-Sep 2007 16-Sep-2007 WP from trunk), or apply it to your own working copy of WordPress from SVN trunk using this patch (you will probably also need this image, which I think can’t be included in the patch). I will submit the patch to the WordPress TRAC. I hope it gets reviewed and accepted.

Besides cosmetic improvements (animations, button position), I changed two configuration parameters for the NestedSortable Widget (can be easily reverted at wp-admin/js/edit-page-order.js), when compared to the first showcase. It is now paginating at 20 items. I also am turning on the “greddy” option, what means the list will be downloaded all at once, even though it will be displayed paginated. Why would I want to do that? Three reasons:

  • Each additional item in the list takes about 90 bytes, on average. So, if you had 1000 pages, it would be only 90kB to download. Downloading 90kB at once is way faster than downloading 5kB 20 times, mostly because of server processing.
  • Server processing is what takes longer here. When fetching just 50 items out of 1000, the server is actually loading the whole list, then filtering only what we want (yes, this could be optimized, but the issues with hierarchies make it a complex task). So, if we load tiny parts of the list 20 times, it should take 20 times more processing than loading the whole thing at once.
  • Paginating the list on the client is still important, because the JavaScript will get heavy on the client’s CPU when you have lists of more than 50 items to sort.

If you still prefer the old fashioned way, all it takes is setting ‘greddy’ to false in wp-admin/js/edit-page-order.js.

What did I have to change in WordPress?

Due to the component nature of the plugins I developed, very little had to be changed into the native WordPress code to add this functionality. The only ‘real’ PHP code created was for the data source that feeds the plugin with JSON and saves the page order, and it was less than 200 lines long. JavaScript was also minimal, since 99% of the logic was in the jQuery plugins I created. The other modifications were minor. Even the edit-pages.php was almost untouched.

I will briefly describe the files that were altered/added:

wp-includes/class-page-order.phpadded – this class encapsulates most of the “data-source” functionality, and takes care of both loading the page list, with pagination support, and saving it back to the DB.

wp-includes/class-JSON.phpadded – class by Michal Migurski that will convert php data structures to JSON (and also from, but I didn’t need it).

wp-admin/admin-ajax.phpaltered – Added two actions to serve as the data source for the widget, one for fetching ( ‘page-order-load’) and other for saving (‘page-order-save’) the order. The actions are small, since they use the Page_Order class.

wp-admin/edit-pages.phpaltered – Just a couple of lines to load the JavaScript and CSS that builds the widget, if the user has the permission to order pages.

wp-admin/js/edit-page-order.jsadded – This script will add the “Edit Page Order” button, that will build the NestedSortable Widget on the user’s demand. It also holds the configuration of the widget.

wp-admin/css/nestedsortablewidget.cssadded – CSS for the plugin.

wp-admin/images/progress_indicator.gifadded – AJAX loading animated gif.

wp-admin/includes/schema.phpaltered – Had to change this to add a ‘order-pages’ type of permission to the database. This is likely to break as the DB version number evolves.

wp-admin/includes/upgrade.phpaltered – Had to change this to add a ‘order-pages’ type of permission to the database. This is likely to break as the DB version number evolves.

wp-includes/version.php – altered I had to increment the DB version to make WP upgrade the DB and add the ‘order-pages’ permission.

wp-includes/script-loader.php altered – added the declaration for the JavaScript files I added, and the text with internationalization.

wp-includes/js/jquery/inestedsortable.js – added the first of my two jQuery plugins, compressed

wp-includes/js/jquery/jquery.nestedsortablewidget.js – added the second of my two jQuery plugins, compressed

Will I assemble it as a WordPress plugin?

The sort answer is no, unless there is great demand and strong reasons not to apply this to the core WordPress. Don’t take me wrong, I love plugins. But I don’t think this is good for a plugin, it is too much of a basic functionality. Most people won’t ever even look for a plugin to make sorting their pages faster, only in very special cases; they will just go ahead and sort them the hard way. There is already a plugin with this intention (my page order) and the author admits it doesn’t have that much demand. Making an analogy: car accessories are also great; but you wouldn’t be very happy with a car where the tires and the steering wheel were accessories.



  1. Hi Bernardo!

    This is Mae from Barcelona and I’ve been testing the Jquery plugins not for a very long time so I am quite new with it.

    I need a little help with your Nested Sortable Widget plugin and I’ve been trying to send my request to the JQuery mailing lists but I might be doing something wrong. Could you please help me?

    – I need to know if I can get the row id that is being dropped in some way

    – And also if I can restrict the number of possible levels where I can drop a row

    Thank you so much!

  2. Greetings, from Brazil, Mae!

    Unfortunatelly, you can’t restrict the levels of nesting yet, but this feature was requested quite a few times. If you would care to implement it (shouldn’t be very hard), I would gladly apply a patch.

    To get the dropped row it right after it was dropped you can alter the “jQuery.iNestedSortable.newCheck” function in inestedsortable.js, which gets passed the dragged element. This is a “hack”, but you can implement something more elegant (such as calling an user defined callback on newCheck), create a patch for that and send me as well.

    Good Luck!

  3. Thanks, Bernardo!
    If I succeed I will let you know.

  4. […] A quick search revealed that I’m not the only one bothered by the lack of drag/drop Page sorting functionality in WordPress.  In 2007, a Brazilian wrote a plugin for WP that does just this during the Google Summer of Code – https://bitsinashortbit.wordpress.com/2007/09/16/the-final-bits-of-gsoc/. […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: