Easier way to change page order (AJAX/jQuery?)

[FireMotion]

When having a lot of pages, they get harder to manage (see also Ticket #2004 [Pages page should page]).

When needing to change the page order, it's very inefficient to manually change the page order value, or whole series of page order values, just to move one page up or down the list. Suggestions for alternative ways to change the page order are:

In "Manage - Pages"
1) With up/down arrows (page goes one up or down when the button/link is clicked).
2) or: Drag+Drop (The post/page settings can be dragged and dropped, so why can't this, too?)

[ryanscheuermann]

+1 for page ordering w/ arrows (w/ AJAX too!)

I've thought about writing a patch for this myself. Keep in mind though, if doing up/down for page ordering, the patch also has to take into account page hierarchy.

Drag/Drop might be difficult with heirarchy issues

[FireMotion]

Right now, the only thing that can be changed on Manage Pages is deleting pages, which done through the Delete button.

The only useful thing that can be added that I can think of is the page order. So when doing it with drag-and-drop, Manage Pages could have a Apply Page Order button. Submitting/processing that wouldn't be too hard, even with permissions in mind. (But the drag-and-drop scripts would require some work).

On the other hand, when doing it with Move up and Move down buttons, this is easier to code (both displaying it, and submitting/processing it, permissions included.

[davidhouse]

Drag and drop would make a nice JS project. It's not impossible even with the hierarchy, see Firefox's bookmark manager for an example for how the interface might look.

Any takers?

[FireMotion]

Seems like doing it through Move up and Move down buttons is not really an options, as it will need to reload the page with each click. And people don't like that apparently: See also ticket #2561.

I guess AJAX is the way to go (but that's not my area, so I'll just be the submitter here :P)

However, it might be hard if #2004 checks out, since, if an item is at the bottom of the page, it can't be moved down (same with if it's the first item on the page, it can't be moved up. Or you can't move any item off a page to another).

Changed to summary to reflect the AJAX question, so it may be able to attract the AJAX guru mdawaffe :).

[ryanscheuermann]

For reference, check out the functional tests for Scriptaculous 1.6.1. He's implemented a Drag/Drop Sortable Tree function. I think it's still experimental though.

In regards to ​#2004, unless the Drag/Drop JS was REALLY kickass to scroll through the pages when you dragged the item over the "Next Page" and "Prev Page" links (AJAX ahoy!), this would nix paging on Pages page.

Also, I'm yet to see an implementation of Drag/Drop reordering that degrades and is accessible. If it's been done, link me, I'm really curious to see how. Or is admin accessibility just being thrown to the wayside these days?

Up/down arrows w/ AJAX list management would degrade nicely, but that presents a per-move page reload tradeoff, like you mentioned.

Or is this a matter of the JS-enabled get a cool new feature, and those without do it the old-fashioned way (Edit->Save, Edit->Save)?

[skeltoac]

Those without JS will always be stuck with edit, save, edit, save... That is all you can do with a non-JS browser. Drag-drop isn't possible with plain HTML. Take it up with Tim B-L if you don't like it ;-)

Scriptaculous is no stranger to WordPress. It is distributed in the Widgets plugin. It is not a good solution for this problem.

There is not presently any script known to us that can do all of the things on our wish list. The closest match is Brothercake's DBX, which is what we use for the Write pages. It is keyboard-accessible but it is not meant to work without Javascript.

To make a sortable list that degrades for non-JS users, we would have to put additional markup in the list (links to move each item up/down) and augment DBX to remove those vestigial links.

[mdawaffe]

This would be relatively straightforward using DBX and nested dbx_groups.

Rewrite page_rows() such that the HTML reflects the page hierarchy. Pages without children wouild just be a draggable DBX element. Pages with children would be a draggable DBX element and would also contain a new dbx_group in which all its children were elements. You'd be able to to move each page (together with its children) within the list. Until DBX supports dragging items between different dbx_groups (apparently, this is in the works), you would not be able to change the hierarchy, just the ordering; you could only reorder children under their current parents.
DBX is an accessibility dream; I don't believe there would be any problems there.

Then just have a regular old button at the bottom of the screen "Save Page Orders" that would submit a regular old form populated by JS with the value of the DBX cookie. No AJAX needed. In fact, doing AJAX on every drag and drop would be a mess.

You'd have to be carefull with the hierarchical HTML so that list-manipulation would play nice. You wouldn't want to delete a parent page and have all its children disappear from the screen as well. Stick with tables; it should be a flat table (no nested tables) with nested *tbody* elements that define the dbx_groups and draggable elements. (I'm not sure if that'd be valid HTML... anyone know?).

[mdawaffe]

That was supposed to be "If you want to stick with tables...". Nested lists would work as well as long as you were careful. It'd be semantically better than the current implementation, but would be inconsistent with the Manage Posts table.

[FireMotion]

Another suggestion to make life easier:

In Edit Page maybe there could be the Move Up / Move Down buttons, in addition to the existing input box. Having those buttons is more user-friendly for anyone. Especially for clueless newbies.

[FireMotion]

Although the description is different, this issue has been mentioned in ​Google Summer of Code 2007 for the ​Wordpress Project as an idea: ​Hierarchical Page (list) Management using jQuery.

[berpasan]

I will be working on this improvement as a Google Summer of Code project (just beginning). I will be happy to receive any comments or suggestions.

[cpoteet]

Here's the answer: ​http://geekyweekly.com/mypageorder

[berpasan]

This plugin has a lot of merit, but there are a few issues (in my opinion) that make it not usable to be included in the wordpress core and differ from what I am going to implement:

• It adds another page in the admin are just for page ordering. The idea is to alter the page list itself to provide such functionality, and make it extendable (the javascript part) so that it can also be use in other parts of the wordpress admin.
• The way it order subpages, even though it works, is somewhat "now ajaxian" and would be impossible to implement in the main page list.
• It uses scriptaculous and prototype, and it is defined by the Wordpress team that jQuery is now the "oficial" javascript framework to be used in new implementations. Ok, if it was exactly what the wordpress team wanted I guess this wouldn't be a big problem, since what is done is done (like the widgets, that also use prototype), but it doesn't seem to be the case.

Anyway, this plugin does serve as an starting point and sheds a few ideas. I have overlooked its code, and seems pretty simple. Thanks a lot for the tip!

[froman118]

I'm the author of My Page Order (as well as My Link Order and My Category Order) and the intention of my plugins has always been to provide a quick and easy way of setting a manual display order for pages, post categories, link categories and links, something not easily done with WP out of the box.

One possible problem I see with adding the ability to order pages on the management panel is that none of the list pages are used to modify data except for marking records for deletion. Adding drag and drop ordering to this list would potentially open up all the list pages to more complexity (i.e. adding a category dropdown on each blogroll row ).

Also need to keep in mind that not everyone displays pages in their themes using the page order. For those that list by id, title, slug, creation date, modified date or author, will an option be provided to list the pages in their desired order like the dropdowns available on the Blogroll list?

If WP developers are ready to push functionality from the edit pages out onto the list pages then sure go for it. Through my experience developing and supporting my plugins (My Page Order being the least popular) I'm just not convinced there's that much demand for this out there. Only a subset of users use the page order in their themes and an even smaller number have enough pages that need to be reordered frequently where the built in functionality becomes cumbersome. Those people that demand more control over the order then have plugins like mine to turn to.

It's a good idea but I'm not sure if the increase in convenience outweighs the increase in complexity. Anyone else have thoughts on this, I'm new to the WP dev scene so some more experienced voices would be welcome.

[berpasan]

Thanks for the great advice, froman118 (and also for the plugin!). I agree with a lot of the points you mentioned, specially the one about the user having the possibility to choose how to order the pages in the page list, similar to the Blogroll. I think it definitely needs to be done. To simplify the interface, if the user was not using the page order number to order the pages, the drag and drop control could disappear or be deactivated.

I agree that this is not a functionality that people would "die for", but I believe it adds a lot to the perceived quality of Wordpress as a product. The solution of changing the page order by number inside the editing panel felt like a dirty patch from the first time I used it.

People won't change the page order so frequently and will generally only mess with it when they are initially creating the pages, so downloading and installing a plugin just for this would apply only to users who have really special needs and manage a lot of pages frequently (the vast minority). Most users will figure out how it is done, get a little pissed of how laborious it is, do it and move on, not even thinking there would be a plugin to improve that. Perhaps this might even be one of the reasons why people don't use page ordering that much (although I see it on most of new themes). You also can't ignore the fact that the natural evolution of Wordpress is to become more and more a complete CMS, and pages are very important in this context.

The idea in this project is to try to create something that could be reused in other places of the admin, where ordering is needed or could be used. Just like the other plugins you designed for categories and links.

If complexity in the user perspective is what you are talking about, I agree it is really important to try to minimize it and I think it can be done in this case. You can't forget that in the page editing the "Page Order" field would go away, and things would be neater there (and more intuitive in general).

I agree that this is a detail, but I think attention to details does pay a big role in something's success (I believe Wordpress' success is in great way due to how well thought most of its details are). I like to mention the example of the new Apple's MacBook power adapter: it has a minimal impact on what the user generally does with a notebook, but it is one of the first things people notice and say about their Macs. The "Woow" effect and attention to details definitely play a major role on how much people will love or hate to use a product.

I will be giving details on the project in this blog: ​http://bitsinashortbit.wordpress.com

[berpasan]

I have finished my GSoC project. Please, check ​this post for more information and to be able to see the demos and download the patches.

[berpasan]

This is the patch as of 19-september-2007. If you need it updated to the latest version of trunk just ask me and I will send it here.

[froman118]

Turned out pretty good, looking forward to seeing it included in Wordpress so I can finally retire my plugin.

[DavidSzp]

+1 As a user who is using or helping others use WordPress as a CMS for three different websites, page order is extremely important to me when using it in this context! It is currently a very frustrating thing to change with the current solution. Even having a row of textboxes you could fill in order numbers in on the Manage Pages page would be nice, but drag and drop would be much better! I would love it if this patch were applied to core!

Additionally, moving from a "page order number" concept to at least a dropdown on the page edit form saying "this page is after: x" with a list of pages to select from would make this at least a little more simple than the way it currently is. Now, I have to edit the pages before and after a particular page just to see what their order numbers are before I edit the actual page I want to change. See the In Series plugin for what I'm talking about, the way it lets you pick where in a series a post goes.

I'll stop drooling over this patch now :-)

[Jairus]

Are the devs interested in adding this to the core? It's been sitting here for a few months, and it's great code.

[bentrem]

berpasan's documentation was updated 13NOV07:
​http://code.google.com/p/nestedsortables/wiki/NestedSortableWidgetDocumentation

And his blogpost about snags w/jQuery is dated 17OCT07:
​http://bitsinashortbit.wordpress.com/2007/10/17/new-minor-version-of-nestedsortable/

cpoteet's suggestion, "My Page Order" plugin, was updated 30SEP07 ("Checked compatibility with WP 2.3"):
​http://geekyweekly.com/mypageorder

​GSoC2007 "Hierarchical Page (list) Management" apparently wasn't updated after the summer ... last changed MAY07.

​Hierarchical Page (list) Management using jQuery
by Bernardo de Pádua dos Santos, mentored by Michael D Adams (no date) at code.google is a good description of WTBD, but leads to no resolution.

[bentrem]

*re-jigged for email*

​berpasan's blogpost about snags w/jQuery v1.2, dated 17OCT07: http://bitsinashortbit.wordpress.com/ ... /new-minor-version-of-nestedsortable/

[pishmishy]

Bumping milestone for feature freeze.

[youngmicroserf]

Why milestone 2.9 and not 2.8? JS flexibility has improved 2.7 to an enourmous extent, why not keep improving the system in this direction as soon as possible? There are plugins like Joel Starnes' page mash (which is written for mootools, though, I think) that demonstrate the immense usefulness of reordering with AJAX. Page mash has been downloaded more than 10,000 times, according to the author's home page. Not millions, but clearly not a fringe proposal. Thanks for consideration for 2.8!

[filosofo]

Replying to youngmicroserf:

Why milestone 2.9 and not 2.8?

That's because patches are usually set to the next version for tickets that have current patches (this patch is quite outdated), and the one after that for proposed new features that don't.

[blonkm]

Please check ​management extended plugin as well

[ShaneF]

Patch is again outdated. Please update and notify and I will test. Being moved to 2.9 as well since this a major change to the system. If there is enough time to test this, I think it can be in 2.8, but right now it's really close to release.

Also create the .js files to to follow the .js file conventions in the script-loader.php file. dev and have one of them be the uncompressed version.

[berpasan]

I can update the patch to the current version of WordPress, if there is real interest in applying this to core.

It probably won't be so easy since it was designed to use the interface.js plugin for jQuery, which only works well with jQuery upto version 1.1.4, and I see you are already using 1.2.6 (at least in WP 2.7.1). I can do some testing to see if I can get it to work flawlessly with jQuery 1.2.6, but I guess it won't (it didn't with jQuery 1.2.1). I will probably have to port my script to use jQuery UI (ui.sortable.js), it will be some work but it is feasible, so I will only do it if there is real interest.

If you are guessing why I didn't use jQuery UI intead of Interface in the first place, it's because it didn't exist back then (almost 2 years ago).

[bryan868]

This could really use some attention for 3.0. The current "Page Order" via numbering has been janky for far too long.

[strider72]

Anyone interested in working on a patch for this might also take a look at the PageMash plugin. It has a pretty solid Ajax page re-order interface.

[WraithKenny]

Starting from PageMash sounds like a great idea, the plugin is very useful. Perhaps re-skinning it to match the rest of the WP UI, kind of like how the widgets drag-n-drap look.

Other considerations:

1. A collapsible panel functionality (jQueryUI) for hiding child pages would be nice
   
2. I don't know how to handle accessibility. Tab order selecting, with a button link for toggling the move function, then arrow keys for reordering? I don't have any experience with this. (Not sure if the widgets drag-n-drop is accessible either.)

[scribu]

I would like to direct your attention to a closely-related feature that has been scheduled for WP 3.0:

#11817 Better Menu Management

Please provide feedback there.

[johnbillion]

See also the ​Page Manager plugin which gives a really nice drag and drop interface for pages and handles nested pages very well.

A note on accessibility/non-JS - it might be sufficient to display a column for the menu_order field (as a small text area). This would be dynamically replaced by the drag and drop handler for users with JS.

[sillybean]

The ​Simple Page Ordering plugin works with 3.2.1 and 3.3 trunk (as of this moment) and solves the problem more neatly than any of the other solutions. (It even works with ​Sidekick, which astonishes me.)

[helen]

#14333 was marked as a duplicate.

[helen]

Bringing over my last comment from #14333:

Would still love to see what we could do to have a better page ordering interaction - wouldn't be surprised if there are some other duplicate tickets kicking around. Maybe no-JS support is as simple as keeping the field and hiding it when JS is available, and we can look into accessibility links like the menus system has. The checkbox column has some vertical space, could do arrows, maybe.

I guess there are some base issues with drag-and-drop, though, like what you do over a page break in the list table. Anybody want to explore this some more? The plugin is a great start (and not just saying that out of bias).

Also marking as a good-first-bug - not necessarily a walk in the park, but pretty self-contained.

[KalenJohnson]

Arrows would be good for quick adjustments from Pages, but I wonder if a dedicated sorting page where all pages are shown, or at least many more than the standard Page view.

If only the title was shown along with less padding above and below the title, many more pages could be shown, and drag and drop might become more manageable. Perhaps arrows for moving up and down, along with arrow buttons for sending to the top or to the bottom.

[helen]

This is still self-contained and ripe for exploration, but I think the overall feeling of good-first-bug is naturally and understandably shifting toward not just self-contained, but also fairly small and not complex.

[hijiri]

I developed Intuitive Custom Post Order plugins ​https://wordpress.org/plugins/intuitive-custom-post-order/
Intuitively, Order Items (Posts, Pages, and Custom Post Types) using a Drag and Drop Sortable JavaScript.

[benjamin.lupu]

Hi everyone, like @hijiri, we've tried to tackle the page management problem with the Advanced Page Manager plugin. We've done a lot of research to build it and so far users seem to be happy with it.

I believe (and hope) that from the UI and technical point of view, it might help. Pages are massively used when using WordPress as a CMS (posts often becoming a News category). But the UI to manage them is clunky.

Let me know.

​https://wordpress.org/plugins/advanced-page-manager/
​http://uncategorized-creations.com/advanced-page-manager/

[paaljoachim]

A lot of people have created ordering of posts and pages plugins. A few have also made tree view plugins.
I have gathered a bunch of plugins into this article:
​http://easywebdesigntutorials.com/drag-and-drop-page-ordering-in-a-tree-page-view-wordpress/

It would be nice if we could finally have this project moving along again. Having ordering and a tree view of pages/posts etc would be of benefit for very many people.

Edit:
One plugin really stands out WP Nested Pages: ​https://wordpress.org/plugins/wp-nested-pages/ With some modification of the plugin and it would fit right into core covering drag and drop and a tree branch view.

[Kochhase]

hello team,

one of this plugins should be in core for 4.5!!

​https://wordpress.org/plugins/wp-nested-pages/

or
​https://wordpress.org/plugins/cms-tree-page-view/

for a real CMS we need his feature. please ask Pär Thernström or Kyle Phillips

[SergeyBiryukov]

If anyone's interested in bringing this into core, see ​Features as Plugins in the handbook for the process.

[husobj]

I think if something like this is introduced to core it would be nicer if it worked drag-n-drop in the current post list view rather than in a separate tree view like CMS Tree Page View and other plugins.

The drag-n-drop methodology would then tie in with reordering menu items etc.

The UI for the Nested Pages plugin mentioned above is different from the current Post List UI but I do like the ability to expand/collapse nested pages.

Most recently I have been using the Simple Page Ordering plugin which adds drag-n-drop pretty seamlessly into the existing UI: ​https://wordpress.org/plugins/simple-page-ordering/

Just my thoughts.

[Stagger Lee]

I really would like something like that in the core.
There are some plugins for it, but seems as developers are not so deep involved in core code. Or simply dont have time for it.

Some undesired effects with those plugins:

• They can influence ordering in backend of unrelated things.
• They really can mess with ordering od images in gallery.
• Tremendous slowdown of backend and frontend.

• Most important, they mess inside ordering in widgets, say post/comments lists in widgets (not something anybody want).
• Etc...etc..

[strider72]

This might be a good one to integrate into Core: ​https://wordpress.org/plugins/simple-page-ordering/

Made by 10up. Nice, elegant design that totally integrates into the existing interface.

EDIT: I see @husobj beat me to the punch!

[johnbillion]

As this ticket is now approaching its tenth birthday, we need an actionable approach to tackling it otherwise it will continue to go nowhere. The only real way for that to happen is to take the ​feature plugin approach.

The first step would be to collect a list of the most popular plugins available that provide hierarchical post type ordering, and start assessing what works well and what doesn't, from a technical, UX, and a11y point of view.

If anyone wants to coordinate such a feature plugin, feel free to comment here or bring it up in the #core channel on Slack and go from there.