Loop doesn't show title of second post and posts thereafter

Question

I have a problem with my code, somehow. It worked fine before and now it seems that Wordpress does not show the title of the second blog posts (only the first blog post seems to work fine really, whereas the rest is just messed up).

I don't know if this is in an error in my code, or if this is an issue with Wordpress itself.

I can't fix it myself and desperately need help otherwise I have to start the code from scratch again.

This is my index.php file:

  <div class="row">
    <div class="column left">
      <div class="inside-container">
        this is the index.php where all the blog posts go
        <p></p>

        <?php while(have_posts()) {
              the_post(); ?>
              <h2 class="date_and_time"><?php the_time('F jS, Y'); ?></h2>
                  <?php the_post(); ?>
              <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                  <?php the_content(); ?>
              <div class="blog-post"></div>
          <?php } ?>


        <div class="pagination">
            <div style="float: left">
              <?php previous_posts_link('<div class="arrowleft"></div> newer posts'); ?>
            </div>
            <div style="float: right">
              <?php next_posts_link('<div class="arrowright"></div>older posts'); ?>
            </div>
        </div>
      </div>
    </div>
    <div class="column right">
      <div class="inside-sidebar">
          <?php get_sidebar(); ?>
      </div>
    </div>
  </div>
</div>

And my CSS file:

/* CONTAINER  blog posts and sidebar*/
.column {
  float: left;
  width: 100%
  background-color: #ddd;
}

.left {
  width: 65%;
  padding-bottom: 40px;
  background-color: #EFEFEF;
}

.right {
  width: 35%;
  padding-bottom: 20px;
  background-color: #E7E7E7;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* BLOG POST CONTAINER */
.inside-container {
  padding: 0px 40px 0px 0px;
}


/* SIDEBAR CONTAINER */
.inside-sidebar {
  padding: 0px 0px 0px 40px;
}


/* BLOG POST DATE */
h2.date_and_time {
  overflow: hidden;
  font-family: sans-serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
}

h2.date_and_time::before,
h2.date_and_time::after {
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
    background: #000;
}

h2.date_and_time:before {
  right: 1em;
  margin-left: -50%;
}

h2.date_and_time:after {
  left: 1em;
  margin-right: -50%;
}


/* BLOG POST TITLE */
h3 {
  font-family: serif;
  font-size: 25px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  font-weight: normal;
}


/* BLOG POSTS */
.blog-post {
  padding-bottom: 40px;
}

I really do not know what went wrong and I can't see the forest for the trees anymore. Also, this is my first time working with .php and Wordpress.

Answer 1

The code posted for your index.php file contains an error. The WordPress function the_post() is called twice in each iteration. As this function iterates the post index and sets up the conditionals for each post, calling this twice is the likely cause of your problem.

Remove the second instance of the_post() immediately after your H2.

<?php while(have_posts()) {
    the_post(); ?>
    <h2 class="date_and_time"><?php the_time('F jS, Y'); ?></h2>
    <?php the_post(); // REMOVE this line ?>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

https://developer.wordpress.org/reference/functions/the_post/