Magazine Grid from Dispatch on another GP Theme – no success, hooks added

Hi there,

the CSS you need is here:

https://gist.github.com/diggeddy/9e77109f4dc80d858074282b2ae2f491#file-dispatch-gp-site-css-L189

Line 189 to 350.

Then follow these steps:

1. create a WPSP List
Set it to show 4 posts per page
NO pagination
Columns: 1
Images: Center and above title
Content: Excerpt, Include title
Meta: Include terms, below title.

2. create a new Header Element.
Add you WPSP Short code to the content.
In the Element Classes field add: wpsp-grid wpsp-card
Set your Display Rules to wherever you need it.

Hello David,

Thank you! I followed your steps and it worked… partially. I set Display Rules for Entire Site just for a test and it seems like it shows everywhere but Blog page.

On the other hand, in the original theme it works on the page that shows latest posts. Any ideas why?

Hi there,

What hook are you using?

Hi,

Thank you for that question, Tom. It turned out it was my mistake – I created a new hook after David's response and did not disable the old one that was set to the Blog page. Soon after, it worked! Thank you for solving the problem!

BTW Is there a way of using that grid that shows 4 newest post together with a Blog page (set in Wordpress Reading Settings as a Posts Page) without duplicating those four in a grid? Or is it better to leave Posts Page blank and fill up the rest of the posts using another WPSP list? Any disadvantages of the latter?

Thank you for your help.

You can set it to display on the Blog / Frontpage ( if set to display latest posts).
However, when displaying the Latest Posts in the wpsp grid - eliminating the duplicate posts from showing in the blog can be problematic with pagination.

The best method i find is to create a 'featured' category for the posts you want displayed in the Grid and then exclude that category from the blog:

https://www.wpbeginner.com/wp-tutorials/how-to-exclude-a-category-from-your-wordpress-homepage/

Thank you for that tip, I did not know about that possibility. I will look into that!

I customized the grid to my liking and it's working perfectly! The last thing I'm trying to figure out is how to add margin/white space between the grid in desktop view.

Thank you.

Try adding this CSS:

.wpsp-grid.wpsp-card article {
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-color: #fff;
}

Thank you David!

You're welcome