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

admin管理员组

文章数量:1025457

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.

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.

• posts
• loop
• title

Share Improve this question edited Apr 3, 2019 at 21:00 Qaisar Feroz 2,14711 gold badge99 silver badges2020 bronze badges asked Apr 2, 2019 at 20:22 theasianbeantheasianbean 933 bronze badges 3

• Welcome to WordPress StackExchange! Please read How do I ask a good question and update your question accordingly. Code reviews are too localized for this Q+A. But I simply pasted your snippet in another WordPress template of mine and PHPStorm immediately linted that the very last </div> from your index.php snippet matches no opening <div> tag. Probably all you need to do is to remove the last </div> and everything should go back to normal. – norman.lol Commented Apr 2, 2019 at 20:30
• There doesn't seem to be anything wrong with your code - the_title() within the loop should show a title for each post. Perhaps the issue is in your query. I would suggest looking at another theme's structure - normally you never use index.php for a homepage template, you use front-page.php or home.php - and trying a query monitor plugin to see what specific posts WordPress called for. Perhaps your loop is pulling in more than just Post posts - attachments and Pages are also stored in "posts" so it could be you need to update the query to specify post type. – WebElaine Commented Apr 2, 2019 at 20:31
• 1 I see two instances of the_post() in the loop. First glance, not sure of the impact there but calling the_post() should only happen once. After a bit of reading, that is most likely the problem. I'll post an answer. – jdm2112 Commented Apr 2, 2019 at 20:57

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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/reference/functions/the_post/

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.

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.

• posts
• loop
• title

Share Improve this question edited Apr 3, 2019 at 21:00 Qaisar Feroz 2,14711 gold badge99 silver badges2020 bronze badges asked Apr 2, 2019 at 20:22 theasianbeantheasianbean 933 bronze badges 3

• Welcome to WordPress StackExchange! Please read How do I ask a good question and update your question accordingly. Code reviews are too localized for this Q+A. But I simply pasted your snippet in another WordPress template of mine and PHPStorm immediately linted that the very last </div> from your index.php snippet matches no opening <div> tag. Probably all you need to do is to remove the last </div> and everything should go back to normal. – norman.lol Commented Apr 2, 2019 at 20:30
• There doesn't seem to be anything wrong with your code - the_title() within the loop should show a title for each post. Perhaps the issue is in your query. I would suggest looking at another theme's structure - normally you never use index.php for a homepage template, you use front-page.php or home.php - and trying a query monitor plugin to see what specific posts WordPress called for. Perhaps your loop is pulling in more than just Post posts - attachments and Pages are also stored in "posts" so it could be you need to update the query to specify post type. – WebElaine Commented Apr 2, 2019 at 20:31
• 1 I see two instances of the_post() in the loop. First glance, not sure of the impact there but calling the_post() should only happen once. After a bit of reading, that is most likely the problem. I'll post an answer. – jdm2112 Commented Apr 2, 2019 at 20:57

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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/reference/functions/the_post/

本文标签： Loop doesn39t show title of second post and posts thereafter