Customizing category pages?

[Mike]

Hello
Is there a way to customize the category pages to change how the posts are displayed/

Similar to this? https://packhacker.com/packing-list/

I have WP Show Posts Pro and would like how to integrate my short code into the category page

Thanks!

[David]

Hi there,

Category pages built using WP Show Posts is possible – this document explains how:

https://docs.wpshowposts.com/article/use-static-pages-as-category-archives/

However, unless you REALLY need to make them editable pages it would probably be just as easy to style the GP Blog with some CSS. Let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike]

Hmm it might be easier to style with CSS

[David]

If you want to set up your Blog and share me a link i can run through the CSS.
You can edit your original topic and use the Site URL field to share the link privately.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike]

done thanks

[David]

Just to be clear we are talking about the theme archives ?
eg.site_url.com/category/japan-culture/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike]

or site_url.com//tokyo-districts/

i think i removed the category base, so it wont say category

[David]

Can you enable the Read More button and set the number of columns in Customizer > Layout > Blog

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mike]

ok done

[David]

So you will need to add some Separating Space in Customizer > Layout > Container.
And i would recommend less Columns as 4 ( and even 3 ) are little squeezed on archives with sidebars.

This is the CSS:

.generate-columns-container .post-image {
    margin: -20px -20px 10px -20px !important;
}
.generate-columns-container .post-image img {
    width: 100%;
}
.one-container:not(.page) .generate-columns-container .inside-article {
    padding: 0 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}
.generate-columns-container .read-more-container {
    margin-left: -20px;
    margin-right: -20px;    
    margin-top: auto;
}
.generate-columns-container .read-more-container a {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.one-container:not(.page) .generate-columns-container .inside-article, .entry-summary {
    display: flex;
    flex-direction: column;
    flex: 1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts