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!

  1. Thomas Griffin

    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. 🙂

    • Pippin

      That is very, very true! I’ll add in a note about that.

  2. Zach

    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 🙂

    • Pippin

      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.

    • Pippin

      My favorite is Post Types Reorder.

    • Zach

      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” 🙂

    • Pippin

      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.

  3. CoreyCapetillo

    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 28

    Other than that, your previous tutorials have been flawless and thorough. Keep ’em comin’!

    • CoreyCapetillo

      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.

    • Pippin

      By sample, do you mean it was the unfinished version, or the finished version?

  4. kristopherk

    Great tutorial! I uploaded the “complete” version and am getting the same error as mentioned above…

    Warning: Invalid argument supplied for foreach() in

    • kristopherk

      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);

    • Pippin

      I will check it out while in the office tomorrow. Once fixed, I’ll update the complete plugin.

    • Pippin

      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.

  5. yellowhousedesign

    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!

    • yellowhousedesign

      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!

    • Pippin

      Save it and you see the problem. Does the problem go away when you reload the page? And did the settings actually save?

  6. yellowhousedesign

    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!

    • Pippin

      Hey man, sorry, I haven’t had a chance to take a look yet. Have you had any luck yet?

    • yellowhousedesign

      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!

    • yellowhousedesign

      Hey Pippin,
      Ended up getting this one working by myself – thanks again for checking in.

    • Pippin

      Oh nice. I was about to take another look at those questions, but apparently you don’t need me 😀

  7. jgalea

    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?

    • Pippin

      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.

  8. jgalea

    Thanks!

  9. Usman

    Useless tutorial ,If you cant share your knowledge and source code then dont upload such videos.You guys just need money nothing else..

  10. Keith

    Don’t feed him…

  11. Carlitoescobar

    who is he calling “you people”? Racist

    • Usman

      The world knows who is racist my brother.
      Neing a muslim I dont want to induldge and create a new debate here.

    • Pippin

      Keep it nice guys.

  12. John Turner

    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.

    • Usman

      Well I also do free answers to community on stackover flow.To feed my family ,I do freelancing and a job.

    • Pippin

      Usman, something you need to realize is that this is my job. I don’t get paid from an employer.

    • Usman

      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

    • Pippin

      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.

  13. Usman

    Thank you so much 🙂
    BR

  14. Chris Kelley

    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.

  15. jonathan

    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.

    • Usman

      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

  16. Erik

    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

  17. Usman

    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.

    • Erik

      If you don’t like it, don’t use it my friend!

  18. Phil Johnston

    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.

  19. Gregg

    Thank you!

  20. Ayoub

    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

    • Pippin

      That goes beyond the scope of this tutorial, sorry.

  21. Tin Hoang

    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

  22. Nate Finch

    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!