SHOW CATEGORIES AND TAGS AS GRID PAGE

Hi Ilaria,

The most straightforward way to organise posts on category and tag pages into a grid would be with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

On my own test installation of Sela, I first looked at the CSS the theme used to organise child pages on parent pages with the Grid Page template. I then applied this to all archive pages (which includes category and tag pages) with the following custom CSS:

@media screen and (min-width: 1180px) {
    .archive .page-header {
        margin-left: 0;
    }

    .archive .sidebar-widget-area {
        display: none;
    }

    .archive .content-area {
        width: inherit;
        padding: 3em 3% 0;
        margin: 0 13.98%;
        float: left;
    }

    .archive .post {
        width: 334px;
        margin: 0 55px 0 0;
        max-width: 100%;
        float: left;
    }

    .archive .post .post-thumbnail {
        margin-left: 0;
        width: 100%;
    }

    .archive .post .post-thumbnail + .entry-header {
        margin: 0;
        padding-left: 0;
    }

    .archive .post .entry-body {
        padding: 0;
    }

    .archive .post .entry-meta {
        position: inherit;
        text-align: left;
        width: 100%;
    }
}

The above organised my posts into a grid on all screens that were 1180px in width or larger. Please note, the above also hides the sidebar on category and tag pages for simplicity.

You’re welcome to try the above CSS on your own site to see if it works for your needs. 🙂

Hi @ilariasupermami,

I tried the CSS you wrote me, and I’ve just done a couple of changes to show the right sidebar. It works when I have only 2 posts, but with more posts, the sidebar is on the bottom of the page. How could I change the code?

You could try setting the width on .archive .content-area to 700px. Let me know how that goes.

I have another question: is possible to set the same height for all the post? If not, how could I show only the image and the title for each post?

The post’s height depends on a few factors including the text within its excerpt and the length of its title. You can control the amount of text displayed within each post’s excerpt by using the more tag. If you’d like to only show the image and title for each post, then the more tag would be placed at the very top of your post’s editor.

I leave the code in my blog, so you can see it.

Thank you for including the code! For future note, could you make sure to surround any code you add in your forum replies with backticks? This formats the code so that it’s a bit more readable on the forum.

Thanks!

Yay! I’m glad you’ve got your tag and category pages looking as you wish now. 🙂

If any other questions come up then please feel free to start another thread.