i cant add pagination to front-end.php in wordpress

salimchadli
June 28, 2023
223 views
1 vote
2 Answers

i have my wordpress setting as homepage static page (front-page.php) and my posts page is a separate page (index.php), i pulled the posts into index.php and added the pagination with no problem. anyways i want to have a section in my homepage that also has the posts pulled in with pagination. i was able to pull in the posts through wordpress loop but i couldn’t add the pagination, i tried several methods to add pagination but i couldn’t when i click a next page it changes the page number in the url and the site reloads but the posts dont change.
here is the code for front-page.php :

    <?php
    get_header()
    ?>
    <?php
    get_template_part('template-parts/content', 'home');
    ?>

    <div class="container-worksheets" style="padding-top: 0;">
        <div class="cards-container" style="padding-top: 0;">
            <?php
            //define the query arguments
            $args = array(
                'post_type' => 'post', //get only posts
                'posts_per_page' => 4, //get 10 posts per page
                'orderby' => 'date', //order by date
                'order' => 'DESC', //order from newest to oldest
            );

            //create a new WP_Query object with the arguments
            $query = new WP_Query($args);

            //check if the query has any posts
            if ($query->have_posts()) {

                //loop through the posts
                while ($query->have_posts()) {

                    //set up the post data
                    $query->the_post();

                    //use your template part to display the post
            ?>
                    <a href="<?php echo get_permalink(); ?>">
                        <div class="card-items">
                            <div class="img-holder">
                                <img src="<?php echo the_post_thumbnail_url(); ?>" alt="featured image">
                            </div>
                            <div class="info">
                                <p><?php echo get_the_title(); ?></p>
                                <div class="hide">
                                    <p> <?php echo substr(get_the_content(), 0, 100); ?>
                                    </p>
                                    <span><?php echo get_the_category()[0]->name; ?></span>
                                </div>
                                <span>workshhets</span>
                            </div>
                        </div>
                    </a>
            <?php

                }

                //reset the post data
                wp_reset_postdata();
            } else {

                //if no posts are found, display a message
                echo '<p>No posts found.</p>';
            }
            ?>
            <?php the_posts_pagination(); ?>
        </div>
    </div>

    


    <?php
    get_footer()
    ?>

here is the index.php where everything works (btw i also tried to copy the same code to home page but it didn’t work)

<?php get_header(); ?>

<div class="container-worksheets">
    <div class="cards-container">
        <?php
            if (have_posts()){

                while(have_posts()){
                    the_post();
                    get_template_part('template-parts/content', 'archive');
                }
                

            }
        ?>
    </div>
</div>
<?php
    the_posts_pagination();
?>

<?php get_footer(); ?>

i tried several wordpress methods but none worked

Answers

- Caleb
- June 28, 2023 at 2:16 am
- 0 votes
0
Your custom WP_Query instance isn’t implementing pagination parameters. Try this for your $args:
```
$args = array(
    'post_type'      => 'post',
    'posts_per_page' => 4,
    'orderby'        => 'date',
    'order'          => 'DESC',
    'paged'          => get_query_var( 'paged', 1 ),
);
```
Login or Signup to reply.

The issue you’re facing is that the pagination is not working correctly on your homepage where you’re pulling in posts using the WordPress loop. The pagination links change the page number in the URL, but the posts displayed on the page do not update accordingly.

To fix this, you need to modify the query on your homepage to include the current page number from the URL. Here’s an updated version of your front-page.php code that includes pagination:

<?php
get_header();
?>
<?php
get_template_part('template-parts/content', 'home');
?>

<div class="container-worksheets" style="padding-top: 0;">
    <div class="cards-container" style="padding-top: 0;">
        <?php
        // Define the query arguments
        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; // Get the current page number
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 4,
            'orderby' => 'date',
            'order' => 'DESC',
            'paged' => $paged, // Set the current page number in the query
        );

        // Create a new WP_Query object with the arguments
        $query = new WP_Query($args);

        // Check if the query has any posts
        if ($query->have_posts()) {

            // Loop through the posts
            while ($query->have_posts()) {

                // Set up the post data
                $query->the_post();

                // Use your template part to display the post
                ?>
                <a href="<?php echo get_permalink(); ?>">
                    <div class="card-items">
                        <div class="img-holder">
                            <img src="<?php echo the_post_thumbnail_url(); ?>" alt="featured image">
                        </div>
                        <div class="info">
                            <p><?php echo get_the_title(); ?></p>
                            <div class="hide">
                                <p><?php echo substr(get_the_content(), 0, 100); ?></p>
                                <span><?php echo get_the_category()[0]->name; ?></span>
                            </div>
                            <span>worksheets</span>
                        </div>
                    </div>
                </a>
                <?php
            }

            // Reset the post data
            wp_reset_postdata();

            // Output pagination links
            the_posts_pagination(array(
                'mid_size' => 2,
                'prev_text' => __( '&laquo;', 'textdomain' ),
                'next_text' => __( '&raquo;', 'textdomain' ),
            ));
        } else {
            // If no posts are found, display a message
            echo '<p>No posts found.</p>';
        }
        ?>
    </div>
</div>

<?php
get_footer();
?>

In the updated code, I added the $paged variable to capture the current page number from the URL using get_query_var('paged'). Then, I included 'paged' => $paged in the $args array to pass the current page number to the query.

Lastly, I used the the_posts_pagination() function to generate the pagination links, and I added the necessary parameters for styling and previous/next text.

Make sure to replace your existing front-page.php file with this updated code, and the pagination should work correctly on your homepage.

Note: If you encounter any issues with permalinks not working or the page not being found when clicking on the pagination links, you might need to flush the rewrite rules. You can do this by going to the "Settings" -> "Permalinks" section in your WordPress admin dashboard and simply saving.

Please signup or login to give your own answer.

Click here to cancel reply.