Display Category & Tags in a Responsive Grid Format (WordPress)
Creating visually appealing and organized displays of WordPress categories and tags has become essential for modern websites. A responsive grid format not only looks professional but also helps visitors navigate your content more effectively.
This comprehensive guide will walk you through various methods to display categories and tags in responsive grid layouts, from simple solutions for beginners to advanced custom implementations.
Understanding WordPress Categories and Tags
WordPress uses taxonomies to organize content, with categories and tags being the most common examples. Categories create hierarchical structures for broad topic organization, while tags provide specific keywords for detailed content labeling. When displayed effectively in a grid format, these taxonomies become powerful navigation tools that guide users to relevant content.
Video Tutorial
Note: You can use a code manager plugin like WP Code to insert this custom code snippets to your website. Watch the video to Learn More.
Display WordPress categories in a grid format.
<?php
$categories = get_categories();
if ( $categories ) {
echo '<div class="category-grid-wrapper">';
foreach ( $categories as $category ) {
$cat_link = get_category_link( $category->term_id );
echo '<a href="' . esc_url( $cat_link ) . '" class="category-grid-item">' . esc_html( $category->name ) . '</a>';
}
echo '</div>';
}
?>
<style>
.category-grid-wrapper {
display: grid;
gap: 12px;
margin: 20px 0;
grid-template-columns: repeat(1, 1fr); /* Mobile: 1 per row */
}
.category-grid-item {
display: block;
padding: 10px 16px;
background-color: #f3f4f6;
color: #111827;
text-align: center;
text-decoration: none;
border-radius: 8px;
border: 1px solid #e5e7eb;
font-family: system-ui;
font-weight: 600;
font-size: 19px;
transition: all 0.3s ease;
}
.category-grid-item:hover {
background-color: #2563eb;
color: #fff;
border-color: #1d4ed8;
}
/* Tablet: 3 per row */
@media (min-width: 640px) {
.category-grid-wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
/* Desktop: 4 per row */
@media (min-width: 1024px) {
.category-grid-wrapper {
grid-template-columns: repeat(4, 1fr);
}
}
</style>You can control the number of categories or tags to show per row in desktop, tablet and mobile devices individually.
Display WordPress Tags in a grid format.
<?php
$tags = get_tags();
if ( $tags ) {
echo '<div class="tag-grid-wrapper">';
foreach ( $tags as $tag ) {
$cat_link = get_tag_link( $tag->term_id );
echo '<a href="' . esc_url( $cat_link ) . '" class="tag-grid-item">' . esc_html( $tag->name ) . '</a>';
}
echo '</div>';
}
?>
<style>
.tag-grid-wrapper {
display: grid;
gap: 12px;
margin: 20px 0;
grid-template-columns: repeat(1, 1fr); /* Mobile: 1 per row */
}
.tag-grid-item {
display: block;
padding: 10px 16px;
background-color: #f3f4f6;
color: #111827;
text-align: center;
text-decoration: none;
border-radius: 8px;
border: 1px solid #e5e7eb;
font-family: system-ui;
font-weight: 600;
font-size: 17px;
transition: all 0.3s ease;
}
.tag-grid-item:hover {
background-color: #2563eb;
color: #fff;
border-color: #1d4ed8;
}
/* Tablet: 3 per row */
@media (min-width: 640px) {
.tag-grid-wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
/* Desktop: 4 per row */
@media (min-width: 1024px) {
.tag-grid-wrapper {
grid-template-columns: repeat(4, 1fr);
}
}
</style>Display Tags with Load More Button
This is suitable, if your website has a lot of tags. Initially it shows 7 tags and a load more button and when user click on the “Load More” Button, it shows the rest of the tags.
<?php
$tags = get_tags();
if ( $tags ) {
echo '<div class="tag-grid-wrapper">';
$total = count( $tags );
$limit = 7; // First 7 tags shown, 8th is "Load More" button
$i = 0;
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$hidden_class = $i >= $limit ? ' hidden-tag' : '';
echo '<a href="' . esc_url( $tag_link ) . '" class="tag-grid-item' . $hidden_class . '">' . esc_html( $tag->name ) . '</a>';
$i++;
if ( $i === $limit ) {
break;
}
}
if ( $total > $limit ) {
// Insert the "Load More" as 8th item
echo '<button id="loadMoreTags" class="tag-grid-item tag-load-more-btn">Load More <svg xmlns="http://www.w3.org/2000/svg" class="down-arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg></button>';
for ( $j = $limit; $j < $total; $j++ ) {
$tag = $tags[$j];
$tag_link = get_tag_link( $tag->term_id );
echo '<a href="' . esc_url( $tag_link ) . '" class="tag-grid-item hidden-tag">' . esc_html( $tag->name ) . '</a>';
}
}
echo '</div>';
}
?>
<style>
.tag-grid-wrapper {
display: grid;
gap: 12px;
margin: 20px 0;
grid-template-columns: repeat(1, 1fr);
}
.tag-grid-item {
display: block;
padding: 10px 16px;
background-color: #f3f4f6;
color: #111827;
text-align: center;
text-decoration: none;
border-radius: 8px;
border: 1px solid #e5e7eb;
font-family: system-ui;
font-weight: 600;
font-size: 17px;
transition: all 0.3s ease;
cursor: pointer;
}
.tag-grid-item:hover {
background-color: #2563eb;
color: #fff;
border-color: #1d4ed8;
}
.tag-load-more-btn {
background-color: #2563eb;
color: #ffffff;
border-color: #1d4ed8;
}
.tag-load-more-btn svg.down-arrow {
width: 18px;
height: 18px;
margin-left: 5px;
vertical-align: middle;
transition: transform 0.3s;
}
.tag-load-more-btn:hover svg.down-arrow {
transform: translateY(2px);
}
.hidden-tag {
display: none;
}
/* Tablet: 3 per row */
@media (min-width: 640px) {
.tag-grid-wrapper {
grid-template-columns: repeat(3, 1fr);
}
}
/* Desktop: 4 per row */
@media (min-width: 1024px) {
.tag-grid-wrapper {
grid-template-columns: repeat(4, 1fr);
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const loadMoreBtn = document.getElementById("loadMoreTags");
if (loadMoreBtn) {
loadMoreBtn.addEventListener("click", function () {
document.querySelectorAll(".hidden-tag").forEach(tag => {
tag.classList.remove("hidden-tag");
});
loadMoreBtn.remove();
});
}
});
</script>If you face any issues with the code or during implementation, do let us know in the comment section or you can contact us here.
☑️ Don’t forget to Subscribe Our Hindi Channel.
