Add Snippet To Project
Are you looking to enhance the navigation and user experience on your WordPress site by displaying subpages in the sidebar? By default, WordPress only shows the parent page in the navigation menu, but with a few simple steps, you can ensure that all subpages are visible to your visitors. In this article, we will guide you through the process of displaying subpages in the sidebar, allowing your users to easily navigate to related content and improving the overall usability of your website.
function wpturbo_display_subpages_sidebar() {
// Get the current post ID
$post_id = get_the_ID();
// Get the parent page ID
$parent_id = wp_get_post_parent_id($post_id);
// If the current page has a parent page
if ($parent_id) {
// Get the subpages of the parent page
$subpages = get_pages(array('child_of' => $parent_id));
// If there are subpages
if ($subpages) {
// Display the subpages in the sidebar
echo '<ul>';
foreach ($subpages as $subpage) {
echo '<li><a href="' . get_permalink($subpage->ID) . '">' . $subpage->post_title . '</a></li>';
}
echo '</ul>';
}
}
}
add_action( 'wp_enqueue_scripts', 'wpturbo_display_subpages_sidebar' );
The provided code snippet demonstrates how to display the subpages of a parent page in the sidebar of a WordPress website. This functionality can be useful when building a website with nested pages and a hierarchical navigation structure.
To begin, a function named wpturbo_display_subpages_sidebar() is defined. This function will be responsible for retrieving the subpages and displaying them in the sidebar.
We start by utilizing the get_the_ID() function to retrieve the ID of the current page and assign it to the $post_id variable. This ID will be used to fetch the parent page ID.
Next, we use the wp_get_post_parent_id() function to retrieve the parent page ID by passing the $post_id. If the current page has a parent page, the value will be stored in the $parent_id variable.
Following that, an if statement is used to check if the current page has a parent page. If it does, we proceed to retrieve the subpages of the parent page.
To fetch the subpages, we use the get_pages() function and pass an array containing the child_of parameter, specifying the $parent_id. This function returns an array of page objects representing the subpages, which are stored in the $subpages variable.
Now, an additional if statement is used to check if there are any subpages available. If there are, we proceed to display them in the sidebar.
To visually structure the subpages, an unordered list <ul> is initialized with the echo statement, indicating the beginning of the list.
Inside a foreach loop, we iterate over each subpage by assigning it to the $subpage variable. Within each iteration, the title and permalink of the subpage are retrieved using the get_permalink() and $subpage->post_title functions, respectively. These values are then echoed as list items <li> within the unordered list.
Finally, the unordered list is closed with an echo statement, which outputs </ul>. The subpages will be displayed as a list in the sidebar of the WordPress website, with each item representing a subpage linked to its respective permalink.
To execute the wpturbo_display_subpages_sidebar() function, it should be hooked into the wp_enqueue_scripts action with the add_action() function. This ensures that the function is called when the scripts and stylesheets are being enqueued on the front-end of the website.
Now, whenever a page that has a parent page is being displayed, the subpages of the parent page will be fetched and displayed in the sidebar.