get_the_category() doesn’t work inside <figcaption>

2 Views

I am facing an odd issue. I am trying to use one of the js script gallery on my wordpress theme. I want to display category of post as a figcaption, but when I put my PHP code inside it doesn’t work. When I paste the same code outside tags it works like a charm.

Note that script is doing something because if there are more than 2 cateogories it is pritning commas , however doesn’t show category name.

Read More
 <div class="grid">
          <figure class="effect-sarah">
            <?php the_post_thumbnail(); ?>
            <figcaption>
              <h2>**Category: <span>  <?php $categories=get_the_category(); $separator=", " ; $output='' ; if ($categories) { foreach ($categories as $category) { $output .='<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator; } echo trim($output, $separator); } ?></span>**</h2>
              <a href="<?php the_permalink(); ?>">View more</a>
            </figcaption>
          </figure>
        </div>


        <div class="title-excerpt">
          <h3> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> <small> <?php the_time( 'F j, Y g:i a'); ?></small></h3>
        </div>
      Category: <span>  <?php $categories=get_the_category(); $separator=", " ; $output='' ; if ($categories) { foreach ($categories as $category) { $output .='<a href="' . get_category_link($category->term_id) . '">' . $category->cat_name . '</a>' . $separator; } echo trim($output, $separator); } ?></span>
              <a href="<?php the_permalink(); ?>">View more</a>

enter image description here

Post Views: 2

Related posts

1 comment

  1. So, your PHP is working wonderfully. You can confirm that by inspecting the page and seeing this html:

    a snapshot of html showing all links

    The problem is the CSS. Specifically, there is a lot of CSS around the figure and figcaption elements, and their descendant a tags. The very first clue (and I believe there’s several problems) is this little bit of CSS:

    enter image description here

    This makes the link indent 200% (e.g. double the tabs), sets its font-size to 0 (e.g. so small it can’t be seen), as well as its opacity to 0 (e.g. even if it was bigger, it’d be completely transparent).

    I know this doesn’t “answer” your question per se, but it does clarify that your PHP is not the problem!

Comments are closed.