0

I have a page named "Blog" and on this page I display all the articles posted to the newest to the oldest no matter the category. The thing is, right now each article has the same html/css, so it looks very uniform.

Here an Image of what I would like to do enter image description here

I don't really know how to start because right now the code says (index.php)

while ( have_posts() ) :
                the_post();

                /*
                 * Include the Post-Type-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
                 */
                get_template_part( 'template-parts/content', get_post_type() );

            endwhile;

And it gets this content.php

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package canoaguide
 */

?>
<div class="container box-padding">
    <article class="article-box" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div class="row">
            <div class="col-lg-6 box-article-left">
                <?php the_post_thumbnail('blog', ['class' => 'img_blog img-fluid d-block', 'title' => 'image associé à l’article']); ?>
            </div>
            <div class="col-lg-6 box-article-right">
                <div class="row article-top">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-4"><?php canoaguide_entry_footer(); ?></div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                        <?= do_shortcode('[rt_reading_time label="≃" postfix="min" postfix_singular="min"]') ?>
                        <span>| <?php if (function_exists('the_views')) {
                                the_views();
                            } ?> <i class="fas fa-eye"></i>
                        </span>
                    </div>
                </div>
                <div class="container-post">
                    <!--TITRE-->
                    <?php
                    if (is_singular()) :
                        the_title('<h1 class="titre-blog liens entry-title">', '</h1>');
                    else :
                        the_title('<h2 class="titre-blog liens entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h2>');
                    endif; ?>
                    <!--POST-->
                    <?php
                    the_content(
                        sprintf(
                            wp_kses(
                            /* translators: %s: Name of current post. Only visible to screen readers */
                                __('<span class="screen-reader-text">...</span>', 'canoaguide'),
                                array(
                                    'span' => array(
                                        'class' => array(),
                                    ),
                                )
                            ),
                            wp_kses_post(get_the_title())
                        )
                    );

                    wp_link_pages(
                        array(
                            'before' => '<div class="page-links">' . esc_html__('Pages:', 'canoaguide'),
                            'after' => '</div>',
                        )
                    );
                    ?>
                </div>
                <footer class="entry-footer">
                    <?php if ('post' === get_post_type()) :
                    ?>
                    <div class="row entry-meta align-items-center article-bottom">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                            <?php echo get_avatar('60', '50', '', 'Photo ou avatar de l’auteur'); ?>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                            <div class="text-center">
                                <span><?php canoaguide_posted_by(); ?></span>
                                <br>
                                <span style="font-style: italic"><?php canoaguide_posted_on(); ?></span>
                            </div>
                        </div>
                    </div>
            </div>
            <?php endif; ?>
            </footer>
        </div>
</div>
</article><!-- #post-<?php the_ID(); ?> -->
</div>

I don't know how to say : "here on the top take the last post and apply this css, the three post before this css and in a loop 1 3 1 3 etc". Basically like on the image.

update 23/04/2021 Following @Luckyfella advices I figured it out.

Here I set a counter variable starting to 0 and for each article it add +1. Over than 3 it comes back at 0 and etc ... I also created a $GLOBALS, it helped to see the position of each article.

$article = 0;
            $GLOBALS["article"];
            /* Start the Loop */
            while ( have_posts() ) :
                the_post();

                /*
                 * Include the Post-Type-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
                 */
                get_template_part( 'template-parts/content', get_post_type() );
            $article = ++$article;
            if ($article > 3) {
                $article = 0;
            }
            endwhile;

Finally, if my post = 0 you display the post like this. If my post > 0, you display the post like that. Finally I had to end my html with a last condition, if the post = 3 then you end the div.

$GLOBALS["article"];
?>
<?php if ($GLOBALS["article"] == 0) { ?>
    <div class="container box-padding">
        <article class="article-box" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="row">
                <div class="col-lg-6 box-article-left">
                    <?php the_post_thumbnail('blog', ['class' => 'img_blog img-fluid d-block', 'title' => 'image associé à l’article']); ?>
                </div>
                <div class="col-lg-6 box-article-right">
                    <div class="row article-top">
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4"><?php canoaguide_entry_footer(); ?></div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                            <?= do_shortcode('[rt_reading_time label="≃" postfix="min" postfix_singular="min"]') ?>
                            <span>| <?php if (function_exists('the_views')) {
                                    the_views();
                                } ?> <i class="fas fa-eye"></i>
                        </span>
                        </div>
                    </div>
                    <div class="container-post">
                        <!--TITRE-->
                        <?php
                        if (is_singular()) :
                            the_title('<h1 class="titre-blog liens entry-title">', '</h1>');
                        else :
                            the_title('<h2 class="titre-blog liens entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h2>');
                        endif; ?>
                        <!--POST-->
                        <?php
                        the_content(
                            sprintf(
                                wp_kses(
                                /* translators: %s: Name of current post. Only visible to screen readers */
                                    __('<span class="screen-reader-text">...</span>', 'canoaguide'),
                                    array(
                                        'span' => array(
                                            'class' => array(),
                                        ),
                                    )
                                ),
                                wp_kses_post(get_the_title())
                            )
                        );

                        wp_link_pages(
                            array(
                                'before' => '<div class="page-links">' . esc_html__('Pages:', 'canoaguide'),
                                'after' => '</div>',
                            )
                        );
                        ?>
                    </div>
                    <footer class="entry-footer">
                        <?php if ('post' === get_post_type()) :
                        ?>
                        <div class="row entry-meta align-items-center article-bottom">
                            <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                                <?php echo get_avatar('60', '50', '', 'Photo ou avatar de l’auteur'); ?>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                                <div class="text-center">
                                    <span><?php canoaguide_posted_by(); ?></span>
                                    <br>
                                    <span style="font-style: italic"><?php canoaguide_posted_on(); ?></span>
                                </div>
                            </div>
                        </div>
                </div>
                <?php endif; ?>
                </footer>
            </div>
        </article><!-- #post-<?php the_ID(); ?> -->
    </div>
<div class="container">
    <div class="row">
        <?php } ?>
        <?php if ($GLOBALS["article"] > 0) { ?>
            <div class="col-lg-4">
                <article class="article-box" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                    <?php the_post_thumbnail('blog', ['class' => 'img-fluid', 'title' => 'image associé à l’article']); ?>
                </article><!-- #post-<?php the_ID(); ?> -->
            </div>
        <?php } ?>
        <?php if ($GLOBALS["article"] == 3) { ?>
    </div>
</div>
<?php } ?>


2
  • 1
    You could set a counter variable to 1 before starting the while loop and increment +1 right before endwhile. In your template part: check if counter < 2 then it is the full-row article, if >= 2 it is one of 1third-row article. Build your html according to that. After the increment check if counter variable is >4 - then set it back to 1. – Luckyfella Apr 19 at 20:25
  • 1
    Hello @Luckyfella, sorry for the delay, I had to work on something else before trying your solution.It helped me a lot you have no idea. The final solution is a bit different but I didnt have the logic, so a thousand thank you for you. I wish you the best ! My post is edited. – LeDude Apr 23 at 8:51

Browse other questions tagged or ask your own question.