Display wordpress first post out of the loop

Question

I'm just beginning wordpress, so my question might sound a bit simple for some of you but i can't find how to make it work.

I'm building a blog page on wordpress, and i'd like to display the first post differently than the others, then display some static text, and then continue the posts loop from 2nd post.

My second problem is that i need the thumbnail to be placed inside of a div in absolute position (right now, it's shrinking weirdly when i resize the browser). On my bootstrap prototype, i've placed the image in a div and used background property to import the image. What is the best way to replace that behavior using wordpress?

I've made a quick sketch for this :

I've searched on stackoverflow and tried some snippets but i can't make none of them work.

BTW i'm using the UNDERSTRAP theme as a boilerplate.

HEre is my index.php code :

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package understrap
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

get_header();

$container = get_theme_mod( 'understrap_container_type' );
?>

<?php if ( is_front_page() && is_home() ) : ?>
    <?php get_template_part( 'global-templates/hero' ); ?>
<?php endif; ?>

<main>
    <div class="position-relative" id="index-wrapper">

    <section class="row no-gutters section section-hero d-flex justify-content-center align-items-end overflow-hidden pb-0 position-relative">
        <div class="section-hero-image">
            <?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
        </div>
        <div class="col-10 pt-sm pb-md pl-sm bg-default">
            <div class="row no-gutters d-flex flex-column">
                <h1 class="col-8 text-white h2">
                    <?php 
                        /* strip_tags removes <a> to make categories unclickable */
                        $categories_list = strip_tags( get_the_category_list( esc_html__( ', ', 'understrap' ) ) );

                        if ( $categories_list && understrap_categorized_blog() ) {
                            /* translators: %s: Categories of current post */
                            printf( '<h4 class="text-dark d-block w-100">' . esc_html__( '%s', 'understrap' ) . '</h4>', $categories_list ); // WPCS: XSS OK.
                        }
                    ?>
                </h1>
                <h1 class="col-8 text-white h2">
                    <?php
                        the_title(
                            sprintf( '<h4 class="entry-title mb-4"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
                            '</a></h4>'
                        );
                    ?>
                </h1>
                <div class="col-4 mt-md">

                </div>
            </div>
        </div>
    </section>


        <section class="section p-0" id="content" tabindex="-1">

            <div class="row content-container no-gutters py-lg">
              <div class="col-6 px-5">
                <h4>Lorem ipsum dolor sit amet</h4>
              </div>
              <div class="col-6 px-5">
                <p class="card-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>
              </div>
            </div>

            <div class="row no-gutters">

                <!-- Do the left sidebar check and opens the primary div -->
                <?php get_template_part( 'global-templates/left-sidebar-check' ); ?>

                <div class="site-main" id="main">
                    <div class="row no-gutters">
                    <?php if ( have_posts() ) : ?>

                        <?php /* Start the Loop */ ?>

                        <?php while ( have_posts() ) : the_post(); ?>

                            <?php

                            /*
                            * Include the Post-Format-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 Format name) and that will be used instead.
                            */
                            get_template_part( 'loop-templates/content', get_post_format() );
                            ?>

                        <?php endwhile; ?>

                    <?php else : ?>

                        <?php get_template_part( 'loop-templates/content', 'none' ); ?>

                    <?php endif; ?>

                    </div>

                </div><!-- #main -->

                <!-- The pagination component -->
                <?php understrap_pagination(); ?>

                <!-- Do the right sidebar check -->
                <?php get_template_part( 'global-templates/right-sidebar-check' ); ?>

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

    </section><!-- #content -->

    </div><!-- #index-wrapper -->   

</main>

<?php get_footer(); ?>

And here is my content.php :

<?php
/**
 * Post rendering content according to caller of get_template_part.
 *
 * @package understrap
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}
?>

<article class="col col-4 p-0" <?php post_class(); ?> id="post-<?php the_ID(); ?>">

    <div class="card card-custom">

    <header class="entry-header">
        <div class="card-header position-relative">
            <!-- <?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>  -->

            <?php
                if ( has_post_thumbnail() ) { 
                the_post_thumbnail('large', array('class' => 'card-img-top'));
                }
            ?>

        </div>

        <div class="row py-5 px-5 no-gutters card-custom-bottom">

            <!-- Category -->
            <?php 
                /* strip_tags removes <a> to make categories unclickable */
                $categories_list = strip_tags( get_the_category_list( esc_html__( ', ', 'understrap' ) ) );

                if ( $categories_list && understrap_categorized_blog() ) {
                    /* translators: %s: Categories of current post */
                    printf( '<h4 class="text-dark d-block w-100">' . esc_html__( '%s', 'understrap' ) . '</h4>', $categories_list ); // WPCS: XSS OK.
                }
            ?>
            <!-- Category end -->


            <?php
                the_title(
                    sprintf( '<h4 class="entry-title mb-4"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
                    '</a></h4>'
                );
            ?>

            <!-- <div class="entry-content">
                <?php the_excerpt(); ?>

                <?php
                wp_link_pages(
                    array(
                        'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
                        'after'  => '</div>',
                    )
                );
                ?>
            </div> -->

        </div>

        <!-- <?php if ( 'post' == get_post_type() ) : ?>

            <div class="entry-meta">
                <?php understrap_posted_on(); ?>
            </div>

        <?php endif; ?> -->

    </header><!-- .entry-header -->


    <!-- <footer class="entry-footer">

        <?php understrap_entry_footer(); ?>

    </footer> -->

    </div>
</article><!-- #post-## -->

Answer 1

For that, you need to use WordPress custom query. Basically, it allows you to display posts/posts related content in a different way than the default of the WP loop. You can find a good example of that in the codex here: Displaying Posts Using a Custom Select Query

I've also recently work on a theme using custom queries and the final design is a bit similar to the one you're looking for. Here's a piece of code that I've used here

Answer 2

This procedure is to change the class of tag to full width. There are many ways to do this but I find this is kinda simple. First, take out the tag from your content.php and place it inside index.php. This is to check and change the classes inside the article tag.

<div class="site-main" id="main">
<div class="row no-gutters">
<?php if ( have_posts() ) : ?>

    <?php /* Start the Loop */ ?>


    <?php 
    // Required variables
    $post = $posts[0]; $c=0; ?>

    <?php while ( have_posts() ) : the_post(); ?>


        <article class="col p-0 <?php $c++; if($c == 1) { echo 'col-12'; }else{ echo 'col-4'; } ?>" <?php post_class(); ?> id="post-<?php the_ID(); ?>"> 

            <?php

            /*
            * Include the Post-Format-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 Format name) and that will be used instead.
            */
            get_template_part( 'loop-templates/content', get_post_format() );
            ?>

        </article>


    <?php endwhile; ?>

<?php else : ?>

    <?php get_template_part( 'loop-templates/content', 'none' ); ?>

<?php endif; ?>

</div>

Answer 3

You need to forget the default WordPress loop. Use the WP_Query class instead to query your posts.

$query = new WP_Query([
   ‘post_type’ => ‘post’,
   ‘posts_per_page => -1,
]);

 // Get the first post
$firstElement = array_shift($query->posts);

 // Get the other posts exect first element
$otherPosts = $query->posts;

Now you need to loop inside your template to create your grid of posts.