In this tutorial, I’ll show you how you can add HTML to a category description in WordPress. This solution uses a plugin, so read on to learn how!
What is the Category Description in WordPress?
In WordPress, categories are a way of grouping content together under the same umbrella.
For example, on SitesMonster, I have two categories:
Each category has its own description that is displayed on the category page.
For example, under the tutorials category, I’ve written:
By default, WordPress does not allow you to add HTML to the category description. However, there are two ways of doing so.
Download a Plugin to Add HTML to a Category Description in WordPress
This is by far the easiest and quickest solution. However, you’ll be adding another plugin to WordPress, which isn’t neccesarily a bad thing.
However the more plugins you install, the more plugins you need to keep updated, and the more dependant you are on someone else to keep your WordPress site afloat and working.
Having said that, most WordPress sites run on multiple plugins, and so it’s perfectly normal to install a plugin to solve a problem.
Download, install, and activate the Allow HTML in Category Descriptions plugin.
Once that plugin is installed, navigate over to your Categories within WordPress and edit one of them.
Now you can paste HTML code inside the category description without WordPress stripping it out (like it does by default!)
Give it a try using the example HTML below:
<h2 style="color: red;"> Hello, this is the best WordPress category on the entire planet! </h2>
If the category description is red, then you know the plugin has worked.
Let’s explore the second option, which is a little more advanced and requires that you have access to your WordPress theme’s code.
Edit the Category.php WordPress Page
I’ve custom-built the SitesMonster theme myself, and so I can add HTML to the category description in WordPress manually by editing the theme’s category.php page.
Open up your theme’s category.php page in your favorite text editor or IDE.
Open category.php, and now you’re free to add whatever HTML you want to the description, like so:
<?php get_header(); ?> <main role="main" class="pt-5"> <section class="jumbotron d-flex justify-content-between align-items-center hero-banner"> <div class="container"> <div class="row"> <div class="col-12 col-lg-6 offset-lg-3 text-center"> <h1 class="hero-text"><?php $cat = get_the_category(); echo $cat->cat_name; ?></h1> <h2 style="line-height: 1.6;" class="pt-0 pb-0 mb-0 no-underline"> Hello, this is the category description! </h2> </div> </div> </div> </section> <div class="album mt-5 pb-5"> <div class="container"> <div class="row"> <?php include('Components/category-all-posts.php'); ?> </div> </div> </div> </main> <?php get_footer(); ?>
And that’s it! One simple and one advanced tutorial to add HTML to a category description in WordPress.
If you have any questions, leave a comment below! Until next time!