[Resolved] Showing same post grid layout as in default archive/index

[sirlouen]

How can I show the same layout as in archive/index for a list of WP_query’d blog posts in a different part of the site?

I’ve noticed that by using the default “content” template part as suggested by function generate_do_template_part it is not shown the same way. For example: the featured images are not even shown in “content.php”

What I’m missing? Where are the template parts actually are in Generatepress?

[sirlouen]

I think I’ve found the issue:

generate_post_image is hooked to generate_after_entry_header with the conditional
not “is_singular” and not “is_404”, which means that replicating this content template won’t work either for 404 or post/pages

Default imported theme blog structure doesn’t seem to be meant to be replicated outside archives/blog pages unfortunately, which is a drawback because it looks pretty cool

I’ve tried Tom’s WP Show Posts short code but the look is not that awesome…

WP Show Posts 3 column structure:

LH Consulting’s Broadcast GP template content 3 column structure:

PS: Probably with WPSP Pro I could do the trick… but hoped I could replicate it via code/templating.

[David]

Hi there,

when you say in a different part of your site – is this a separate Archive page or within the content of a page/post ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sirlouen]

Within the content of a page/post

[David]

In that case i would recommend the WPSP plugin – the Pro version has more styling controls, and a fancy card feature:

https://demos.wpshowposts.com/cards/

Or i am more than happy to provide you some CSS to make the free version match your existing site styles

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sirlouen]

Yes I was thinking that WSPS Pro could make this happen (for example, that featured post in the first position), but I don’t want to invest more atm.

In fact, I see that most of this blog functionality and styling is provided by Blog premium module, not generatepress itself and profiled by LH Consulting’s Broadcast customization.

I think this is a dead end on my journey to copy/paste replication of the blog page inside a page.

[David]

As i said i am happy to provide some CSS to style the WPSP Free version to match. If you want to set up a test page with the WPSP in place and share me a link ill take a look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sirlouen]

Ok David, here I provide you the access data

Main static page with blog posts based on WSPS: https://demo.ponoi.me/
Blog posts based on LH Consulting’s Broadcast template: https://demo.ponoi.me/blog/

Looking forward to hearing from you
Regards

[David]

Lets do some future proofing first. By adding a Wrapper around the WPSP post content. This way if you want to add more content to the Post eg. excerpt, terms etc. they will keep the card styling.
To do this you need to create 2 x Hook Elements:

https://docs.generatepress.com/article/hooks-element-overview/

First Hook
Title: WPSP Open Content Wrapper
Content:

<div class="wpsp-content-wrap">
<!-- Openeing wrapper -->

Note: when you add the HTML to the hook it will auto add a </div> – you must delete that.
Hook: Custom Hook –> Enter in the field provided: wpsp_before_header
Priority: 15
Display Rules: Entire Site

Second Hook
Title: WPSP Close Content Wrapper
Content:

<!-- Close WPSP Wrapper -->
</div>

Hook: Custom Hook –> Enter in the field provided: wpsp_after_content
Priority: 15
Display Rules: Entire Site

Let me know once thats setup so i can then work on the CSS.
If you want to display the Read More button, can you enable that in your WPSP list.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sirlouen]

Hello David
Done, two hooks and Read More button included

[David]

Now add this CSS:

/* post card style */

.wp-show-posts-columns .wp-show-posts-inner {
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    transition: all 0.2s ease-in;
    transform: scale(1);
    box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
}
.wpsp-content-wrap {
    padding: 0 30px 20px;
    background-color: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Heading style */
.wp-show-posts-entry-title a,
.wp-show-posts-entry-title a:hover {
    color: #00253e;
}

/* Button Styling */
.wpsp-read-more {
    display: block;
    text-align: center;
    margin-top: auto;
}

a.wp-show-posts-read-more, a.wp-show-posts-read-more:visited,
a.wp-show-posts-read-more, a.wp-show-posts-read-more:hover {
    color: #00a390;
    background-color: #ffffff;
    font-size: 17px;
    line-height: 1.5em;
    padding: 10px 20px;
    border-width: 1px;
    border-style: solid;
    border-color: inherit;
    border-radius: 3px;
}

a.wp-show-posts-read-more:hover {
    color: #000;
}

/* Hover effects desktop only */

@media (min-width: 769px) {
    .wpsp-read-more {
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .wp-show-posts-inner:hover .wpsp-read-more {
        opacity: 1;
    }
    .wp-show-posts-columns .wp-show-posts-inner:hover {
        transform: scale(1.01);
        box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
    }
    .wp-show-posts-single.post:first-child {
       width: 66.666%
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sirlouen]

Nice CSS, for some reason I did not receive the notification from the last update 🙁
How would you make the first element more prominent compared to the others like in the LH Consulting’s Broadcast customization

[David]

Just updated the CSS above to include that 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[sirlouen]

Looks great.
I think this does the trick.
Thanks for the support.

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts