How to Create Custom PHP Category Template?

[Tom]

So right now I’m seeing this: https://www.screencast.com/t/45UsajEm

You can reduce it more like this:

.category header.page-header {
    max-width: 750px;
    margin: 40px auto 40px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andres]

Hi Tom,

Thank you!! That did the trick.

This will apply to all custom PHP category pages, right?

Oddly, for some reason, if I input that CSS in Simple CSS, it has no effect. However, if I input it in Customizer –> Additional CSS, it works. There is other CSS uses in Simple CSS, and it works.

I don’t know if it has to do with using a child theme.

Thank you Tom, and have a good one.

Sincerely,

Andrés

[Tom]

The above CSS will apply on all categories. If you want to apply it to weddings only, you can do this:

.category-weddings header.page-header {
    max-width: 750px;
    margin: 40px auto 40px;
}

If it didn’t work in Simple CSS, it likely means there’s a CSS error in the CSS somewhere above it. You can run your CSS through a validator to check: https://jigsaw.w3.org/css-validator/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andres]

Hi Tom,

I ran the CSS test with all the additional CSS inserted in Simple CSS, and there were 6 errors.

I removed all the CSS, reran the test, and there were 4 errors

Screenshot of the CSS errors are below for reference.

6 Errors: https://prnt.sc/t78lif

4 Errors: https://prnt.sc/t78lti

This is all the CSS there is. It’s all that you’ve sent (thank you!!).

.full-width-content .entry-header {
    text-align: center;
}

.contained-content .entry-header {
    text-align: center;
}

.entry-header {
    text-align: center;
}

.page-header h1 {
    text-align: center;
}

body .wpsp-card.wpsp-overlay .wpsp-content-wrap {
    grid-column: 1 / 6;
    grid-row: 3 / 6;
    text-align: center;
}

body #wpsp-568 .wp-show-posts-inner:hover .wp-show-posts-image .wp-show-posts-image-overlay {
    background-color: rgba(0,0,0,0.4) !important;
}

body .wpsp-overlay.wpsp-ov-style-two .wp-show-posts-inner:hover {
    -webkit-transform: translateY(0;
    transform: translateY(0);
}

.category header.page-header {
max-width: 1200px;
margin: 25px auto 30px;
}`

If I remove body .wpsp-overlay.wpsp-ov-style-two (…), the CSS for the header on the category page works (the last CSS item). It looks like the issue might be with: body .wpsp-overlay.wpsp-ov-style-two (…),

After rerunning the CSS test, 2 of the 6 errors are resolved. Here’s a screenshot with the problematic CSS removed:

CSS Item Removed: https://prnt.sc/t78oq1

I confirmed CSS body .wpsp-overlay.wpsp-ov-style-two (…), was the same as the CSS provided.

If I remove all the CSS and insert only body .wpsp-overlay.wpsp-ov-style-two (…), there are still the 2 more errors than when running the CSS test with no additional CSS inserted.

Sorry for the trouble.

Thanks and have a good night.

Cheers!

Andrés

[Tom]

I think it’s this: -webkit-transform: translateY(0;

Can you try adding the closing ) before the ;?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Andres]

Hi Tom,

That did it.

Thanks. I’m going to mark this topic as resolved and write about how I created a custom category PHP template for other to follow who want to do the same and who don’t know how.

I’ll post it the support forum for you to review at your leisure to make sure there are no issues.

Thank you and have a good day.

Cheers!

Andrés

[Tom]

Thank you! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts