The drag and drop method of ordering items in an option table is very popular, and also extremely useful. Rather than forcing users to manually enter “order” numbers to sort items the way they want, they can simply click and drag the items into the desired order. I use drag-and-drop ordering quite a bit in my plugins, and would now like to show you a simple example of how you can do it too.
To start, I have created a very simple plugin that does little more than setup a plugin option, user add_option(), and then outputs the contents of the option into a table on the plugin settings page. The idea is that each row in the table should be draggable, so that the user can define the order of the items in the table. So by clicking and dragging, the user can place the initially fifth item at the very top, or anywhere else he or she so desires.
Enabling drag-and-drop on the table is done with the jQuery UI Sortable library, which can be loaded into WordPres with wp_enqueue_script(‘jquery-ui-sortable’).
Saving the new order of the plugin options is done via ajax, using the wp_ajax_{action{ hook.
In the case that you have trouble following the above video, check out these tutorials:
Update
As pointed out by Thomas in the comments, I have not included a nonce check to verify that the ajax processing function is only ran when it is supposed to. For an extra measure of security, and in ALL actual implementation of this code, you should use the wp_create_nonce() and check_ajax_referer() to ensure that everything is secure.
Update 2
In order to fix a bug where the $dad_list options were created by default upon activation, I’ve updated the download files to include a check for !is_array($dad_list) in the activation function.
If you are a premium, then you can download the source code for this tutorial below. The download includes both the starting point plugin (that I started with in the video) and also the finished plugin.
Check out the list of benefits you receive by registering, or join now!
Good tutorial, Pippin! But where is nonce and check_ajax_referer check? Not that anything in this tutorial will trigger an unwanted move/save, but you can never assume upon a user that same grace when they go out on their own. 🙂
That is very, very true! I’ll add in a note about that.
Not that I’m too lazy to watch the entire video or anything 😉 but does this address drag ‘n drop ordering for things like the posts, pages, custom post type tables? If not, make it into a plugin and you’ve got yourself a buyer 🙂
It does not exactly address that, but the techniques are applicable to that situation. The only real difference is the save method. I would make a plugin to drag and drop post order, but there’s really no need, since there are already half a dozen plugins out there that do that.
Anything better than http://wordpress.org/extend/plugins/easy-post-order/ ? That uses a separate screen for re-ordering and haven’t found anything that actually works “right there” in the list. Thanks!
My favorite is Post Types Reorder.
Appreciate that – looks like it uses a separate “Re-order” page so I think I need to use the good ‘ol lesson of “if you are not happy with what’s out there, build it yourself” 🙂
Yep, pretty much. The only one I know of that reorders on the post list is Simple Page Ordering, but it only works for Pages, not Posts.
I went in to install the plugin and I was provided with the following error:
Warning: Invalid argument supplied for foreach() in /Users/user/Sites/wordpress/wp-content/plugins/drag-and-drop-plugin-sample/includes/admin-page.php on line 28Other than that, your previous tutorials have been flawless and thorough. Keep ’em comin’!
I should note that the plugin I attempted to install was the sample and the error provided was encountered on the Settings > Drag and Drop page. The content that’s supposed to pre-populate the table failed to… can’t think of the word.
By sample, do you mean it was the unfinished version, or the finished version?
Great tutorial! I uploaded the “complete” version and am getting the same error as mentioned above…
Warning: Invalid argument supplied for foreach() in
I was able to get it to populate by adding the following code in the admin-page.php – so the initial arrary setup is not working.
$list = array(
‘Option one’,
‘Option two’,
‘Option three’,
‘Option four’,
‘Option five’,
‘Option six’,
);
update_option(‘dad_list’, $list);
I will check it out while in the office tomorrow. Once fixed, I’ll update the complete plugin.
I’ve just updated the download file and tutorial to fix the problem. I needed to add a !is_array($dad_list) to the activation hook.
Hey Pippin,
Been bangin my head against the wall with this one for a while — the difference between your setup and mine is that I’m trying to add this to existing plugin options (so what I’m thinking is that I’d need to create an option is an array, within the array of other options) — which may be where I’m going wrong here — created a PasteBin http://pastebin.com/PHhwnK5R
Appreciate any help!
Just another quick tid-bit — this only happens after I save the plugins page once. I know this particular part doesn’t need the save action — but this drag ‘n drop is in the list of other plugin settings. After first plugin activation and page load — works fine, after save, it doesn’t work. I also dragged one of the options and then resaved, but it did not effect the order. Thanks!
Save it and you see the problem. Does the problem go away when you reload the page? And did the settings actually save?
Hi Pippin,
I’ve been going full-force on this one since I knew you’d be a bit busy yesterday 😉 I continued my question on Stack Exchange http://wordpress.stackexchange.com/questions/51802/update-option-stored-in-multi-dimensional-array which then lead to http://wordpress.stackexchange.com/questions/51889/plugin-settings-not-saving-on-ajax-re-ordered-table The basic idea here is that I shouldn’t be using AJAX to update the options on a page that has other settings (where AJAX is not used, just a regular save button). I hope it’s not too cryptic, but if you do have a few minutes and want to jump in on Stephen and I’s convo, I’d really appreciate it. At this point, it’s a matter of figuring out how to still use the draggable interface that syncs the order on page-save instead of AJAX. Thanks!
Hey man, sorry, I haven’t had a chance to take a look yet. Have you had any luck yet?
Hey Pippin,
No worries – I haven’t made any headway as of yet on that. My latest response in that second question link is where I’m currently at. Hope everything is going well with the baby so far! Thanks!
Hey Pippin,
Ended up getting this one working by myself – thanks again for checking in.
Oh nice. I was about to take another look at those questions, but apparently you don’t need me 😀
Hey Pippin,
Does it work any differently if I want to reorder list items within a widget settings box in the dashboard under Appearance > Widgets?
Nope, same concept 🙂 The only real difference is the way you save the options. Instead of saving to wp_options you will save to the widget option.
Thanks!
Useless tutorial ,If you cant share your knowledge and source code then dont upload such videos.You guys just need money nothing else..
Nice try. Look at the huge number of free tutorials / plugins I’ve written and then rethink your statement.
Dear this is the marketing techniquie not your courtesy.First you offer free stuff and then charge for rest of the stuff… Even the video you uploaded is fade.Give me your moneybooker and I am sending you payment. The reason I am fed up from you people is that you are using knowledge as weapon to earn money.Go and search about Wikipedia,Stackoverflow.If you have knowledge about something,then share it or keep it to yourself.Dont make offers like premium etc etc..
Knowledge isn’t always free and I have a family to feed.
Let me link you to just a few of the many, many things I give a way for free, all of which are ways that I “share my knowledge”:
31 plugins released for free on WordPress.org.
105 answers given for free on the WordPress Stack Exchange.
111 completely free tutorials posted on this site (only 34 require membership).
151 replies created on the bbPress support forum (someone else’s plugin) for free.
10 PAGES of replies to support tickets on WordPress.org.
Nearly 4000 replies posted on support tickets for the FREE Easy Digital Downloads plugin
So, is asking for a $6 one time payment really all that terrible to ask for in order to gain access to just a micro percentage of the material I’m releasing? Feel free to think so.
*drops mic*
Thank you for all that..Atlast you admit that you have family to feed and these things aren’t free.You uploaded this stuff and created this website not to HELP us but to feedb your family. This is your main goal
You can read about the true goals of this site on the About page: https://pippinsplugins.com/about/
Don’t feed him…
who is he calling “you people”? Racist
The world knows who is racist my brother.
Neing a muslim I dont want to induldge and create a new debate here.
Keep it nice guys.
Usman you have no idea what you are talking about. Pippin gives back to the WordPress community in so many way more than what he has listed. What have you done? You my friend are just a blood sucking leech, a taker and a troll.
Well I also do free answers to community on stackover flow.To feed my family ,I do freelancing and a job.
Usman, something you need to realize is that this is my job. I don’t get paid from an employer.
Dear you can do freelancing OR open a school for wordpress training.The way you are spreading knowledge is just like “If a student is enrolled in a school ,he got 2 classes and for the third class,he would asked to pay a handsome amount” .
Dear there are lot other ways of earning,through Ads. See stackoverflow peoplewith over 50K reputation are available there just to answer other questions because they feel pleasure in serving others and sharing their knowledge.
I would have no problem to become the premium member of this site.My country doesn’t support paypal ,that’s why i have to rely on moneybooker.Your site doesn’t contain moneybooker.
I was just going through yout “Faded” video and Got the message that source code is for premium members. WoW
You are free to think what you want but I assure you that I am doing nothing wrong.
You are welcome to pay via credit card, not just PayPal.
Thank you so much 🙂
BR
hmm isn’t he training people for free? You do know schools don’t give you the source code when they teach, They teach the methods and then tell you to code something specifically if you cant you fail. At least that what happened when I got my degree in development.
Hey @Usman… way to give feedback, I’m sure if you keep complaining about all the free stuff Pippin offers he’ll just agree and live in a box while you sponge off his knowledge that has taken years to establish.
Learning costs money, one way or another, hence colleges, universities, tutorial sites that charge.. oh yeah, books also, forgot about those thousand year old learning devices that those publishing bastards charge for, how dare they!
Grow up and move along.
Brother those people have a sole goal of earning money.They tell you that Yes we are offering this for this amount.Tell me one Book that was given to you by your teacher and he told you that “first 50 pages are free and for the rest of pages you need to pay me..” Is that true? No.
You are talking about devices ,Abacus was the first calculating device,Was that offering you addition only and for subtraction you need to pay ? Isn’t it?
I dont want to go into details of all that.THINGS WILL KEEP MOVING AS THEY ARE NOW AND THEY WILL NOT CHANGE JUST BECAUSE OF ME.I just want to put forward what I felt.No hard feelings for anyone. (My last reply)
BR
Dear Usman,
How much time do you think Pippin has spent acquiring the knowledge he has. Contrary to what you might believe, time = money in the grown up world. I think he deserves a slight return on that investment. I’m amazed Pippin finds the time to do so much work for FREE. Time which otherwise could be spent making money.
Erik
brother go and google about BalusC in java.Go and see his contributions on Stackoverflow.
with reputation of 356K.can you believe this?
nothing hidden,,All free,,, Honestly I wish to donate BalusC some reward for his contribution because I like the way he spread knowledge.
If you don’t like it, don’t use it my friend!
Usman,
The only time you or anyone has a right to information is if it is publicly funded. For example: government information is funded by the taxpayers and should be available to the taxpayers.
But you are not entitled to all information that everyone has created. If they decide to give it to you for free, than that is their choice and you should be thankful for it. But if they do not decide to give their information to you for free, you are not entitled to it.
Pippin does a lot of work compiling helpful information for people and he can share it however he pleases. If paying for that information allows him to spend more time creating helpful things for the community, I am more than willing to pay for it.
I’ve learned more from Pippin in a few conversations than I have from 2 years of school at an official college – which cost me thousands of dollars.
Thank you!
Hi man thanks for the tuts , have a question
let’s say i wanna apply this to make a theme option page . so i organize my boxs order like you showed , but what i need to display this in home page ( mean the order of boxs & boxs html codes )
front-office ^^ thanks again
That goes beyond the scope of this tutorial, sorry.
Any tips for creating drag and drop interface for enabling and disabling social sharing? Kind of like in Jetpack sharing.
http://jetpack.me/support/sharing/
Hi Pippin,
how would I go about putting a dotted rectangular box around the dragged item and a solid box around the non-dragged items?
Thanks,
Tin
Just what the doctor ordered, Pippin! This is a great tutorial. Was banging my head on the wall for a couple days trying to figure this out. Now, I’m definitely sure I could replicate this. Really appreciate your tutorials. Thanks!