Style Archive Title & Description – Beginners Guide

In this tutorial for beginners, i’ll show you how easy it is to style your category archive headline & intro text.

Go to Posts > Categories > Category Name and click edit. Then you’ll need to scroll down to your Category Archive Settings.

Once you add a descriptive title and description, you can view the changes on the front end which will look something like this:

You can easily change the background color, font family, font size and font color using CSS in your child themes style.css file.

Lets use CSS code to change the background color from white to blue and the font color to white.

.archive-description {
    background-color: #21759B;
    color: #FFFFFF;
}

And here’s the result:

Looks like the title color could also be changed and while we’re at it, lets change the size of the title.

.archive-title {
    font-size: 3rem;
    color: white;
}

Here’s what the changes look like now:

Add Background Image

If you want to really make an impression, you can spend some time and search for background images and textures to add to your archive introduction.

Once you upload your image to your child themes images folder, you can then simply add CSS code to display your image.

Here’s the code:

.archive-description {
    background-color: #21759B;
    background-image: url(images/texture.png);
    color: #FFFFFF;
}

And here’s the result:

In the example above, i’ve added both a background color and image. The fallback color will display if for some reason your image doesn’t load.

Style Individual Archive Description

But wait! If we view all the other archive descriptions, they’re all styled the same way. How do we style them individually?

The Solution: Right click on the archive page you want to style and view the source code. Scroll down the code until you find the line of code which starts with body class and grab the category i.d or name.

You can use either:

category-best-plugins or category-154

So now we can add either one to the CSS code and only style that specific archive description.

.category-best-plugins .archive-description {
    background-color: red;
    color: yellow;
}

And the title using this code:

.category-154 .archive-title {
    font-size: 40px;
    color: yellow;
}

And here’s the result which won’t affect any of your other archives.

You can also add HTML links with your text, images and videos in your Archive Intro Text field.

More Ways To Style Your Archive Intro Area

• Add HTML Image Before Category Archive Posts