Adding Tag Support to the Carbonate Theme

While building this website up with Carbonate I found that I like having tags to help guide traffic around the site, but having no way to show all the posts for a tag was saddening.

I like being able to point people at the entirety of a tag when it makes sense from the standpoint of the post in question, like if we are talking about niche selection it is very nice to point you at all the posts on niche selection I have written.

In Carbonate this is not there by default and so I had to work through the best way to institute it on my site to get them to display as I wanted with the posts I wanted when I manually tried to point at them I just got the blogroll.

First I needed to make a new file in the theme folder called tag.php which will contain all the code to display the posts correctly.

<?php get_header(); ?>


<div class="container py-5 min-height">
    
    <!-- START CATEGORY TITLE & DESCRIPTION -->
    <h1 class="black text-center mb-3"><?php single_cat_title(); ?></h1>
    <p class="mb-3"><?php the_archive_description(); ?></p>
    <!-- END CATEGORY TITLE & DESCRIPTION -->
    
    <!-- START CATEGORY POSTS -->
    <div class="row">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        
            <div class="col-md-4 post-card">
                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="black">
                    <?php if ( has_post_thumbnail() ) { ?>
                        <img src="<?php the_post_thumbnail_url('original'); ?>" alt="<?php the_title(); ?>" class="img-fluid">
                    <?php } else { ?> 
                        <!-- IF POST HAS NO FEATURED IMAGE, SHOW DEFAULT IMAGE – MUST HAVE SAFE SVG PLUGIN INSTALLED -->
                        <img src="<?php bloginfo('template_directory'); ?>/images/no-image.svg" alt="No Featured Image" class="img-fluid">
                    <?php } ?>
                    <h4><?php the_title(); ?></h4>
                    <p class="small dark-gray"><?php echo get_post_meta($post->ID, 'rank_math_description', true); ?></p>
                </a>
            </div>
    
        <?php endwhile; else: ?>
            <p>Sorry, no posts matched your criteria.</p>
        <?php endif; ?>
    </div>
    <!-- END CATEGORY POSTS -->
      
</div>


<?php get_footer(); ?>

Then next I needed a non-intrusive way to display the tags on my posts that would allow for people to also click and search based on tag should they choose to.

This was much more straight forward though as I just needed to find the default manner WordPress themes typically use to show this information on the single.php file.

You only need to add the code below right after the end of the byline area.

Find:

<!-- END BYLINE -->

and you want to add on the code below:

	<div class="row align-items-center justify-content-center my-3 text-center small dark-gray">
				<?php echo get_the_tag_list('<p>Tags: ',', ','</p>'); ?>
        </div>

Now that you can display the tags you should go work on the description for each tag as this is added to the top of the page for the tag display. This will allow you to better add context to the tag and the reason why you wanted to make it valuable to your visitors.

Click on the WordPress Admin Menu -> Posts -> Tags

You will want to fill in the Description field so it displays when you show that tag field. An example will be with this tag Carbonate Theme.

Now you have a successful tag implementation on your Carbonate theme installation!

If you find this helpful please feel free to donate spare change (if you can) over here.

I love technology, I have plenty of technical side experience but never really thought of blogging as a way to earn an income. With everything that has gone on in the last couple years and the instability of the job markets I started to learn how to blog and build affiliate niche sites to add more income channels to give me the chance to break free from the financial chains that bind me and find real freedom!