[Resolved] styling category pages

[John]

Hi,

I’m interested in styling my category pages to look different from one another. What I want to be able to do is have a unique background for each category, as well as information about the category and perhaps a picture at the top of the page, followed by posts in the category.

I’ve tried adding text, images and and html to the Category Description. Text shows up, but neither html nor images. This suggests I need to do something more drastic.

WPCodex suggests its possible to define different category templates:
https://codex.wordpress.org/Category_Templates

Is this an option with GP?

Here’s a quote from the webpage above:

>>
The Template Hierarchy specifies that WordPress will use the first Template file it finds in your current Theme’s directory from the following list:

category-slug.php
category-ID.php
category.php
archive.php
index.php
<<

I can’t find any of the first three items among the GP files, so I’m looking in archive.php. Here I read:

/* Include the Post-Format-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Format name) and that will be used instead.
*/

So… CONTENT-slug/ID.php NOT CATEGORY-slug/ID.php?

Does this mean I should create files in my child theme called (for example) content-category1.php ; content-category2.php ; content-category3.php?

Is this all I need to do, or do I have to make changes to my child theme functions.php? (And if so, what changes?)

Grateful – as ever – for any advice.

John

[Tom]

For the background images etc.. there’s a body class added by the category if you right click and inspect your page using your browser developer tools.

Here’s an example from our development category: http://www.screencast.com/t/EjbMrhJGRxA

So for that category I could do this:

body.category-development {
    background-image: url( 'URL TO MY CATEGORY BACKGROUND' );
}

Or the header element:

.category-development .site-header {
    background-image: url( 'URL TO MY HEADER BACKGROUND' );
}

And so on..

As for the category description, this might be the easiest method: https://en-ca.wordpress.org/plugins/allow-html-in-category-descriptions/

[John]

Thanks Tom!

The plug-in works beautifully.

I’m sure the code will help too – but where to put it? Should I create separate content-slug.php files for each of the categories and put the code in there?

Or can I just put this code into the functions.php of the child theme?

Cheers,

John

[Tom]

The code can be added in your style.css file in your child theme, or using a plugin: https://generatepress.com/knowledgebase/adding-css/

[John]

Hi Tom,

I’m still working to try to style my Category pages. Using the codes you sent me and after a bit of playing around I’m able to achieve some improvements, but there are still areas of the page I cannot figure out how to change. I’ve made a mock-up of the page I can get, contrasted with the sort of thing I’m trying to achieve. Can you look at it and tell me what I need to do?

The link is: http://www.nixon-wit.com/difficulties-with-uniqe-backgrounds-in-category-pages/

Many thanks,

John

[Tom]

You can remove the background color from the category heading like this:

.separate-containers.category .page-header {
    background-color: transparent;
}

As for the title, try this:

.page-header h1 {
    font-size: 40px;
}

[John]

Thanks Tom,

Much appreciated.

John

[Tom]

You’re welcome 🙂

[John]

Hello again,

Sorry, I thought your last had fixed my problems with this, but I’m still unable to put the background I want into the category description box at the top of the category page. This isn’t the header. In the inspector it is called header.page-header.masonry-brick

Neither this code

.separate-containers.category .page-header {
    background-color: transparent;
}

nor this

.separate-containers.category .inside-page-header {
    background-color: transparent;
}

seems to have any effect.

I’ve also tried

.separate-containers.category .page-header {
    background-image: url(http ETC);
}

Also without effect.

So what I want to do is, for each category, to put a unique-to-category background image in the description box

[Tom]

Each category will have a unique class in the <body> element. You’ll need to use a browser like Chrome, right click and click “Inspect” to inspect the body element for classes.

For example, if your category has an ID of 20, your code would be:

.category-20 .page-header {
    background-image: url( 'URL TO YOUR IMAGE' );
}

[John]

Many thanks for your patience and your help Tom.

That worked!

John

[Tom]

Happy to help 🙂

[Author]

Posts