Loop wordpress in list with classes

Question

I’m making a loop in Wordpress to capture the posts of certain categories and show them as in the image below (image - html template).

I used the Codex of WP to see how I was gonna do it, so I decided to do 2 loops different. One of these loops capture the post of the featured category (which is the biggest image of my model).

<div class="module">
        <div class="destaque-mosaico home">
            <ul style="position: relative; height: 729px;">
                <?php
                    global $post;
                    $args = array(
                                'category' => '5'
                            );
                    $postDestaque = get_posts($args);
                    foreach( $postDestaque as $post) : setup_postdata( $post ); ?>
                        <li class="destaque" style="position: absolute; left: 0px; top: 0px;">
                            <a href="<?php the_permalink(); ?>">
                            <!-- <img  src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/espetaculo-cartas-brasileiras-644x485.jpg"  /> -->
                            <?php if ( has_post_thumbnail() ) : ?>
                                <?php the_post_thumbnail(); ?>
                            <?php else: ?>
                                <img src="<?php bloginfo('template_url'); ?>/img/dummies/featured-1.jpg" alt="Alt text" />
                            <?php endif; ?>
                            <span class="overlay">
                                <h2><?php the_title(); ?></h2>
                                <!-- <span class="tag light-blue-bg c-black">sarau lítero-musical </span> -->
                            </span>
                            </a>
                        </li>
                    <?php endforeach; ?>
                    <?php get_template_part('partials/home', 'post'); ?>

            </ul>
        </div>
    </div>

The Prox. Loop should go through the other elements <li> of the list, but the <li> of post featured has a different class from others posts normal (each 1 has a class css own).

How do I make for the loop understand this difference and show posts equal to my template???

Follow the remaining code:

<li class="item-1" style="position: absolute; left: 650px; top: 0px;">
        <a href="http://www.cultura.pe.gov.br/edicao-especial-do-portomidia-game-jam-reune-mulheres-do-mercado-de-jogos/">
            <img  src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/JAM-DAS-MINAS-320x238.png"  />
            <span class="overlay hide">
                <h2>Edição especial reúne mulheres desenvolvedoras de jogos</h2>
            <!-- <span class="more">+ leia mais</span> -->
                <span class="tag c-black light-blue-bg">PORTOMÍDIA GAME JAM</span>
            </span>
        </a>                        
    </li>
    <li class="item-2" style="position: absolute; left: 650px; top: 243px;">
        <a href="http://www.cultura.pe.gov.br/canal/literatura/forum-em-defesa-das-bibliotecas-livro-leitura-e-literatura-convoca-para-primeira-reuniao-do-ano/">
            <img  src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/1ª-Reunião-Ampliada-do-Fórum-Pernambucano-em-Defesa-das-BLLL-15-fev-2017-2-320x238.jpeg"  />
            <span class="overlay hide">
                <h2>FPELLLB convoca agentes para a primeira reunião de 2018</h2>
                <!-- <span class="more">+ leia mais</span> -->
                <span class="tag c-black light-blue-bg">Literatura</span>
            </span>
        </a>                        
    </li>
    <li class="item-3" style="position: absolute; left: 0px; top: 486px;">
        <a href="http://www.cultura.pe.gov.br/canal/funcultura/acupe-grupo-de-danca-promove-curso-gratuito">
            <img  src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/Hans-V.-Manteuffel70-min-320x238.jpg"  />
            <span class="overlay hide">
                <h2>Acupe Grupo de Dança promove curso gratuito</h2>
                <!-- <span class="more">+ leia mais</span> -->
                <span class="tag c-black light-blue-bg">INCENTIVO FUNCULTURA</span>
            </span>
        </a>                        
    </li>
    <li class="item-4" style="position: absolute; left: 325px; top: 486px;">
        <a href="http://www.cultura.pe.gov.br/canal/carnaval/75-anos-de-j-michiles-em-ritmo-de-frevo/">
            <img  src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/39407106974_62cdb2b1dc_k-320x238.jpg"  />
            <span class="overlay hide">
                <h2>Os 75 anos de J. Michiles no ritmo do frevo</h2>
                <!-- <span class="more">+ leia mais</span> -->
                <span class="tag c-black light-blue-bg">ESPECIAL</span>
            </span>
        </a>                        
    </li>
    <li class="item-5" style="position: absolute; left: 650px; top: 486px;">
        <a href="http://www.cultura.pe.gov.br/escolas-de-samba-afinam-a-bateria-para-o-desfile-no-carnaval-do-recife/">
            img  src="http://www.cultura.pe.gov.br/wp-content/uploads/2018/02/39051066365_437b604a3e_k-320x238.jpg"  />
            <span class="overlay hide">
                <h2>Escolas de Samba do Recife afinam a bateria para o Carnaval</h2>
                <!-- <span class="more">+ leia mais</span> -->
                <span class="tag c-black light-blue-bg">carnaval 2018</span>
            </span>
        </a>                        
    </li>

All help is welcome!

Answer 1

You can use Wp_query to make the searches and when to print on the screen, just capture the first post with $posts->the_post() and create the li.destaque.

With the method the_post, the WP will jump to the next post available and then you can create a loop in the following posts.

And to add the numeral to the class name, just create a variable $count = 1 and each time loop run, you sum up +1.

Commented example:

<?php

/**
 * StackOverflow #277827
 * /questions/277827
 */

require dirname(__FILE__)."/wp-load.php";

/**
 * Captura os 6 primeiros posts
 * Aqui você precisa criar sua regra de busca
 * Pode ser por categoria, taxonomia etc.
 * Saber mais: https://codex.wordpress.org/Class_Reference/WP_Query
 */
$posts = new WP_Query([
    'post_type'      => 'post',
    'posts_per_page' => 6,
    'max_num_pages'  => 1
]);

/**
 * Inicializa a variável com o primeiro
 * numeral da classe `li`
 */
$count = 1;
?>

<!-- Verifica se há posts disponíveis -->
<?php if ($posts->have_posts()): ?>
<div class="module">
    <div class="destaque-mosaico home">
        <ul style="position: relative; height: 729px;">

            <!-- -------------------------------- -->
            <!-- Captura o primeiro post          -->
            <!-- Este post será o destaque        -->
            <!-- Em seguite "pula" para o próximo -->
            <!-- -------------------------------- -->
            <?php $posts->the_post(); ?>
            <li class="destaque">
                <a href="<?php the_permalink(); ?>">
                <?php if ( has_post_thumbnail() ): ?>
                    <?php the_post_thumbnail(); ?>
                <?php else: ?>
                    <img src="<?php bloginfo('template_url'); ?>/img/dummies/featured-1.jpg" alt="Alt text" />
                <?php endif; ?>
                <span class="overlay">
                    <h2><?php the_title(); ?></h2>
                </span>
                </a>
            </li>

            <!-- -------------------------------- -->
            <!-- Inicia o loop nos demais posts   -->
            <!-- Imprime a variável $count e soma -->
            <!-- o valor dela + 1                 -->
            <!-- -------------------------------- -->
            <?php while( $posts->have_posts() ): $posts->the_post(); ?>
            <li class="item-<?php echo $count++; ?>">
                <a href="<?php the_permalink() ?>">

                    <?php if ( has_post_thumbnail() ): ?>
                        <?php the_post_thumbnail(); ?>
                    <?php else: ?>
                        <img src="<?php bloginfo('template_url'); ?>/img/dummies/featured-1.jpg" alt="Alt text" />
                    <?php endif; ?>

                    <span class="overlay hide">
                        <h2> <?php the_title(); ?> </h2>
                        <span class="tag c-black light-blue-bg"> Tag Here </span>
                    </span>
                </a>                        
            </li>
            <?php endwhile; ?>


        </ul>
    </div>
</div>
<?php endif; ?>

And as each li contains its class, no need for attribute style, simply add these values to the class in question.

div.module div.destaque-mosaico.home ul {    
    position: relative;
    height: 729px;
}

div.module div.destaque-mosaico.home ul li.destaque {    
    position: absolute;
    left: 0px;
    top: 0px;
}

div.module div.destaque-mosaico.home ul li.item-1 {    
    position: absolute;
    left: 650px;
    top: 0px;
}

div.module div.destaque-mosaico.home ul li.item-2 {    
    position: absolute;
    left: 650px;
    top: 243px;
}

div.module div.destaque-mosaico.home ul li.item-3 {    
    position: absolute;
    left: 0px;
    top: 486px;
}

div.module div.destaque-mosaico.home ul li.item-4 {    
    position: absolute;
    left: 325px;
    top: 486px;
}

div.module div.destaque-mosaico.home ul li.item-5 {    
    position: absolute;
    left: 650px;
    top: 486px;
}