How to Display Your WordPress Posts in a Grid Layout

In this article I’m gonna show you how you can set up your website in a grid layout format. This script style format is actually perfect for photographers and anyone who wants to show off their portfolio on their website.

To get this on your site just go to your dashboard head over to plugins add new.

In the search box we want to put in postgrid and hit enter to search for it. This is the one we want so we’ll install

and then we’ll activate it. Click activate.

Alright now that we’ve installed that we need to go ahead and create a post grid. So we’re gonna go to post grid, new post grid and we’ll fill out the information.

So we’ll go through each of the tabs and we want to query the post.

We want to just do the posts post posttype if you have a portfolio or particular custom post type then that will show up here and you could choose that. I’m gonna use post and I only want to show the ones that are published

and we’ll show about 10 per page you can exclude any of the IDs if you want,

and here you can either do it in ascending meaning oldest or descending meaning the most recent posts. We’re gonna do descending and then you want to order by however, random, we’re gonna do by date.

Next thing we want to look at is the layout and this is what it will look like.

You can choose from any of these and you see what it looks like when you change it. For me I’ll choose flat.

Same thing with the different skins. These are how it acts when somebody clicks on it. You see there’s nothing there flip that will flip when somebody hovers over that. You see this one and how that changes and then just how that looks all around. I’ll use the flip layout

and then under layout settings.

This is what you want to change if you go to your site and things aren’t quite looking right, you want to adjust these.

 

Everything looks good for me. And navigation that’s at the bottom if you want to show the pagination.

 

Alright now that I have all that done I actually want to click Publish on there.

And then I want to go back to the shortcodes, make sure I’m there and we’re gonna grab this shortcode here

and now we want to go and create a page that we’re going to put this on.

And if you want this as your homepage I’ll show you how to do that as well. We’ll do portfolio, add the grid and we’ll hit publish.

We’ll see what it looks like in action.

And this is what it will look like if you don’t have a featured image already picked out. This is how mine is showing up. To get that as your home page back into the dashboard and under Settings > Reading

you want your front page to be what we just created which was the portfolio.

Now when I visit my site that’s the main page.

Obviously I’ll want to tweak this to make it look a little bit better for what I’m doing but now you have a grid layout on your site.

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Пролистать наверх