[Resolved] How can I put something like this on my front page / homepage?

[Peter Paul]

Hi Team,

Sorry I forgot what it is called, but how can I put something like this on my front page or homepage?
You can see an example on these pages:
https://www.techspot.com/
https://thinkcomputers.org/

I am referring to the element that is just below the header of those pages.
It’s like a tile or masonry of posts, showing posts under a particular category.
Sorry I really forgot what it’s called.
I used to have one with my previous theme.

What’s the best way to implement it on GP, without affecting the speed much?

Thanks!

[David]

Hi there,

if you’re starting from scratch then you could Import Dispatch from our Site Library:

https://generatepress.com/site-library/#dispatch

[Peter Paul]

Hi David,

Not really starting from scratch.
I just need that portion or element.
Is it possible to extract or import just that portion/element?

Thanks,

[David]

Unfortunately not. And it takes a little work to setup. Can provide instructions if you need ?

[Peter Paul]

I see, instructions for importing from library? no need.
Do you have another solution or suggestion?
I’m thinking of using WP show post, but not sure if it’s possible with the free version

[David]

That is built with WP Show Posts.
I can walk you through the steps of creating it. Let me know,

[Peter Paul]

Hi David,

Please do so. I have a small idea, of using WP shows posts, since I used that on my side bar.
Kindly show me how.

Thanks!

[David]

Hope you’re sitting comfortably 🙂

1. Install WP Show Posts plugin – which you have.
2. Create a new list with the following settings:

4 posts per page
NO pagination
Columns: 1
Images: Center and above title
Content: Excerpt, Include title
Meta: Include terms, below title.

3. Add this PHP Snippet to your site:

add_action( 'wpsp_before_header' , function() {
    ?>
    <div class="wpsp-content-wrap">
    <!-- Openeing wrapper -->
    <?php
}, 15 );

add_action( 'wpsp_after_content' , function() {
    ?>
    <!-- Close WPSP Wrapper -->
    </div>
    <?php
}, 15);

https://docs.generatepress.com/article/adding-php/

4. Add the CSS listed here:

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

You only need Lines 189 to 350.

5. Create a new Header Element.
Add your WPSP Short code to the content.
In the Element Classes field add: wpsp-grid wpsp-card
Set your Display Rules to Front Page

[Peter Paul]

Thank you very much!

Well it’s not exactly like on the Dispatch, but I think I can edit the CSS from here.

Thanks again! (b^_^)b

[Peter Paul]

By the way, any idea how to change the font size of the title, and font color?

How can I target those in the CSS? It seems to affect all the titles including those outside the wp-show-posts area.

Thanks!

[David]

Awesome – first go ( almost )
I would change the WPSP title to a H2.
And you have some CSS that is already affecting the wp-show-posts-entry-title

You can style it specifically for the grid layout using: .wpsp-card .wp-show-posts-entry-title

Glad to be of help.

[David]

For the Header Grid you can do this – we can target the <a> element as its the one controlling the colors:

.wpsp-card .wp-show-posts-entry-title a {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}

and for Hover color:

.wpsp-card .wp-show-posts-entry-title a:hover {
    color: #eee;
}

[Peter Paul]

Thank you for that.
I was able to change the size and/or add a background color for the title.
But I can’t seem to change the color of the text title (blue).
Adding “color” inside the “.wpsp-card .wp-show-posts-entry-title” doesn’t seem to affect the title color.

[Peter Paul]

Never mind! I got it. 🙂
I should have included the “a”

Thanks again! Have a great weekend!

[Leo]

Glad you’ve figured out!

Looks like David did include the color property in the first block of CSS here:
https://generatepress.com/forums/topic/how-can-i-put-something-like-this-on-my-front-page-homepage/#post-1439650

[Author]

Posts