0

I have a rather simple problem I can't solve. I have custom styling for my cards and one of the elements of the cards is the category, when I access the_category() from the Loop it comes with its own weird styling (looks like a list item anchor). I would like to get the url of the category and the name of the category within my while loop, my code is shown below:

<div class="container body-margin">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="card">
        <div class="row">
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()), 'thumbnail' ); ?>
            <img src="<?php echo $url ?>" class="img-responsive card-image" />
        </div>

        <div class="row card-body">
            <div><a class="card-body-category" href="#the-category-url"><?php the_category(); ?></a></div>
            <div><h4 class="card-body-title"><b><?php the_title(); ?></b></h4></div>
            <div><p class="card-body-date"><?php the_date(); ?></p></div>
        </div>
    </div>
  <?php endwhile; ?>
</div>

Most of the solutions I saw had people accessing their tags outside the while loop with the get_the_category() function, this does not suit what I want to do, would be really grateful for any help.

1

get_the_category works within the loop as well, don't pass a post ID and it will default to the current post in the loop.

The first example in the docs for get_the_category show how to output the url and name of the first (or only) category:

$categories = get_the_category();
if ( ! empty( $categories ) ) {
    echo '<a href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a>';
}

EDIT: Your original code with the above example added:

<div class="container body-margin">
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class="card">
        <div class="row">
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()), 'thumbnail' ); ?>
            <img src="<?php echo $url ?>" class="img-responsive card-image" />
        </div>

        <div class="row card-body">
            <?php

            $categories = get_the_category();
            if ( ! empty( $categories ) ) {
                echo '<div><a class="card-body-category" href="' . esc_url( get_category_link( $categories[0]->term_id ) ) . '">' . esc_html( $categories[0]->name ) . '</a></div>';
            }

            ?>
            <div><h4 class="card-body-title"><b><?php the_title(); ?></b></h4></div>
            <div><p class="card-body-date"><?php the_date(); ?></p></div>
        </div>
    </div>
  <?php endwhile; ?>
</div>      
| improve this answer | |
  • <?php $categories = get_the_category(); ?> <div><p class="banner-article-topic"><?php esc_html( $categories[0]->name ); ?></p></div> Tried this, tried with an anchor, tried to introduce local $count variable, tried to make $categories global (my content is in a separate file) and access the array elements using a $count variable, all of these solutions did not work. – Mark20 Feb 4 '19 at 5:42
  • the code in your comment doesn't work because you don't echo the value returned from esc_html. that function doesn't produce any output on its own. – Milo Feb 4 '19 at 5:53
  • Thanks for that, but you mentioned that the example shows "how to output the url and name of the first (or only) category" what about the current item of the loop? It doesn't seem to be given or maybe I missed it. – Mark20 Feb 4 '19 at 6:08
  • It shows the first (or only) category for each post in the loop. Calling the_post() populates a global variable, $post. Functions that can/have to be used in the loop use the contents of $post to get data for the current post. – Milo Feb 4 '19 at 6:47
  • $post = get_post(); $category = get_the_category( $post->ID ); $category_url = esc_url( get_category_link( $category->term_id ) ); $category_name = esc_html( $category->name ); Not working, this is the only stuff I change. – Mark20 Feb 4 '19 at 7:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.