1

I have this content in my index.php. 3 areas with 3 distinct custop wp_query loops to get different categories of articles in each one. I have set wordpress to show 12 articles by page, so it displays 12 articles in each div. My problem is that I dont understand how to implement pagination in each of this loops. I tried some solutions I found on other stack threads, but it would change pages in all divs but in the one I have put the code in... I'm new to wordpress, not very good with php and this is my first custom theme, so a little bit (a lot) of pedagogy would be welcome ! Thank you

<?php get_header(); ?>
 <div class="row subpage">

    <div class="container spacer col-md-2"></div>

    <div id="content" class="post_area col-lg-6 col-md-12">
            <div class="row">

                <div  id="articles_posts" class="col-md-12" >

                    <div class="article_title col-md-12"> <h2>LE BLOG</h2> </div>
                    <div class="row">
                        <?php

                        $articles = new WP_Query('cat=3,4,5,1563,1564,13');


                        if ($articles->have_posts()) :

                            while ($articles->have_posts()) :
                                $articles->the_post();
                                ?>

                                <!-- CODE DES CARDS -->
                                <div class="card col-md-4 col-xs-12 col-sm-4">

                                    <?php
                                    $category = get_the_category();
                                    $the_category_id = $category[0]->cat_ID;

                                    if(function_exists('rl_color')){
                                        $rl_category_color = rl_color($the_category_id);
                                    }
                                    ?>

                                    <div class="card_thumb" style="border-color:<?php echo $rl_category_color; ?>" >
                                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                                    </div>
                                    <span class="thumb_post_category" style="background-color:<?php echo $rl_category_color; ?>;color: white; border-style: none"> <?php
                                        $category = get_the_category( $custompost );
                                        echo $category[0]->cat_name;
                                        ?> </span>
                                    <div class="card_body">
                                        <div class="card_title"> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <h3><?php the_title(); ?><h3> </a></div>
                                        <p class="card_description"> <a href="<?php the_permalink(); ?>"> <?php echo get_the_twitter_excerpt(); ?> </a></p>
                                        <div class="card_author">
                                            <span class="card_author_name"><?php the_author() ?></span>
                                            <span class="card__author_title"><?php the_author() ?></span>
                                        </div>
                                    </div>
                                    <div class="card_footer">
                                        <span class="icon-time"> </span> <?php echo get_the_date("d/m/Y", strtotime($str)); ?>
                                        <span class="icon-comment">  </span> <?php echo get_comments_number(); ?>
                                        <span class="icon-share">  </span> 25
                                    </div>
                                </div>
                                <!-- FIN CODE CARDS -->
                            <?php endwhile;
                        endif;
                        wp_reset_postdata();
                        ?>

                    </div> <!-- row -->


                </div> <!-- articles-posts -->


            <!-- 2eme BLOC COM INTERNE -->

                <div  id="communication_posts" class="col-md-12" >

                    <div class="article_title col-md-12"> <h2>LA COMM' SOAT</h2> </div>

                    <div class="row">
                        <?php
                        $articles = new WP_Query('cat=70');

                        if ($articles->have_posts()) :

                            while ($articles->have_posts()) :
                                $articles->the_post();
                                ?>

                                <!-- CODE DES CARDS -->
                                <div class="card col-md-4 col-xs-12 col-sm-4">
                                    <div class="card_thumb" style="border-color:<?php echo $rl_category_color; ?>" >
                                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                                    </div>
                                    <span class="thumb_post_category" sstyle="background-color:<?php echo $rl_category_color; ?>;color: white; border-style: none"> <?php
                                        $category = get_the_category( $custompost );
                                        echo $category[0]->cat_name;
                                        ?> </span>
                                    <div class="card_body">
                                        <div class="card_title"> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <h3><?php the_title(); ?><h3> </a></div>
                                        <p class="card_description"> <a href="<?php the_permalink(); ?>"> <?php echo get_the_twitter_excerpt(); ?> </a></p>
                                        <div class="card_author">
                                            <span class="card_author_name"><?php the_author() ?></span>
                                            <span class="card__author_title"><?php the_author() ?></span>
                                        </div>
                                    </div>
                                    <div class="card_footer">
                                        <span class="icon-time"> </span> <?php echo get_the_date("d/m/Y", strtotime($str)); ?>
                                        <span class="icon-comment">  </span> <?php echo get_comments_number(); ?>
                                        <span class="icon-share">  </span> 25
                                    </div>
                                </div>
                                <!-- FIN CODE CARDS -->
                            <?php endwhile;
                        else : //fallback no content message here
                        endif;
                        wp_reset_postdata();
                        ?>
                    </div>
                </div>
            </div>
        </div> <!-- fermeture id="content" -->


    <!-- BARRE LATERALE DROITE - POSTS PROMOTION -->
    <div id="rightbar" class="post_area col-md-11 col-lg-2">

        <div class="row">
            <?php

            $articles = new WP_Query('cat=100');

            if ($articles->have_posts()) :

                while ($articles->have_posts()) :
                    $articles->the_post();
                    ?>

                    <!-- CODE DES CARDS -->
            <div class="card col-lg-12 col-md-3 col-xs-3 col-sm-3">
                <div class="card_thumb" style="border-color:<?php echo $rl_category_color; ?>" >
                    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
                </div>
                                    <span class="thumb_post_category" style="background-color:<?php echo $rl_category_color; ?>;color: white; border-style: none"> <?php
                                        $category = get_the_category( $custompost );
                                        echo $category[0]->cat_name;
                                        ?> </span>
                <div class="card_body">
                    <div class="card_title"> <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"> <h3><?php the_title(); ?><h3> </a></div>
                    <p class="card_description"> <a href="<?php the_permalink(); ?>"> <?php echo get_the_twitter_excerpt(); ?> </a></p>
                    <div class="card_author">
                        <span class="card_author_name"><?php the_author() ?></span>
                        <span class="card__author_title"><?php the_author() ?></span>
                    </div>
                </div>
                <div class="card_footer">
                    <span class="icon-time"> </span> <?php echo get_the_date("d/m/Y", strtotime($str)); ?>
                    <span class="icon-comment">  </span> <?php echo get_comments_number(); ?>
                    <span class="icon-share">  </span> 25
                </div>
            </div>
            <!-- FIN CODE CARDS -->
                <?php endwhile;
            else : //fallback no content message here
            endif;
            wp_reset_postdata();
            ?>
            <a href="#"> <div id="joinus" class="col-md-11 col-xs-11"> REJOINS-NOUS </div> </a>
        </div>


    </div>
    <!-- FIN BARRE LATERALE DROITE -->

</div>   <!-- fermeture class="row subpage" -->

<?php get_footer(); ?>

<?php wp_footer(); ?>

Your Answer

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

Browse other questions tagged or ask your own question.