Related Posts with Numbers Wordpress

Question

I want to add numbers in posts to get the output below:

 <?php 
                        $args= array(
                            'posts_per_page'=>8,
                            'date_query' => array(
                                array(
        'year' => date( 'Y' ),
        'week' => date( 'W' ),
    ),
),
                            'meta_key' => 'popular_posts',
                            'order' => 'DESC',
                            'orderby' => 'meta_value_num'

                            );
                            $i=0;
                            $funLoop = new WP_Query( $args );
                            while ($funLoop -> have_posts() ) : $funLoop->the_post(); $i++;
                            $cat = get_the_category($post->ID)[0];
                        ?>

 <div class="small-12 medium-6 columns unpadded"> <article class="small-12 med columns articles-<?php echo$cat->slug; ?>"> <a href="<?php the_permalink();?>"> <div class="number"> 1. </div> 

Answer 1

The best method is to wrap your content in <ol> . But if you cant you can make usage of the css counter.

Example: Your html:

<div class="small-12 medium-6 columns unpadded">
<article class="small-12 med columns articles-<?php echo$cat->slug; ?>">
<a href="<?php the_permalink();?>">
<div class="number">

</div>
</a>
<a href="<?php the_permalink();?>">
<div class="number">

</div>
</a>
<a href="<?php the_permalink();?>">
<div class="number">

</div>
</a>
</article>

CSS:

    body {
      counter-reset: mynum;
    }

    .artikulli a .number {
      counter-increment: mynum;
    }
   .artikulli a .number:before {
      content: counter(mynum)".";
    }

Working codepen: https://codepen.io/anon/pen/VBgKrW