Displaying post per day

Currently I have the code displayed below.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <a class="vissted" href="https://wordpress.stackexchange.com/questions/215687/<?php the_permalink(); ?>">
            <div class="hovereffect">
                <div class="thumbnail">
                    <?php the_post_thumbnail('singles', array( 'class'  => "img-responsive")); ?>
                    <div class="overlay">
                        <h2><?php the_title(); ?></h2>
                    </div>
                    <div class="caption">
                        <div class="ratings">
                            <p class="pull-right"> </p>
                            <p>
                               Watch Video
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
<?php endwhile; else : ?>
    <p>
        <?php _e( 'Sorry, no posts matched your criteria.' ); ?>
    </p>
<?php endif; ?>
<?php wp_reset_query(); ?>

This code just displays EVERY post on my website, which is cool and all but I am looking to take it to the next level. How can I make it so that it displays post per day so for example.

You see in the top corner it displays the date of the post, I would love for it to do this on my website then limit to 1 week but display each result in a new block.

This is quite basic but should help you on your way.

//Get posts for the current week
$args = array(
    'date_query' => array(
        array(
            'year' => date( 'Y' ),
            'week' => date( 'W' ),
        )
    )
);

//Check for search query
if ( isset( $_GET['s'] ) ) {
    $args['s'] = $_GET['s'];
}

//Create these variables for use later
$i = 0;
$previous_post_date = 0;

$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :

    //Get the total amount of posts based on the query
    $count = $the_query->found_posts;

    while ( $the_query->have_posts() ) : $the_query->the_post();

        //Get post date
        $post_date = get_the_time('M j, Y');

        //Where the magic happens, see below for explanation
        if ( $previous_post_date !== $post_date ) {

            //If not the first time close div as a daily-block isn't created until the 2nd loop
            if ( $previous_post_date !== 0 ) {
                    echo '</div>';
            }

            $previous_post_date = $post_date;
            echo '<div class="daily-block">' . $post_date;
        } ?>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
            <a class="vissted" href="https://wordpress.stackexchange.com/questions/215687/<?php the_permalink(); ?>">
                <div class="hovereffect">
                    <div class="thumbnail">
                        <?php the_post_thumbnail( 'singles', array( 'class'  => "img-responsive" ) ); ?>
                        <div class="overlay">
                            <?php the_title( '<h2>', '</h2>' ); ?>
                        </div>
                        <div class="caption">
                            <div class="ratings">
                                <p class="pull-right"> </p>
                                <p>Watch Video</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <?php
        //Increment $i
        $i++;
        //Check if it's the end of the loop (i.e. $i = found_posts)
        if ( $i == $count ) {
            echo '</div>';
        } ?>

    <?php endwhile; else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
    <?php endif;
wp_reset_postdata(); ?>

Just to explain the conditional. At the start we set $previous_post_date to 0. This means the conditional inside the loop will always appear true (i.e. previous date doesn’t match current date) on the first ‘loop’ and will output the date. The first check makes sure that we don’t output a closing div as a daily-block div doesn’t exist yet.

When true we set the $previous_post_date to equal $post_date so that this conditional will no longer be true while looping through posts of the same day. Once you reach a post with a different date it will output the title and reset the previous date again. This time it will close the open daily-block div and reopen another.

At the end we check to see if its the end of the loop and close the daily-block div.

If you need further clarification just let me know.

Update for search results

For this to work on a search results page you need to add the following snippet of code just beneath the $args array. I’ve updated the main code snippet to show this.

if ( isset( $_GET['s'] ) ) {
    $args['s'] = $_GET['s'];
}

What that does is check the URL for a search query string, then add it to the query if found. Bear in mind this will still only show results from this week, but based on the searched keyword.