2

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' );
  • There is nothing in that shortcode that would generate that kind of warning message, I'd also note that using a form input like that as navigation is extremely bad for accessibility, if your site is for a business it will be violating a number of accessibility regulations in multiple countries. I would strongly advise agaisnt this for UX and accessibility reasons. What's your specific question? Can you state it clearly in a single sentence and make it bold so it's obvious? – Tom J Nowell Apr 6 at 22:24
  • Thanks for your reply Tom. My question is how do I create a drop-down list with all the children pages of a given parent page? – user185556 Apr 7 at 21:02
  • I'd be happy of course to find a solution that's both UX- and accessibility-friendly. – user185556 Apr 7 at 21:42
  • I understood your question, but I advise against this approach. Hence why I left a comment instead of an answer, I'm guessing from what i'm seeing that this is a UI control for choosing a post to edit in the admin area. It would be more accessible to simply list the posts and have an edit link. It would even be more convenient as you could right click to open multiple edit screens in new tabs which isn't possible with a dropdown, as well as lots of other advantages. – Tom J Nowell Apr 7 at 23:55
  • Understood, I'll get my head around that approch then. Many thanks for replying! – user185556 Apr 8 at 12:47
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!

| improve this answer | |
  • Thanks for your reply Sebastian. The idea and syntax are clear also for a beginner like me. I've just replaced 'location.href = ' ' with 'location.href = "' ' as the former resulted into the script not firing – user185556 Apr 7 at 21:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.