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

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

Home Forums Support How can I put something like this on my front page / homepage?

  • This topic has 18 replies, 4 voices, and was last updated 9 months ago by David.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
  • #1439007
    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:

    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?


    Customer Support

    Hi there,

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


    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?


    Customer Support

    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

    Customer Support

    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.


    Customer Support

    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 -->
    }, 15 );
    add_action( 'wpsp_after_content' , function() {
        <!-- Close WPSP Wrapper -->
    }, 15);


    4. Add the CSS listed here:


    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.


    Customer Support

    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.

    Customer Support

    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!

    Customer Support

    Glad you’ve figured out!

    Looks like David did include the color property in the first block of CSS here:

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.