pagination - I want the "next" and "previous" buttons to appear in my custom navigation func

I'm looking for a way to display the two buttons "previous" and "next" of the navigation of my page, but with the code below, I can only show one. I do not understand what's wrong in the code (below):

<div class="cover--nav">
        <?php
            $currenttPostId = get_the_ID();
            $theCategory = get_the_terms(get_the_ID(),'recipe_category');

                global $wp_query;


                $args = array(
                    'post_type' => 'recipe',
                    'orderby' => 'rand',
                    'post_status' => 'publish',
                    'recipe_category'=> !empty($theCategory)? $theCategory[0]->slug : '',
                    'post__not_in' => array($currenttPostId), 
                    'posts_per_page' => 2,
                    'paged' => $paged  //very important
                );
                $wp_query = new WP_Query($args);


                $prevNext = array();

                if ( $wp_query->have_posts() ) :
                    while ( $wp_query->have_posts() ) : $wp_query->the_post();
                        the_title();
                    endwhile;
                endif;


                wp_reset_postdata();


                $prev_label = "<span class='cover--nav-label'>" . _e('Recette précédente', 'marque') . "</span>";

                $prev_arrow = "<svg class='icon icon-arrow-prev' role='presentation' focusable='false'><use xlink:href='" . get_template_directory_uri() . "/images/symbol-defs.svg#icon-arrow-prev'></use></svg>";

                $prev_text = $prev_label . $prev_arrow;



                $next_label = "<span class='cover--nav-label'>" . _e('Recette suivante', 'marque') . "</span>";

                $next_arrow = "<svg class='icon icon-arrow-next' role='presentation' focusable='false'><use xlink:href='" . get_template_directory_uri() . "/images/symbol-defs.svg#icon-arrow-next'></use></svg>";

                $next_text = $next_label . $next_arrow;

                the_posts_navigation( array(
                'prev_text' => $prev_text,
                'next_text' => $next_text,
                ) );



                ?>

        </div>

This is what happens:

I would like to get the example below:

I'm looking for a way to display the two buttons "previous" and "next" of the navigation of my page, but with the code below, I can only show one. I do not understand what's wrong in the code (below):

<div class="cover--nav">
        <?php
            $currenttPostId = get_the_ID();
            $theCategory = get_the_terms(get_the_ID(),'recipe_category');

                global $wp_query;


                $args = array(
                    'post_type' => 'recipe',
                    'orderby' => 'rand',
                    'post_status' => 'publish',
                    'recipe_category'=> !empty($theCategory)? $theCategory[0]->slug : '',
                    'post__not_in' => array($currenttPostId), 
                    'posts_per_page' => 2,
                    'paged' => $paged  //very important
                );
                $wp_query = new WP_Query($args);


                $prevNext = array();

                if ( $wp_query->have_posts() ) :
                    while ( $wp_query->have_posts() ) : $wp_query->the_post();
                        the_title();
                    endwhile;
                endif;


                wp_reset_postdata();


                $prev_label = "<span class='cover--nav-label'>" . _e('Recette précédente', 'marque') . "</span>";

                $prev_arrow = "<svg class='icon icon-arrow-prev' role='presentation' focusable='false'><use xlink:href='" . get_template_directory_uri() . "/images/symbol-defs.svg#icon-arrow-prev'></use></svg>";

                $prev_text = $prev_label . $prev_arrow;



                $next_label = "<span class='cover--nav-label'>" . _e('Recette suivante', 'marque') . "</span>";

                $next_arrow = "<svg class='icon icon-arrow-next' role='presentation' focusable='false'><use xlink:href='" . get_template_directory_uri() . "/images/symbol-defs.svg#icon-arrow-next'></use></svg>";

                $next_text = $next_label . $next_arrow;

                the_posts_navigation( array(
                'prev_text' => $prev_text,
                'next_text' => $next_text,
                ) );



                ?>

        </div>

This is what happens:

I would like to get the example below:

• pagination
• navigation

Share Improve this question edited Feb 11, 2019 at 8:48 cjbj 15k1616 gold badges4242 silver badges8989 bronze badges asked Feb 11, 2019 at 8:17 Frenchy_WPFrenchy_WP 1911 silver badge66 bronze badges 0

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

The _e function immediately echoes the translated content to the output queue, so the string will end up in the html early. If you simply want to retrieve the translated content to add it to a string you need __.

I have checked your code & it has following line:

'posts_per_page' => 2,

This means maximum 2 posts filtered in loop. so you will have either previous or next button only based on post your are watching.

You have to make posts_per_page to greater than 2 then only you can see both buttons.

Below is your case

If you are seeing first post then next button visible & if you are seeing second post then previous button visible.