OnPoint Plugins

← Back to support

Display child pages as a dropdown select

Resolved

Requested: 2 years and 3 months ago

Hi, I have a sidebar nav that I want to collapse into a select menu – one that does not require an additional button to initiate the link to the selected page.

  1. Hi Mike.

    Displaying the child pages as a drop-down select which automatically browsers to the selected page may be done with the following steps:

    1. Create a directory in your active theme called “advanced-sidebar-menu”
    2. Inside the new directory create a file named ‘page_list.php’
    3. Inside the new file add the following code which will override the page widget
    <?php
/**
 * The Output of the Advanced Sidebar Page Widget
 *
 * @author  Mat Lipe
 *
 * @since   7.0.0
 *
 * @example to edit, create a file named page_list.php and
 *          put in a folder in the your theme called 'advanced-sidebar-menu.
 *          Copy the contents of the file into that file and edit at will.
 *
 * @notice  Do not edit this file in its original location or it will break on upgrade
 */
$menu        = Advanced_Sidebar_Menu_Menus_Page::get_current();
$list_pages  = Advanced_Sidebar_Menu_List_Pages::factory( $menu );
$child_pages = $list_pages->get_child_pages( $menu->get_top_parent_id(), true );
$content     = '';

$menu->title();

//Display parent page
if ( $menu->include_parent() ) {
   $content   .= '<ul class="parent-sidebar-menu" >';
   $list_args = $list_pages->get_args( 'parent' );
   $content   .= wp_list_pages( $list_args );
}
ob_start();
if ( ! empty( $child_pages ) ) {
   if ( $menu->include_parent() ) {
      ?><li><?php
   }
   ?>
    <select onchange="window.location.href=this.value">
        <option>
         <?php esc_html_e( 'Select Page' ); ?>
        </option>
      <?php
      foreach ( $child_pages as $_page ) {
         ?>
            <option value="<?php echo esc_attr( get_permalink( $_page ) ); ?>">
            <?php echo get_the_title( $_page ); ?>
            </option>
         <?php
      }
      ?>
    </select>
   <?php
   if ( $menu->include_parent() ) {
      ?></li><?php
   }
}
$content .= ob_get_clean();
if ( $menu->include_parent() ) {
   $content .= '</li></ul><!-- End .parent-sidebar-menu -->';
}

return $content;

  2. Hi Mat,

    Thanks for this. When I implemented the set up as described above I get the following error on the page:

    Parse error: syntax error, unexpected ‘}’, expecting end of file in /app/public/wp-content/themes/GRT_2018/advanced-sidebar-menu/page_list.php on line 31

    Appreciate your help,
    Mike

  3. Hi Mike,

    Turns out my example did not include the opening <?php tag at the top of the file and my instructions did not mention to leave that in place. Here is the full code including the opening <?php tag

    <?php
/**
 * The Output of the Advanced Sidebar Page Widget
 *
 * @author  Mat Lipe
 *
 * @since   7.0.0
 *
 * @example to edit, create a file named page_list.php and
 *          put in a folder in the your theme called 'advanced-sidebar-menu.
 *          Copy the contents of the file into that file and edit at will.
 *
 * @notice  Do not edit this file in its original location or it will break on upgrade
 */
$menu        = Advanced_Sidebar_Menu_Menus_Page::get_current();
$list_pages  = Advanced_Sidebar_Menu_List_Pages::factory( $menu );
$child_pages = $list_pages->get_child_pages( $menu->get_top_parent_id(), true );
$content     = '';

$menu->title();

//Display parent page
if ( $menu->include_parent() ) {
   $content   .= '<ul class="parent-sidebar-menu" >';
   $list_args = $list_pages->get_args( 'parent' );
   $content   .= wp_list_pages( $list_args );
}
ob_start();
if ( ! empty( $child_pages ) ) {
   if ( $menu->include_parent() ) {
      ?><li><?php
   }
   ?>
    <select onchange="window.location.href=this.value">
        <option>
         <?php esc_html_e( 'Select Page' ); ?>
        </option>
      <?php
      foreach ( $child_pages as $_page ) {
         ?>
            <option value="<?php echo esc_attr( get_permalink( $_page ) ); ?>">
            <?php echo get_the_title( $_page ); ?>
            </option>
         <?php
      }
      ?>
    </select>
   <?php
   if ( $menu->include_parent() ) {
      ?></li><?php
   }
}
$content .= ob_get_clean();
if ( $menu->include_parent() ) {
   $content .= '</li></ul><!-- End .parent-sidebar-menu -->';
}

return $content;

Respond