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.

genesis category archive with added styles

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.

edit category description with TinyMCE editor

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

category archive description styled

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

genesis category archive settings

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

gensis category archive settings

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.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

5 responses to “Add An Image to WordPress Category Archive Description”

  1. Åsa says:

    Hey! Handy little trick :) I´m using genesis and just have a question; if the text I put to the left of the image is not “big” enough the content below aligns left of the image, not so pretty, how do I set the “background” to wrap the image too? I tried using and but it didn´t work :) any ideas?

    Thanks

    kr,

    Åsa

    • Marcy Diaz says:

      Thanks for your comment, Asa. Your code did not come through the comment, so I’m not really sure what you are asking.
      If it’s that your content is moving up into the category description, you can try this:
      .archive-description {
      background-color: #000;
      color: #fff;
      clear: both;
      overflow: hidden;
      }

  2. Ann says:

    Useful – simple to follow and very clearly explained. Thank you!

  3. Ruppe says:

    Than Ya Much! Worx like a charm… it’s older and says it hasn’t been tested for some time, but works better than the first two I tried in the normal plugin search when logged into wordpress…

Leave a Reply

Your email address will not be published. Required fields are marked *