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

In a recent tutorial, we lined a technique to transform WordPress little one pages into navigation tabs. Immediately, we’ll transfer a step additional and discover ways to navigate between these pages with the subsequent and former hyperlinks.

Earlier than beginning, I like to recommend you undergo the earlier tutorial first after which come again right here, as this tutorial is its continuation.

As regular with my WordPress tutorials, right here’s an introductory video that showcases the anticipated habits:

Only a fast reminder from the earlier tutorial:

• On our backend, there’s this construction:

• All little one pages share the identical customized web page template. In fact, in your case, every web page can have a unique template.

Tοday’s aim is to facilitate the navigation to sibling little one pages by means of the subsequent and former hyperlinks. In my case, all pages comprise some dummy content material that even matches inside a laptop computer display screen, so additional navigation appears pointless. Nevertheless, in an actual situation, pages could be too prolonged, so customers must scroll as much as the tabs to navigate to the opposite pages—one thing actually not user-friendly.

We’ll present two navigation variations:

• First, with the usual Subsequent and Earlier hyperlink titles.

• The second (default) variation will change the hardcoded hyperlink titles with the titles of the suitable sibling pages in the event that they exist.

Implementation

For the implementation half, as regular, I’ll work with my customized Playground theme and use, as a place to begin, the recordsdata from the previous tutorial. 

Right here’s the up to date theme construction—I’ll describe all of the code additions:

In your comfort, all of the theme recordsdata of this train can be out there within the child-pages-navigation department of this GitHub repo. The primary department will embody the recordsdata of the earlier tutorial!

A couple of notes:

• We’ll add the logic for the navigation half contained in the tabs-navigation.php partial file.
• We’ll embody this file contained in the tabs.php web page template and cross to it as an argument, the array that shops all of the little one pages like this:

1

<?php

2

/* Template Title: Tabs Web 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

        'mum or dad' => $parent_id,

10

    )

11

);

12

?>

13

14

<primary class="site-main">

15

    <?php

16

    if ( have_posts() ) :

17

        whereas ( 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

</primary>

33

34

<?php

35

get_footer();

Let’s breakdown the logic for the navigation:

• The $child_pages array will retailer 4 objects. Every object will characterize a toddler web page.

• We’ll use the PHP array features array_search() and array_column() to seek out the important thing that represents the present little one web page contained in the $child_pages array. So, for instance, if we’re on the Historical past web page, this can be 0, on the Companions can be 1, and so forth. Once more, as a sort reminder, you’ll be able to customise the pages’ order utilizing the sort_column key contained in the arguments array of the get_pages() operate.
• With this data in thoughts, we’ll have the ability to discover the subsequent and former web page objects by lowering and rising by one the goal key respectively.  
• Subsequent, we’ll construct the markup for the navigation by checking every time if the subsequent and former pages exist. So, for instance, the Historical past web page will solely have a subsequent web page, and its earlier web page can be null. Optionally, we’ll add a navigation title that can seem solely on the display screen readers because of the screen-reader-text CSS class. From right here, you can also make issues extra accessible by attaching the aria-label attribute to the hyperlinks.
• As talked about to start with, there can be two navigation variations. By default, the dynamic sibling titles  will seem, however you’ll be able to go for the hardcoded Subsequent and Earlier titles (commented in the meanwhile).
• Because the theme has a setup for SVG Sprites, we’ll add the icons utilizing this method. The 2 chevron icons will come from the Font Awesome library and stay contained in the sprites.php partial file like this:

1

<image 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

</image>

4

<image 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

</image>

Right here’s the PHP code added within 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

<part 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 corporate pages', 'playground' ); ?>

13

            </h2>

14

            <?php if ( $prev_page ) : ?>

15

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

16

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

17

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

18

                    </svg>

19

                    <?php

20

                    esc_html_e( 'Earlier', '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="subsequent" href="<?php echo esc_url( get_permalink( $next_page ) ); ?>">

29

                    <?php

30

                    esc_html_e( 'Subsequent', 'playground' );

31

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

32

                    ?>

33

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

34

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

35

                    </svg>

36

                </a>

37

            <?php endif; ?>

38

        </div>

39

    </div>

40

</part>

And the related kinds—discover the margin-left: auto type that we add to the subsequent web page hyperlink to make sure that will at all times sit in the precise nook:

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

    top: 1px;

8

    margin: -1px;

9

    overflow: hidden;

10

    padding: 0;

11

    place: absolute;

12

    width: 1px;

13

    word-wrap: regular !vital;

14

}

15

16

.section-tabs-navigation .navigation {

17

    place: relative;

18

    show: flex;

19

    padding-top: 40px;

20

    margin-top: 40px;

21

}

22

23

.section-tabs-navigation .navigation::earlier than {

24

    content material: "";

25

    place: absolute;

26

    high: 0;

27

    left: 50%;

28

    rework: translateX(-50%);

29

    width: 25%;

30

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

31

}

32

33

.section-tabs-navigation a {

34

    show: flex;

35

    align-items: heart;

36

    hole: 10px;

37

    text-decoration: none;

38

}

39

40

.section-tabs-navigation .subsequent {

41

    margin-left: auto;

42

}

43

44

.section-tabs-navigation svg {

45

    fill: var(--darkpink);

46

}

Conclusion

Accomplished! Throughout this tutorial, we discovered a way that facilitates the WordPress little one web page navigation by means of the subsequent and former hyperlinks. Hopefully, you discovered some worth in it and plan to make use of it shortly!

As at all times, thanks loads for studying!