Display wordpress first post out of the loop

Related searches

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

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.

First post outside of loop, homepage only?, try and add this before your code: <?php if ( have_posts() && is_home() && ! is_paged() ) : ?> <?php the_post(); ?> <?php get_template_part(� For each post in the bundle, this Loop first creates an HTML <article> tag. Inside that, it displays first the title, and then a short excerpt—by default, the first 55 words followed by […] —of the current post. So taking some Posts from the blog of our site Press Up as examples, the Loop above outputs:

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>

How to Use the WordPress Loop to Style Your First Post Differently, Want to add custom styling to your blog so your first post stands out from I want to display the first post in my loop differently from subsequent� The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post.

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

The Loop | Theme Developer Handbook, Displaying first full post and excerpts for the rest of the posts does that job for you. Worry not as we teach you how to set your WordPress loop without even going� Since you know your target post ID (302), you may find useful this shorthand syntax that you can use out of the loop (though its performance is pretty much the same as in any other alternative method:) echo(get_post_field('post_content',302));

The Loop � WordPress Codex, The WordPress Loop is the code that WordPress uses to display content on your website. Take your index.php template, for example. In a basic blogging theme, this template is generally used to display several posts or post excerpts on your home page. The index.php template uses the WordPress Loop in order to

How To Display Full First Post Then Excerpts In WordPress Loop, The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags.

First you will need to find the loop that you are working with. Then you will need to add the following parameter: query_posts('posts_per_page=5&offset=1'); This query is telling the loop to only display 5 posts which follow the most recent post (1). The important part in this code is “offset” and this magic word is doing the whole thing.