You can implement this by following some easy steps.
1) Parent page listing
You need to call “wp_list_pages” function with depth 1, so it will display only parent pages
wp_list_pages(‘depth=1’)
OR
You can also call parent pages like this.
$cdefaults = array(
‘child_of’ => 0, ‘sort_order’ => ‘ASC’,
‘sort_column’ => ‘post_title’, ‘hierarchical’ => -1,
‘exclude’ => ”, ‘include’ => ”,
‘meta_key’ => ”, ‘meta_value’ => ”,
‘authors’ => ”, ‘parent’ => 0, ‘sort_column’ => ‘menu_order, post_title’, ‘exclude_tree’ => ”,
‘number’ => ”, ‘offset’ => 0
);
$PagesList = get_pages($cdefaults);
foreach ( $PagesList as $ParentPages ) {
// Your html code here
‘<li ” class=”‘ . $css_class . ‘”>ID) . ‘” ‘.$NewWindow.’ title=”‘ . esc_attr(apply_filters(‘the_title’, $ParentPages->post_title)) . ‘”>‘;
}
2) Child page listing
You need to call like this, here $post->ID is the current page id.
<?php wp_list_pages( ‘title_li=&child_of=’ . get_root_page($post->ID) ); ?>
You can also implement secoond option same as above. You just need to change “child_of” and “parent” parameter.
I hope this will help you, to implement your requirement.