How to style first post differently and wrap the others in their own container

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=h2a 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=h5a 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:

 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.

Topic design Wordpress

Category Web

1
answered at

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
    }
}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.