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.
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.
Share Improve this question edited Feb 4, 2019 at 8:10 Mark20 asked Feb 4, 2019 at 4:46 Mark20Mark20 171 silver badge7 bronze badges1 Answer
Reset to default 2get_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>