0

So I've been developing my own theme as a learning experience, and I'm at a loss regarding how to get pagination working. I've tried several things before getting to this point and asking, I just seem to be missing something.

This is on a "Static Frontpage" which is why the $paged is calling 'page' at least, that's one thing my research brought to light.

    <?php while ( have_posts() ) : the_post(); ?>
        <h2>Recent Posts</h2>

            <?php
                 $paged = (get_query_var('page')) ? get_query_var('page') : 1;
                $Post = array(
                    'post_type'      => 'post',
                    'posts_per_page' => 4,
                    'orderby'     => 'modified',
                    'order'       => 'DESC',
                    'paged' => $paged
                );
                $q    = new WP_Query( $Post );
            ?>
            <div class="grid row posts">
                <?php while ( $q->have_posts() ) : $q->the_post(); ?>
                <div class="col">
                    <div class="date-container">
                        <p class="post-date bg-darkpurple">
                            <?php 
                            //echo get_the_date()
                                $u_time = get_the_time('U');
                                $u_modified_time = get_the_modified_time('U');
                                    if ($u_modified_time >= $u_time + 86400) {
                                echo "Last updated ";
                                    the_modified_time('F jS, Y');
                                echo ""; }
                                else {echo "Posted "; the_time('F jS, Y');}
                            ?>
                        </p>
                    </div>
                    <?php
                        $perma_cat = get_post_meta($post->ID , '_category_permalink', true);
                            if ( $perma_cat != null ) {
                                $cat_id = $perma_cat['category'];
                                $category = get_category($cat_id);
                            } else {
                                $categories = get_the_category();
                                $category = $categories[0];
                            }
                                $category_link = get_category_link($category);
                                $category_name = $category->name;  
                            ?>

                        <picture class="post-thumb block">

                            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('medium'); ?></a>
                            <div class="cat-container">
                                <a class="post-cat bg-darkpurple" href="<?php echo $category_link ?>"><?php echo $category_name ?></a>
                            </div>

                        </picture>

                        <h3>
                            <a href="<?php the_permalink(); ?>">
                                <?php the_title(); ?>
                            </a>
                        </h3>
                            <?php echo '<p class="excerpt">' . get_the_excerpt(). '</p>'; ?>
                </div>
                <?php endwhile; ?>
            </div>
                <div class="pagination">
                    <?php 
                        echo paginate_links( array(
                        'base'         => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
                        'total'        => $query->max_num_pages,
                        'current'      => max( 1, get_query_var( 'page' ) ),
                        'format'       => '?page=%#%',
                        'show_all'     => false,
                        'type'         => 'plain',
                        'end_size'     => 2,
                        'mid_size'     => 1,
                        'prev_next'    => true,
                        'prev_text'    => sprintf( '<i></i> %1$s', __( 'Newer Posts', 'text-domain' ) ),
                        'next_text'    => sprintf( '%1$s <i></i>', __( 'Older Posts', 'text-domain' ) ),
                        'add_args'     => false,
                        'add_fragment' => '',
                    ) );
                    ?>
                </div>
            <?php wp_reset_postdata(); ?>
        <?php endwhile; ?>

Thanks for any insight

  • 1
    Is there any specific reason why you're nesting loops? I feel like if one of those 2 loops disappeared you wouldn't be running into as many issues. – Howdy_McGee Jan 17 at 16:14
  • To be honest, the basic structure was taken from another site that I built off of and retrofitted to my needs. My understanding of PHP is very spotty, as I've only just begun working with it in a true development sense merely a week ago. – Devon Jan 17 at 17:56
0

If you're set to a static front page, why would there be pagination?

The proper way to have a paginated grid of posts as your front page is to set the homepage to "Your latest posts". You would then develop your front-page.php, home.php or index.php template to display posts as a grid (use the Template Hierarchy to determine which file you need).

In that template you don't need to use WP_Query or $paged or anything like that. Only the main loop:

<h2>Recent Posts</h2>

<div class="grid row posts">
    <?php while ( have_posts() ) : the_post(); ?>
        <div class="col">
            <!-- Post markup goes here. -->
        </div>
    <?php endwhile; ?>
</div>

<div class="pagination">
    <?php 
    echo paginate_links( array(
        'end_size'     => 2,
        'mid_size'     => 1,
        'prev_text'    => sprintf( '<i></i> %1$s', __( 'Newer Posts', 'text-domain' ) ),
        'next_text'    => sprintf( '%1$s <i></i>', __( 'Older Posts', 'text-domain' ) ),
    ) );
    ?>
</div>

Note the other changes I made:

  • The pagination links should be outside the while loop.
  • I've removed arguments paginate_links() because they were either unnecessary due to the proper loop structure, or because they were just set to the defaults.

If you'll humour me in the comments, this misuse of WP_Query and pagination is by far the most common mistake I see on this site, so I'm just curious where you got the idea that you needed to do a new WP_Query, because it should never be necessary for the main list of posts in any of the standard templates, but I see it done almost every day. Is there a tutorial out there spreading this, or something in the official docs that's implying this?

| improve this answer | |
  • Let me see if I can find the link for the original design that I heavily modified: wordpress.stackexchange.com/questions/278664/… this is the one where that came from. I had wanted to limit the number of visible posts to 4, and paginate the rest. – Devon Jan 17 at 17:46
  • Additionally, I'm trying to recreate this effect streamershaven.blog The post grid on that website(which is the old theme I'm looking to replace) uses a plugin to accomplish this. However, this plugin has way too many external resources, and render blocks for around 0.5 seconds. The goal is to code it into the theme using existing functions to make it as efficient as possible. – Devon Jan 17 at 17:52
  • Finally, I'd like the ability to filter by post type, set order by modified, etc. The above code simply shows the current page it is on styled within. – Devon Jan 17 at 18:04
  • I see now what you mean, Set everything up, just as you said, It works. Now to figure out how to limit the number of posts to 4, and fix the title(Don't want duplicate content flags) – Devon Jan 17 at 18:36
  • Okay, I managed to get it to display exactly as I wanted to. I used this bit of code to call the page content to be able to edit the home page content using the Gutenberg block setup. PHP <?php $id=2; $post = get_post($id); $content = apply_filters('the_content', $post->post_content); echo $content; ?> Now there is no need to modify the .php template file at all, even when new content comes in. Just need to do the same for the title and attributes now :) – Devon Jan 17 at 18:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.