Making wp_dropdown_pages Autosubmit without the Submit Button in WordPress

Sometimes you need to create a dropdown list of existing pages or custom post types so that you can quickly navigate between them. For example, I might want to have a list of pages in my WordPress edit screen so that I can jump from one to another without having to first go to the “Pages” url. Whatever your reason, WordPress has a nice function that provides a drop down list containing all the pages on your site, called wp_dropdown_pages.

When populated, this is what it looks like:

In the above example, I’ve created a meta box on the side of the WordPress editing screen. This provides me with easy access to the list of pages. The problem is that by default, wp_dropdown_pages does nothing on its own. You can choose any page you wish, but nothing happens. There’s no action linked to the dropdown box. So we need to write our own using Javascript.

Making wp_dropdown_pages Autosubmit

In my test case, I want WordPress to automatically open the chosen page for editing. While the WordPress codex shows some basic skeleton code for how to use wp_dropdown_pages with a “Submit” button, it doesn’t work. Moreover, why should we have a submit button at all? Much more convenient to have the wp_dropdown_pages autosubmit so that we don’t have to go through an additional step.

To make this happen, we need to attach a little bit of Javascript to wp_dropdown_pages. The “name” or “ID” of the dropdown box is “page_id”, so we have no problems getting a handle on it. Open up your functions.php file, or wherever you post custom PHP code and paste in the following:

function dropdownbox_autosubmit() {
    wp_dropdown_pages('show_option_none=Select Page'); ?>

    <script type="text/javascript">
        var pageDropdown = document.getElementById("page_id");
        pageDropdown.onchange = onPageSelect;
        function onPageSelect() {
            if ( pageDropdown.options[pageDropdown.selectedIndex].value > 0 ) {
                location.href = "<?php echo get_option('home');?>/wp-admin/post.php?post="+pageDropdown.options[pageDropdown.selectedIndex].value+"&action=edit";
             }
         }
    </script>
<?php
}

If you want to display a default wp_dropdown_pages box and make it autosubmit, simply call this function whenever you want. Note the section in bold refers to the URL I want to use for directing me to the “editing” URL of the page. If however, you want the box to send you to the actual URL of the page, simply change the URL to refer to the pageID instead.

Creating the Meta Box for wp_dropdown_pages

In case you’re wondering how I created the meta box in the above screenshot next to the WordPress editor for holding the list of pages, this is easily accomplished via the “add_new_meta_box” function. Here’s what I used to get the above effect:

function add_new_meta_box($post_type, $post) {
    add_meta_box("skeleton_box", "Choose Page to Edit", "html_for_box", "page", "side", "high", null);
}
add_action("add_meta_boxes", "add_new_meta_box", 10, 2);

function html_for_box($object) {
    dropdownbox_autosubmit();
}

This is the basic code for adding a meta box on a page, at the side (instead of at the bottom). In the “add_meta_box”, I’ve specified the function “html_for_box” that will contain the HTML markup that renders the box. And you can see inside, that I’ve simply called the first function for creating the dropdown box within.

Using a Submit Button for wp_dropdown_pages

Of course, it’s also possible to use a “Submit” button for wp_dropdown_pages. As I mentioned earlier, the WordPress example in the Codes is less than helpful. It just creates a form with a button that reloads the pages and does nothing. To rewrite the above example using a button, modify the initial function to become this instead:

function dropdownbox_autosubmit() {
    wp_dropdown_pages(); ?>
    <input type="button" value="Select" onclick="onPageSelect()" />

    <script type="text/javascript">
        var pageDropdown = document.getElementById("page_id");
        function onPageSelect() {
            if ( pageDropdown.options[pageDropdown.selectedIndex].value > 0 ) {
                location.href = "<?php echo get_option('home');?>/wp-admin/post.php?post="+pageDropdown.options[pageDropdown.selectedIndex].value+"&action=edit";
             }
         }
    </script>
<?php
}

This creates the following look:

The changes are simple. I’ve just created an “input” button that redirects to our custom Javascript function on click. From there, it retrieves the value of the dropdown box, crafts the edit URL and performs the redirection. Note the section in bold, which you can modify to your own desired URL.

So that’s pretty much covers the ins and outs of submitting and retrieving a value. You can make wp_dropdown_pages autosubmit, or you can go the more traditional route with a “Submit” button instead!