最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

wp query - How to show one post different from the rest?

programmeradmin0浏览0评论

the code I am using below will show the last 5 post in whatever category I choose, but I was wondering, How can I get it so that the first post shows different from the other 4?

I want the first post to show the thumbnail and the title under it and the rest to show titles. I found a code on a recent post on here but it's closed, so I couldn't comment and ask questions.

Here is the code I'm using

<?php
$queryObject = new  Wp_Query( array(
    'showposts' => 5,
    'post_type' => array('post'),
    'category_name' => videos,
        'orderby' => 1,
    ));

// The Loop
if ( $queryObject->have_posts() ) :
  $i = 0;
  while ( $queryObject->have_posts() ) :
      $queryObject->the_post();
      ?>
      <?php if ( $i == 0 ) : ?>
          <div class="first-post">
      <?php endif; ?>
      <a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
          <?php the_post_thumbnail('sidethumbs'); ?>
      </a>

      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      <?php if ( $i == 0 ) : ?>
          </div>
      <?php endif; ?>    
      <?php $i++; ?>
  <?php endwhile; ?>

It's working but the problem is, I don't know where to begin the second styling or how to begin it which the person failed to explain, can anyone help me.

the code I am using below will show the last 5 post in whatever category I choose, but I was wondering, How can I get it so that the first post shows different from the other 4?

I want the first post to show the thumbnail and the title under it and the rest to show titles. I found a code on a recent post on here but it's closed, so I couldn't comment and ask questions.

Here is the code I'm using

<?php
$queryObject = new  Wp_Query( array(
    'showposts' => 5,
    'post_type' => array('post'),
    'category_name' => videos,
        'orderby' => 1,
    ));

// The Loop
if ( $queryObject->have_posts() ) :
  $i = 0;
  while ( $queryObject->have_posts() ) :
      $queryObject->the_post();
      ?>
      <?php if ( $i == 0 ) : ?>
          <div class="first-post">
      <?php endif; ?>
      <a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
          <?php the_post_thumbnail('sidethumbs'); ?>
      </a>

      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      <?php if ( $i == 0 ) : ?>
          </div>
      <?php endif; ?>    
      <?php $i++; ?>
  <?php endwhile; ?>

It's working but the problem is, I don't know where to begin the second styling or how to begin it which the person failed to explain, can anyone help me.

Share Improve this question edited Nov 3, 2020 at 13:26 knilkantha 115 bronze badges asked May 29, 2013 at 4:32 user32447user32447 8351 gold badge12 silver badges16 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 2

The code you posted will only make difference in adding <div class="first-post"></div> for the first post, so it still displays same information for all posts.

Try this instead:

<?php
$queryObject = new  Wp_Query( array(
    'showposts' => 5,
    'post_type' => array('post'),
    'category_name' => videos,
    'orderby' => 1,
    ));

// The Loop
if ( $queryObject->have_posts() ) :
    $i = 0;
    while ( $queryObject->have_posts() ) :
        $queryObject->the_post();
        if ( $i == 0 ) : ?>
            <div class="first-post">
            <a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
                <?php the_post_thumbnail('sidethumbs'); ?>
            </a>
        <?php else: ?>
            <div class="secondary-post">
        <?php endif; ?>
        <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php the_title(); ?>
        </a>
        </div>
        <?php $i++;
    endwhile;
endif;

The code you show wraps your first post in a <div class='first-post'>...</div> element. You can add styles to it in your theme's CSS file(s) (either style.css or a custom one if you're loading custom styles):

div.first-post {
    /* First Post styles here */
    /* for example, if you want the text to be **bold** */
    font-weight: bold;
}
发布评论

评论列表(0)

  1. 暂无评论