Drop-down menu with wp_dropdown_pages

Question

trying to create a drop-down menu where the items are the children pages of a given parent page. The list has an autosubmit script.

I'd like to add some css rule but unable to do so. Moreover, I see the following warning appearing briefly everytime I do edit the page where I test the code:

Cannot modify header information - headers already sent by (output started at /etc etc)

Many thanks in advance

Here's the code, not mine really: source

function dropdownbox_autosubmit() {
    wp_dropdown_pages(array('child_of' => 42,'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');?>/post.php?page_id="+pageDropdown.options[pageDropdown.selectedIndex].value;
             }
         }
    </script>
<?php

}
add_shortcode( 'call_dropdownbox_autosubmit', 'dropdownbox_autosubmit' );

Answer 1

First of all, i think you got an error in your arguments. It should be 'show_option_none' => 'Select Page', not 'show_option_none=Select Page'.

Secondly: Shortcodes are things that are replaced within the content of the post/page/whatever. This means that the content of the Shortcode has to be returned. You directly echo them, which leads to the error message in the admin.

Change your function to return the Code instead of echoing it. The wp_dropdown_pages function has a handy argument for this: 'echo'.

function dropdownbox_autosubmit($atts = array()) {
    if(isset($atts['child_of'])){
         $childof = (int)$atts['child_of'];
    } else {
         $childof = 42;
    }
    $my_dropdown = wp_dropdown_pages(array('child_of' => $childof,'show_option_none'=> 'Select Page','echo' => false));
    $my_dropdown.='<script type="text/javascript">';
    $my_dropdown.='    var pageDropdown = document.getElementById("page_id");';
    $my_dropdown.='    pageDropdown.onchange = onPageSelect;';
    $my_dropdown.='    function onPageSelect() {';
    $my_dropdown.='        if ( pageDropdown.options[pageDropdown.selectedIndex].value > 0 ) {';
    $my_dropdown.='            location.href = '.get_home_url().'?p="+pageDropdown.options[pageDropdown.selectedIndex].value;';
    $my_dropdown.='         }';
    $my_dropdown.='     }';
    $my_dropdown.='</script>';

    return $my_dropdown;
}
add_shortcode( 'call_dropdownbox_autosubmit', 'dropdownbox_autosubmit' );

You can continue to use the shortcode like this: [call_dropdownbox_autosubmit]. I also made a little change so that you can specify of which page the children in the dropdown should be. You can use the child_of Attribute like this:

[call_dropdownbox_autosubmit childof=42]

Happy Coding!