How to Browse Child Pages Through Next/Previous Links in WordPress

In a recent tutorial, we covered a method to convert WordPress child pages into navigation tabs. Today, we’ll move a step further and learn how to navigate between these pages with the next and previous links.

Before starting, I recommend you go through the previous tutorial first and then come back here, as this tutorial is its continuation.

As usual with my WordPress tutorials, here’s an introductory video that showcases the expected behavior:

Just a quick reminder from the previous tutorial:

• On our backend, there’s this structure:

• All child pages share the same custom page template. Of course, in your case, each page can have a different template.

Tοday’s goal is to facilitate the navigation to sibling child pages through the next and previous links. In my case, all pages contain some dummy content that even fits inside a laptop screen, so extra navigation seems unnecessary. However, in a real scenario, pages can be too lengthy, so users have to scroll up to the tabs to navigate to the other pages—something certainly not user-friendly.

We’ll provide two navigation variations:

• First, with the standard Next and Previous link titles.

• The second (default) variation will replace the hardcoded link titles with the titles of the appropriate sibling pages if they exist.

Implementation

For the implementation part, as usual, I’ll work with my custom Playground theme and use, as a starting point, the files from the previous tutorial. 

Here’s the updated theme structure—I’ll describe all the code additions:

For your convenience, all the theme files of this exercise will be available in the child-pages-navigation branch of this GitHub repo. The main branch will include the files of the previous tutorial!

A few notes:

• We’ll add the logic for the navigation part inside the tabs-navigation.php partial file.
• We’ll include this file inside the tabs.php page template and pass to it as an argument, the array that stores all the child pages like this:

1

<?php

2

/* Template Name: Tabs Page */

3

get_header();

4

5

$parent_id    = wp_get_post_parent_id();

6

$parent_title = get_the_title( $parent_id );

7

$child_pages  = get_pages(

8

    array(

9

        'parent' => $parent_id,

10

    )

11

);

12

?>

13

14

<main class="site-main">

15

    <?php

16

    if ( have_posts() ) :

17

        while ( have_posts() ) :

18

            the_post();

19

            ?>

20

            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

21

                ...

22

23

                <?php

24

                /*NAVIGATION*/

25

                get_template_part( 'partials/tabs-navigation', null, array( 'child_pages' => $child_pages ) );

26

                ?>

27

            </article>

28

            <?php

29

        endwhile;

30

    endif;

31

    ?>

32

</main>

33

34

<?php

35

get_footer();

Let’s breakdown the logic for the navigation:

• The $child_pages array will store four objects. Each object will represent a child page.

• We’ll use the PHP array functions array_search() and array_column() to find the key that represents the current child page inside the $child_pages array. So, for example, if we’re on the History page, this will be 0, on the Partners will be 1, and so on. Again, as a kind reminder, you can customize the pages’ order using the sort_column key inside the arguments array of the get_pages() function.
• With this information in mind, we’ll be able to find the next and previous page objects by decreasing and increasing by one the target key respectively.  
• Next, we’ll build the markup for the navigation by checking each time if the next and previous pages exist. So, for example, the History page will only have a next page, and its previous page will be null. Optionally, we’ll add a navigation title that will appear only on the screen readers thanks to the screen-reader-text CSS class. From here, you can make things more accessible by attaching the aria-label attribute to the links.
• As mentioned in the beginning, there will be two navigation variations. By default, the dynamic sibling titles will appear, but you can opt for the hardcoded Next and Previous titles (commented at the moment).
• As the theme has a setup for SVG Sprites, we’ll add the icons using this technique. The two chevron icons will come from the Font Awesome library and live inside the sprites.php partial file like this:

1

<symbol id="circle-chevron-left" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512">

2

    <path d="M512 256A256 256 0 1 0 0 256a256 256 0 1 0 512 0zM271 135c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-87 87 87 87c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L167 273c-9.4-9.4-9.4-24.6 0-33.9L271 135z"/>

3

</symbol>

4

<symbol id="circle-chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">

5

    <path d="M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM241 377c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l87-87-87-87c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L345 239c9.4 9.4 9.4 24.6 0 33.9L241 377z"/>

6

</symbol>

Here’s the PHP code added in the tabs-navigation.php file: 

1

<?php

2

$child_pages      = $args['child_pages'];

3

$current_page_key = array_search( get_the_ID(), array_column( $child_pages, 'ID' ) );

4

$prev_page        = $child_pages[ $current_page_key - 1 ];

5

$next_page        = $child_pages[ $current_page_key + 1 ];

6

?>

7

8

<section class="section-tabs-navigation">

9

    <div class="container container-sm">

10

        <div class="navigation">

11

            <h2 class="screen-reader-text">

12

                <?php esc_html_e( 'Navigation between the company pages', 'playground' ); ?>

13

            </h2>

14

            <?php if ( $prev_page ) : ?>

15

                <a class="previous" href="<?php echo esc_url( get_permalink( $prev_page ) ); ?>">

16

                    <svg width="24" height="24" aria-hidden="true">

17

                        <use xlink:href="#circle-chevron-left"></use>

18

                    </svg>

19

                    <?php

20

                    esc_html_e( 'Previous', 'playground' );

21

                    //echo esc_html( get_the_title( $prev_page ) );

22

                    ?>

23

                </a>

24

                <?php

25

            endif;

26

            if ( $next_page ) :

27

                ?>

28

                <a class="next" href="<?php echo esc_url( get_permalink( $next_page ) ); ?>">

29

                    <?php

30

                    esc_html_e( 'Next', 'playground' );

31

                    //echo esc_html( get_the_title( $next_page ) );

32

                    ?>

33

                    <svg width="24" height="24" aria-hidden="true">

34

                        <use xlink:href="#circle-chevron-right"></use>

35

                    </svg>

36

                </a>

37

            <?php endif; ?>

38

        </div>

39

    </div>

40

</section>

And the associated styles—notice the margin-left: auto style that we add to the next page link to ensure that will always sit in the right corner:

1

/*CUSTOM VARIABLES HERE*/

2

3

.screen-reader-text {

4

    border: 0;

5

    clip: rect(1px, 1px, 1px, 1px);

6

    clip-path: inset(50%);

7

    height: 1px;

8

    margin: -1px;

9

    overflow: hidden;

10

    padding: 0;

11

    position: absolute;

12

    width: 1px;

13

    word-wrap: normal !important;

14

}

15

16

.section-tabs-navigation .navigation {

17

    position: relative;

18

    display: flex;

19

    padding-top: 40px;

20

    margin-top: 40px;

21

}

22

23

.section-tabs-navigation .navigation::before {

24

    content: "";

25

    position: absolute;

26

    top: 0;

27

    left: 50%;

28

    transform: translateX(-50%);

29

    width: 25%;

30

    border-top: 1px solid var(--lightgray);

31

}

32

33

.section-tabs-navigation a {

34

    display: flex;

35

    align-items: center;

36

    gap: 10px;

37

    text-decoration: none;

38

}

39

40

.section-tabs-navigation .next {

41

    margin-left: auto;

42

}

43

44

.section-tabs-navigation svg {

45

    fill: var(--darkpink);

46

}

Conclusion

During this tutorial, we learned a technique that facilitates the WordPress child page navigation through the next and previous links. Hopefully, you found some value in it and plan to use it shortly!

As always, thanks for reading!