How to Automatically Display titles and description on Category and Tag Archives – WordPress Webmaster Tips

On Crunchify we are using Genesis Framework and Eleven40 child theme. So far we have done numerous enhancements and added number of hooks. As I believe, child theme Eleven40 is missing one of the major functionality of Search Engine Optimization (SEO) goal and which is by default add Category Name and Description for each category page.

Also, it’s good user experience to show Category Title and Description for better readability and clarify. In order to achieve this follow below steps:

Let’s get started:

Step-1

• Go to Posts -> Categories
• Provide Category Name
• Provide Category Slug
• Provide Category Description

Step-2

NOTE: If you are NOT using Genesis Framework then go to step-3. This step is only for Genesis WordPress users.

Add below code to your Genesis child theme’s functions.php file.

// This is required to remove extra <p> tag added to description by WordPress
remove_filter('term_description','wpautop');

// Add Title and Description for WordPress category page
function crunchify_category_header() {
if ( is_category())  {
		echo '<div class="crunchify-archive-heading"><h1><div class="crunchify-title-class">';
		echo single_cat_title() . ' Archives...';
		echo '</div></h1>';

		echo '<div class="crunchify-description-class">';
                echo term_description();
		echo '</div></div>';
	}
}
add_action( 'genesis_before_loop' , 'crunchify_category_header' );

Step-3

NOTE: This is NON Genesis WordPress hook. For Genesis Framework User move to step-4.

Now before you implement this in your non Genesis theme, make sure if you are missing this functionality or not :). If you already see Category Title and Description then you are all set.

In case you are missing Category Title and Description follow below steps:

• Go to your theme’s folder
  • Mainly it’s /wp-content/themes/theme_name
• Open archive.php OR category.php
• Find the line of code which contains single_cat_title function

• Replace above line with below lines to your theme. As there are thousands of WordPress themes out there in repository, you may need to modify code slightly as per your need.
• NOTE: Be careful before saving file and make sure there is no PHP error otherwise you may break your theme (White blank page on site error).

<?php if (is_category()) { ?>
	echo '<div class="crunchify-archive-heading"><h1><div class="crunchify-title-class">';
	echo single_cat_title() . ' Archives...';
	echo '</div></h1>';

	echo '<div class="crunchify-description-class">';
        echo term_description();
	echo '</div></div>';	

<?php /* ..... make sure you don't break php page :)  */

And you should see Category Title wrapped inside H1 HTML tag followed by Description.

Step-4 Styling Category and Tag descriptions

Add below code to your theme’s style.css file to beautify Category Title and Description section.

.crunchify-archive-heading{
    background-color: #fff;
    margin: 0px 5px 40px 5px !important;
    overflow: hidden;
    padding: 25px 40px 5px 40px;
    -webkit-box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    -moz-box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    border: 1px solid #ccc;
    border-radius: 30px;
    border-bottom-right-radius: 0;
}
.crunchify-title-class{
    font-size: 24px;
}
.crunchify-description-class{
    font-size: 14px;
    padding: 5px 0px 25px;
}

Above tips will work if you have below questions too:

Bonus Advantage:

This suggestion will also fix Google and Bing SEO <h1> tag missing error too which happened in my case by wrapping Category Title around <h1> HTML tag

If you want to add title and description for all TAGs then just replace if ( is_category()) with if ( is_category() || is_tag()).