The setup of the meta box functionality is done in the load-<pagename> callback function by calling the add_meta_box function multiple times based on the desired number of boxes to be displayed on the screen.

The function takes a number of arguments, as shown:

add_meta_box( $id, $title, $callback, [$page], [$context], [$priority],
              [$callback_args] );

Going over the parameters in this function, the first is a unique identifier for the meta box, while the second is the string that will be displayed as the title of the box itself and is also the name that will show up in the Screen Options configuration tab. The third parameter is the name of the function to be called to render the contents of the meta box. The fourth argument identifies the page where the meta boxes will be rendered. In this case, we use the value of the global variable $options_page for this parameter, to be sure that it will be assigned the correct page identifier. Global PHP variables are powerful tools that can help us share data between functions in a plugin. By using the keyword global in front of the name of a variable, a website's PHP interpreter will know that it has to access a common memory space to store and access information.

The fifth parameter is an arbitrary name that indicates the name of a section where the box should be displayed. This name will be used when making a request to WordPress to render all the meta boxes belonging to a specific section. The only requirement for this to work correctly is to use the same name when calling the do_meta_boxes function.

The sixth argument indicates the priority of the registered meta box within the section it belongs to, relative to other meta boxes. If all the boxes have the same priority, the order in which the calls to the add_meta_box function were made will determine their original drawing order. Of course, as was seen in this recipe, this order can be overridden by the user through a simple drag-and-drop operation. The final parameter is optional and can be used to send information to the function that will render the meta box contents.

In addition to the calls to add_meta_box, we must make multiple calls to wp_enqueue_script in the page load function to request for three JavaScript scripts to be loaded when our configuration page is rendered. These scripts provide the drag-and-drop, minimize, and hiding functionalities that were demonstrated at the end of the recipe, with only a few initialization calls needed to be done from our code through JavaScript functions.

Once the meta boxes have been created, the bulk of the work is done within the options page rendering function. As we can see in the modified code, the first thing that is done is to create new nonce fields. These unique numbers will be generated as hidden data in the page and will be used for authentication to save layout changes within the configuration page. Next, we create a number of div sections with specific id names that contain a nested call to the do_meta_boxes function. These div tags are used to ensure that the meta boxes are styled using the WordPress administration pages style sheet.

Once called, the do_meta_boxes function takes care of drawing all of the meta boxes that were created for the given page (specified in the first argument) and given section (second argument). It also passes along any data specified in the third function argument to the functions associated with each box.

The remaining changes to the page rendering function is a block of JavaScript code that takes care of closing down any meta box section that was closed by the user during a previous visit to the page. It also assigns jQuery callbacks to the meta boxes so that any user interaction with them is saved to the site database by sending AJAX requests to the web server.

Last, but not least, the meta box rendering functions are responsible for rendering the content inside each meta box. They can do this by outputting straight HTML. By passing along the complete options array to these functions, the code that is contained within them can be exactly the same as before to render the various options fields.