Add An Image to WordPress Category Archive Description

Most WordPress themes now add category descriptions to the category archive pages, if you fill in the Category Name and Description fields. This tutorial shows you how to add images and other HTML to category archive descriptions for the Twenty Fourteen theme and for Genesis child themes, because it’s a bit different.

Twenty Fourteen Theme

By default, the Category Description is a text box, and the HTML allowed by WordPress is limited. For example, you can add links, bold, and italics, but not much more. If you want to add an image, for instance, you would need to remove the filter wp_filter_kses in your functions.php. But for most of us, it’s easier to just use a plugin to add a rich text editor to the category description. There are quite a few plugins to help with this; Rich Text Tags is one. It adds the TinyMCE editor, and also works with custom taxonomy.

You can add text and images just like you do in a normal post. I just used the Add Media button to add a left-aligned thumbnail-size image to my category description.

Steps for Adding a Category Description with Image

1. Use Plugins > Add New to Search for, Install, and Activate “Rich Text Tags”.
2. Click on Posts > Categories.
3. Click on the category that you want to add a description.
4. The category title will already be present in the Name Field.
5. The Description field is now the TinyMCE editor.
6. As usual for any post edit screen:
   • Add your description text
   • Add links or any other styling
   • Place your cursor at the beginning of the text.
   • Click the Add Media button.
   • Choose or upload your image.
   • Under Attachment Display Settings, choose Alignment > Left and Size > Thumbnail.
   • Insert into Post.
7. Click the Update button on the Edit Category screen.

Add Some Styles to Archive Header

Now you have an image added to your category archive page. You can add a few styles to make your archive header stand out. You can give the archive header a black background, and change the text color to white, and add some padding.

/* Custom CSS for Category Description */
.archive-header {
	background-color: #000;
  	overflow: hidden;
    padding: 30px;
}

.archive-title,
.taxonomy-description {
  color: #fff;
}

Genesis Sample Child Theme

The Genesis child themes have their own Category Archive Settings which allow other HTML tags like images, so you don’t need to use a plugin. You can see Use Page TinyMCE Editor to learn how to add an image to your category archive description without knowing HTML.

Steps for Genesis Category Archive Settings with Image

1. Open Page > Add New. While you are in the Visual tab, add your text, links, and image, as you always do.
2. Click on the Text tab; you will see the HTML for your image, text, and link.
3. Select all of it, and Copy.
4. Then click on Posts > Categories and scroll down to the Category Archive Settings.
5. Paste what you just copied into the Archive Intro Text box.
6. Add a title to the Archive Headline box.
7. Genesis child themes also have Theme SEO Settings for the categories that you can also fill in.

Add Some Styles to Genesis Category Archive Description

Genesis themes already style the archive description, but if you want to change yours, here’s some CSS that you can add to your Custom CSS Editor to get the look at the top of this post.

/* Custom CSS for Genesis Category Archive */
.archive-title {
	color: #fff;
}
.archive-description {
	background-color: #000;
	color: #fff;
}

Now you can add some interest to your category archive descriptions, so they stand out a bit.