Blog Free design resources & fresh perspectives

Building Sortable Admin Settings for Your WordPress Theme

Creating sortable drag & drop admin interfaces is a handy feature that gives the user an intuitive level of control over the appearance of there website. In this tutorial, we will go over how to create a sortable list using jQuery UI, and then save the list order using WordPress’s Settings API. And lastly, how to output the sorted list in your theme template.

Step 1: Setting up our scripts

In order to create our sortable options, we will require three scripts: jQuery UI core, jQuery UI sortable, and a custom script file. First create a blank file in your theme’s root directory and name it admin.js. Then, to include the scripts, add the following code to your functions.php file:

Step 2: Implementing the Settings API

Before we can get started creating our sortable list, we’ll want to configure the settings API, giving us an environment where we can save information into the database. If you have already set this up and would like skip over this section, click here.

First, in your themes function.php file, you want to add your options page to the WordPress menu. To do this, add the following function:

*Note: remember to replace yourtheme with the actual name of your theme.

Now you should be seeing a menu item in your WordPress admin that links to your theme options page. Currently, this page is blank. Next we will write the function that outputs the form that will contain the sortable list.

Step 3: Creating the Sortable List

Next, we will be adding two additonal functions. Copy and paste the following code into your functions.php:

The first function just assigns a field to a settings group named “rypecore-settings-group”. This is part of WordPress’s Settings API, you can read more about it here. The second function is responsible for outputting the code that will generate our form in the theme options.

After pasting this code into your functions.php, refresh your theme options page and you should see a list and a Save button. Test out the sortable list by clicking and dragging a list item to a different position and then save the settings to make sure the list order remains.

Step 4: Outputting the List In a Theme Template

Once you have confirmed that you can manipulate your list order and save the theme options, next we will add the code that will output this list in your theme file. Place this code in custom template files, custom widgets, shortcodes, or any wordpress theme file.

That’s it! You have now successfully implemented a sortable list into your theme options. This example is a very basic implementation for the sake of simplicity, but it can be easily extended to accommodate for complex scenarios, such as custom form builders, page layouts, and more. Get creative and have fun with it!