O WordPress não disponibiliza (até onde eu sei) uma função nativa para exibir todos os níveis de páginas, então segue uma função para solucionar este “problema”, mas antes vamos entender o que seria os níveis de página.
Por exemplo, temos uma página principal (Pai) chamada açai, para essa página eu quero criar uma sub-página para falar dos acompanhamentos, então criaremos uma página filha (ou sub-página) da página açai chamada acompanhamentos, para ficar mais detalhado eu vou criar uma página para cada acompanhamento e deixarei como páginas filhas de acompanhamento, são elas, leite em pó, granola, leite condensado e banana. Então nossas estrutura de página ficou assim:
- açai -> página principal
- acompanhamentos -> página filha de nível 1
- leite em pó -> página filha de nível 2
- granola -> página filha de nível 2
- leite condensado -> página filha de nível 2
- banana -> página filha de nível 2
- acompanhamentos -> página filha de nível 1
Neste exemplo acima temos 2 níveis de sub-paginas, a função abaixo exibirá a lista de pagina semelhante ao exemplo, vamos a ele:
function show_all_children_page( $post_id, $current_level = 1) {
$children = get_posts( array(
'post_type' =>'page',
'posts_per_page' => -1,
'post_parent' => $post_id,
'order_by' => 'title',
'order' => 'ASC' ) );
if ( empty($children) ) return;
echo '<ul class="children level-'.$current_level.'-children">';
foreach ($children as $child) {
echo '<li>';
echo '<a href="'.get_permalink($child->ID).'">';
echo apply_filters( 'the_title', $child->post_title );
echo '</a>';
// agora chamar a mesma função para a pagina filha desta pagina filha
show_all_children_page( $child->ID, $current_level+1 );
echo '</li>';
}
echo '</ul>';
}
Seguindo o exemplo de estrutura de paginas citada acima a saída html ficaria a seguinte:
<ul class="children level-1-children">
<li>
<a href="#">Açai</a>
<ul class="children level-2-children">
<li>
<a href="#">Acompanhamentos</a>
<ul class="children level-3-children">
<li><a href="#">Leite em pó</a></li>
<li><a href="#">Granola</a></li>
<li><a href="#">Leite condensado</a></li>
<li><a href="#">Banana</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Perceba que para cada inicio de novo nível temos a class level-x-children, onde o ‘x’ seria o numero do nível correspondente.