Homepage/ Archive Customization

Hi there,

your home page is using WP Show Posts.
You can now use GenerateBlocks Query Loop block to build the exact design you want:

https://generateblocks.com

Of you can combine GB + GP and build your own Content Template, to replace the themes blog and archive designs:

https://docs.generatepress.com/article/block-element-content-template/

Yes, but we are not using block editor. We are using the classic editor as that suits our workflow. Can't this be achieved without Generateblock?

Thank you

Hi Rohan,

It’s possible with WPSP.

You’ll first need to create two Hook Elements.

One will have this code:

<div class="my-wpsp-inner-div">

and hooked to wpsp_before_header

The other will have this:

</div>

hooked to wpsp_after_content

Then, add this CSS through Appearance > Customize > Additional CSS:

#wpsp-394283 .wp-show-posts-inner {
    display: flex;
}

#wpsp-394283 .wp-show-posts-inner img {
    border-radius: 16px;
}

#wpsp-394283 .wp-show-posts-inner > * {
    padding: 10px;
}

Replace 394283 with your WPSP list ID.

Hope this helps!

wpsp_before_header is not there in the hook option

Hi there,

You can choose custom hook from the dropdown list, then enter the hook name.

Can't it be done with some simple css? This type of home screen https://www.droidthunder.com/

To achieve the look you’re going for, you’ll need to modify the structure of the WPSP list. This is why the 2 Hook Elements mentioned above is needed.

After the 2 Hook Elements are created to modify the structure of your WPSP list, we can use CSS to make it look like the one in your reference site.

Hope this clarifies!

Can you tell me what should I choose between these options? execute Shortcodes or execute PHP?

You don’t need to enable any of those. That code for the 2 hooks are just HTML.

What will be the display rule? I selected the front page and put the css. But nothing changed.

Yes, the display rule should be set to front page, if you want to target the WPSP lists in your front page. I can’t see the div added through the Hook though. Have you created both Hook Elements?

How are you adding the CSS?

Kindly let us know.

Yes i have added both hook elements and css on the customizer. Nothing changed so removed the elements

Before we move on - why do you use WP Show Posts on the home page ?
How would that differ from having just your latest posts being displayed ?

We just want our news articles to show on the homepage, not other categories. That's why using the WPSP