First showcase of page sorting in WordPress

September 3, 2007

I have finished the integration of the nested sortable widget into WordPress. I have set up a Sandbox WordPress installation, which can be accessed here (use test/test for login, go to “Manage->Pages”, and click “Edit Page Order” in the end of the page list). I have also put up a diff file (untested), which can be applied to your WordPress SVN checkout if you want to try it out on your own instalation (Automattic folks, don’t apply this yet to the WordPress SVN, there are a few details left to be solved, such as compressing the JS code and others, as I explain bellow).

I have set it up to paginate at only 10 items (please add more pages to play with it, I am lazy), to make it easier to see this functionality (the final version should paginate at 50 or more “pages per page”). Besides that, it is pretty much as it should be in a final version. There are probably a lot of minor details in the overall interaction and appearance which can be improved, so I am waiting for suggestions.

Here are a few ideas, questions and dark spots, that I would like people to comment on:

  • Is the text used in the buttons/widget ok?
  • If the user changes the order of a few pages, doesn’t save, and navigate away, he will lose his changes. Should a “Are you sure?” warning be displayed in this case?
  • The position for the “Edit Page Order” button is ok? Perhaps it could it be duplicated or appear at the top of the original page list. Perhaps it could be a link. I think people shouldn’t use it that often, that is why I placed it the way it is now.

There is also a tiny problem that is bothering me a lot. The current version of Interface (1.2), that is in the WordPress SVN, has a bug that prevents the “AutoScroll” (which makes the browser window scroll when you are dragging a page near the edge of the viewport) functionality of the NestedSortable plugin to work. I don’t actually know where in Interface’s code this bug is, but I know it is fixed in its latest SVN version, which is the one I am using in all my examples (I have added it to my WordPress Sandbox and my patch, so you shouldn’t notice it). The problem is that the Interface from SVN is not JS compressed and is not unified in a single file, as is the 1.2 “stable” version. Adding it to WordPress would require doing that, and there are no “compile” scripts in the Interface SVN, as there are for jQuery, for instance. I don’t even know whether Interface is being maintained, so there might never be a 1.3 version out. I could disable it, but without “AutoScroll” it becomes obnoxious to drag the pages when you have long lists , which should be the case if you have more than 10 pages or so. You have to use the scrolling wheel, which some people don’t even have.

There is also another technical detail: I should probably add a “order_pages” permission to WordPress. I can’t use the “edit_page X” permission, as it is applied in an individual basis and there is no way to do that when you are ordering all the pages at once. Is it ok to create that? I will have to figure it out (never played with adding permissions to WordPress before), but I believe it should be no big deal. I also don’t know to what roles I should add it (Editor? Author?).


  1. This is awesome and something I’ve dreamt about having in WP for some time. So question, HAve you done and recording on the loading of the editor vs. the number of pages? Also , what about the number of levels?

    My reason for asking is I generally develop non-blog type sites that have more page, 50+. These pages match a heirarchy of the site’s IA so the depth of pages could be 4 levels.

  2. The information is sent on a very compressed way, using JSON. For example, for 22 itens only 2,2kB are sent. It doesn’t matter how many levels of nesting you have, the size/speed should be about the same. About the time the server takes to generate the info, it seems to be doing it pretty faster than it generates the regular page list.

    If you add more than 10 pages (in this example – it should default to a larger number) you will notice the pages will be paginated, what should be helpful for your use case.

    For 50 pages I think it should load pretty fast still. Fell free to add as many pages as you want, to test.

  3. may seem like a stupid question, but can this not be integrated so that there is no need to click ‘edit page order’, and to just use the layout as is to drag and drop? that would seem much more intuitive to me. Good work though

  4. It was a design decision not to alter definitely the way the current page list was displayed (there were a lot of caveats, if you are curious, check one of my first posts under “Google Summer of Code”). So, clicking the “Edit Page Order” and replacing the old list “on-the-fly” became the best way I could think of. Also note “Edit Page Order” will only appear it you have JavaScript Enabled.

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: