How To Display Number In Post WordPress

I want to display the sequence number in the wordpress loop in the sidebar by category Software but the number in the sequence is not showing, I don’t know how to display it.

i want to show number like this

enter image description here

this is my code in sidebar.php

<?php
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'category_name' => 'Software'
    );
    
    $myposts = new WP_Query($args);
    
    // the loop
    if ($myposts->have_posts()):
        while ($myposts->have_posts()):
            $myposts->the_post();
            // display article
            get_template_part('template-parts/sidebar/latest-content-2', get_post_format());
        endwhile;
    endif;
    
    wp_reset_postdata();
  ?>

and this my code in content.php

 <!-- POST PREVIEW -->
<div class="post-preview tiny padded gaming-news">
    <!-- POST PREVIEW IMG WRAP -->
    <a href="<?php the_permalink(); ?>">
        <div class="post-preview-img-wrap">
            <!-- POST PREVIEW IMG -->
            <figure class="post-preview-img liquid">
                <?php the_post_thumbnail(); ?>
            </figure>
            <!-- /POST PREVIEW IMG -->
        </div>
    </a>
    <!-- /POST PREVIEW IMG WRAP -->
    <!-- BUBBLE ORNAMENT -->
    <div class="bubble-ornament small black no-link">
        <p class="bubble-ornament-info">01</p>
    </div>
    <!-- /BUBBLE ORNAMENT -->
    <!-- POST PREVIEW TITLE -->
    <a href="<?php the_permalink(); ?>" class="post-preview-title"><?php the_title(); ?></a>
    <!-- POST AUTHOR INFO -->
    <div class="post-author-info-wrap">
        <p class="post-author-info small light">By <a
                    href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"
                    class="post-author"><?php the_author(); ?></a><span
                    class="separator">|</span><?php the_time( 'F j, Y' ); ?></p>
    </div>
    <!-- /POST AUTHOR INFO -->
</div>
<!-- /POST PREVIEW -->

Answer

You can pass arguments to get_template_part(), so really all you need to do is pass in an iterator value $i:

<?php
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'category_name' => 'Software'
    );
    
    $myposts = new WP_Query($args);
    
    // the loop
    if ($myposts->have_posts()):
        // Start the iterator here. Start at one so the first post has "1"
        $i = 1;
        while ($myposts->have_posts()):
            $myposts->the_post();
            // display article. Pass the iterator into the template part.
            get_template_part('template-parts/sidebar/latest-content-2', get_post_format(), ['post_number' => $i ]);
        // Increase the value of $i.
        $i++;
        endwhile;
    endif;
    
    wp_reset_postdata();
  ?>

Then here, you get the arguments that were passed to the template part, and then echo it out in your bubble-ornament element.

<?php 
    // Get the value of the iterator
    $post_number = $args['post_number'];
?>
 <!-- POST PREVIEW -->
<div class="post-preview tiny padded gaming-news">
    <!-- POST PREVIEW IMG WRAP -->
    <a href="<?php the_permalink(); ?>">
        <div class="post-preview-img-wrap">
            <!-- POST PREVIEW IMG -->
            <figure class="post-preview-img liquid">
                <?php the_post_thumbnail(); ?>
            </figure>
            <!-- /POST PREVIEW IMG -->
        </div>
    </a>
    <!-- /POST PREVIEW IMG WRAP -->
    <!-- BUBBLE ORNAMENT -->
    <div class="bubble-ornament small black no-link">
        <!-- Echo out the post number here from the iterator. Add the "0" before the number -->
        <p class="bubble-ornament-info"><?php echo '0' . $post_number; ?></p>
    </div>
    <!-- /BUBBLE ORNAMENT -->
    <!-- POST PREVIEW TITLE -->
    <a href="<?php the_permalink(); ?>" class="post-preview-title"><?php the_title(); ?></a>
    <!-- POST AUTHOR INFO -->
    <div class="post-author-info-wrap">
        <p class="post-author-info small light">By <a
                    href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>"
                    class="post-author"><?php the_author(); ?></a><span
                    class="separator">|</span><?php the_time( 'F j, Y' ); ?></p>
    </div>
    <!-- /POST AUTHOR INFO -->
</div>
<!-- /POST PREVIEW -->

Advertisement

Answer