-1

I need help with styling the first item in the loop differently and wrapping the rest in a container. I have seen a lot of questions that seem related and their various answers but I believe mine is different.

What I currently have:

<div class="dpe-flexible-posts row">

<?php if ( $flexible_posts->have_posts() ): $postCount = 0; while ( $flexible_posts->have_posts()): $postCount++; $flexible_posts->the_post(); global $post;
?>

<?php if($postCount == 1) { ?>

    <div <?php post_class('col-8'); ?>>
        <div class="dpe-flexible-posts-inner magB30">
            <div class="post-thumbnail">
                <a href="<?php echo the_permalink(); ?>">
                    <?php
                        if ( $thumbnail == true ) {
                            // If the post has a feature image, show it
                            if ( has_post_thumbnail() ) {
                                the_post_thumbnail( $thumbsize );
                            // Else if the post has a mime type that starts with "image/" then show the image directly.
                            } else  { ?>
                                <div class="entry-image">
                                  <a href="<?php the_permalink(); ?>" rel="bookmark">
                                <img src="<?php echo get_stylesheet_directory_uri() . '/inc/assets/img/default-image.png'; ?>" alt="<?php the_title(); ?>" />
                                </a>
                                </div>
                            <?php } ?>
                        <?php } ?>
                </a>
            </div>
            <div class="dpe-posts-content">
                <h3 class="h2"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
            </div>
        </div>
    </div>

<?php } else { ?>

    <div <?php post_class('col-4'); ?>>
        <div class="dpe-flexible-posts-inner">
                <div class="post-thumbnail">
                <a href="<?php echo the_permalink(); ?>">
                    <?php
                        if ( $thumbnail == true ) {
                            // If the post has a feature image, show it
                            if ( has_post_thumbnail() ) {
                                the_post_thumbnail( $thumbsize );
                            // Else if the post has a mime type that starts with "image/" then show the image directly.
                            } else  { ?>
                                <div class="entry-image">
                                  <a href="<?php the_permalink(); ?>" rel="bookmark">
                                <img src="<?php echo get_stylesheet_directory_uri() . '/inc/assets/img/default-image.png'; ?>" alt="<?php the_title(); ?>" />
                                </a>
                                </div>
                            <?php } ?>
                        <?php } ?>
                    </a>
                </div>
                <div class="dpe-posts-content">
                    <h3 class="h5"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                </div>
        </div>
     </div>

<?php } ?>

<?php endwhile; ?>

<?php   
endif; // End have_posts()

With the above code I can achieve the following:

< div class="row">

< div class="col-12 col-md-8 first-post">
</div>

< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>

</div>

But this is what I need help with achieving:

enter image description here

< div class="first-container">

< div class="first-post">
</div>

</div>

< div class="row second-container">

< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>
< div class="col-12 col-md-4 other-post">
</div>

</div>

I want the first post to be wrapped in its own container while the rest are wrapped in a different container so that I can integrate a vertical carousel with swiper-js.

Thanks in advance.

1 Answer 1

-1

If you are trying to style the first post with different HTML and others with other HTML structures. Then this code may help.

<div class="dpe-flexible-posts row">

<?php 

$firstQuery = new WP_Query('showposts=1');

if ( $firstQuery->have_posts() ) {
    while ( $firstQuery->have_posts() ) {
        $firstQuery->the_post();
        ?>
        <div <?php post_class('col-8'); ?>>
            <div class="dpe-flexible-posts-inner magB30">
                <div class="post-thumbnail">
                    <a href="<?php echo the_permalink(); ?>">
                        <?php
                            if ( $thumbnail == true ) {
                                // If the post has a feature image, show it
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail( $thumbsize );
                                // Else if the post has a mime type that starts with "image/" then show the image directly.
                                } else  { ?>
                                    <div class="entry-image">
                                      <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <img src="<?php echo get_stylesheet_directory_uri() . '/inc/assets/img/default-image.png'; ?>" alt="<?php the_title(); ?>" />
                                    </a>
                                    </div>
                                <?php } ?>
                            <?php } ?>
                    </a>
                </div>
                <div class="dpe-posts-content">
                    <h3 class="h2"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                </div>
            </div>
        </div>
        <?php
    }
}

$secondQuery = new WP_Query('offset=1');
if ( $secondQuery->have_posts() ) {
    while ( $secondQuery->have_posts() ) {
        $secondQuery->the_post();
        ?>
        <div <?php post_class('col-4'); ?>>
            <div class="dpe-flexible-posts-inner">
                    <div class="post-thumbnail">
                    <a href="<?php echo the_permalink(); ?>">
                        <?php
                            if ( $thumbnail == true ) {
                                // If the post has a feature image, show it
                                if ( has_post_thumbnail() ) {
                                    the_post_thumbnail( $thumbsize );
                                // Else if the post has a mime type that starts with "image/" then show the image directly.
                                } else  { ?>
                                    <div class="entry-image">
                                      <a href="<?php the_permalink(); ?>" rel="bookmark">
                                    <img src="<?php echo get_stylesheet_directory_uri() . '/inc/assets/img/default-image.png'; ?>" alt="<?php the_title(); ?>" />
                                    </a>
                                    </div>
                                <?php } ?>
                            <?php } ?>
                        </a>
                    </div>
                    <div class="dpe-posts-content">
                        <h3 class="h5"><a href="<?php echo the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
                    </div>
            </div>
        </div>
        <?php
    }
}
1
  • Hello @raashid-din, thanks for the try but your answer seems to display all the posts, in and outside the loop and also ignoring the plugin parameters. As stated in the question, i want to be able to wrap the second condition in the loop in its own div container in order to group them separately. I will still appreciate your input. Commented Dec 5, 2020 at 22:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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