dropdown - Drop-down menu with wp_dropdown_pages

admin管理员组

文章数量:1390677

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' );

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' );

• dropdown

Share Improve this question edited Apr 6, 2020 at 22:22 Tom J Nowell♦ 61.1k77 gold badges7979 silver badges148148 bronze badges asked Apr 6, 2020 at 22:04 user185556user185556 2333 bronze badges 5

• 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 ♦ Commented Apr 6, 2020 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 Commented Apr 7, 2020 at 21:02
• I'd be happy of course to find a solution that's both UX- and accessibility-friendly. – user185556 Commented Apr 7, 2020 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 ♦ Commented Apr 7, 2020 at 23:55
• Understood, I'll get my head around that approch then. Many thanks for replying! – user185556 Commented Apr 8, 2020 at 12:47

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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!

本文标签： dropdownDropdown menu with wpdropdownpages