Create a dynamic side menu of sub-pages in WordPress

• Prerequisites
• Step 1: Understanding WordPress Menus
• Step 2: Creating a Custom Menu for Sub-Pages
• Step 3: Using Widgets to Display Sub-Pages
• Step 4: Custom Code to Display Sub-Pages
• Step 5: Styling the Sub-Menu
• Step 6: Ensuring Responsiveness
• Wrap up

Creating a dynamic side menu that displays sub-pages from the current page in WordPress can enhance your site's navigation and user experience. This article will guide you through the process of setting up a side menu that automatically updates based on the current page's hierarchy. We’ll cover creating custom menus, using widgets, and implementing custom code.

¶Prerequisites

Before diving into the implementation, ensure you have the following:

• A WordPress site with a custom theme or a child theme.
• Basic understanding of WordPress themes and template hierarchy.

¶Step 1: Understanding WordPress Menus

WordPress menus are a powerful tool for organizing and displaying navigation links. You can create and manage menus from the WordPress admin dashboard. For more information on menus, refer to the WordPress Menus documentation.

¶Step 2: Creating a Custom Menu for Sub-Pages

To create a custom menu for your sub-pages, follow these steps:

1. Create Sub-Pages: Ensure you have a hierarchical structure of pages. For example, a parent page with several child pages.

2. Register a Menu Location: Add a new menu location in your theme’s functions.php file:

   function register_submenu_location() {
       register_nav_menu('sub-menu', __('Sub Menu'));
   }
   add_action('init', 'register_submenu_location');
   

3. Create a Menu: Go to the WordPress admin dashboard, navigate to Appearance > Menus, and create a new menu. Assign this menu to the Sub Menu location you just registered.

¶Step 3: Using Widgets to Display Sub-Pages

You can use widgets to display sub-pages dynamically. The Custom Menu widget is particularly useful for this purpose.

1. Add the Custom Menu Widget: Go to Appearance > Widgets and add the Custom Menu widget to your sidebar.

2. Select the Sub Menu: Choose the menu you created for the sub-pages.

¶Step 4: Custom Code to Display Sub-Pages

For more dynamic and automated control, you can use custom code to display sub-pages. This involves modifying your theme files, typically sidebar.php or a custom template file.

1. Modify the Sidebar: Open sidebar.php and add the following code to display the current page’s sub-pages dynamically:

   if (is_page()) {
       global $post;
       $parent_id = ($post->post_parent) ? $post->post_parent : $post->ID;
       $subpages = wp_list_pages(array(
           'title_li' => '',
           'child_of' => $parent_id,
           'echo' => 0
       ));
   
       if ($subpages) {
           echo '<ul class="sub-menu">';
           echo $subpages;
           echo '</ul>';
       }
   }
   

   This code checks if the current page is a parent or child page and then lists the sub-pages accordingly.

¶Step 5: Styling the Sub-Menu

To ensure your sub-menu looks good and fits your site’s design, add some custom CSS. You can place this CSS in your theme’s style.css file or a custom CSS plugin.

.sub-menu {
    list-style-type: none;
    padding: 0;
}

.sub-menu li {
    margin: 0 0 10px 0;
}

.sub-menu li a {
    text-decoration: none;
    color: #333;
}

.sub-menu li a:hover {
    color: #0073aa;
}

¶Step 6: Ensuring Responsiveness

Make sure your sub-menu is responsive by adding media queries to adjust the styling for different screen sizes.

@media (max-width: 768px) {
    .sub-menu {
        display: block;
        padding: 10px;
    }

    .sub-menu li {
        margin: 0 0 5px 0;
    }
}

¶Wrap up

Creating a dynamic side menu of sub-pages in WordPress enhances navigation and improves user experience. By following the steps outlined in this article—registering a custom menu location, using widgets, and implementing custom code—you can create a flexible and automatically updating sub-menu for your site.

For further details, refer to the WordPress Menus documentation and the WordPress Widgets documentation. With these tools and techniques, you can create a sophisticated navigation system that caters to the hierarchical structure of your content.