[Support request] Blog post makeover

[Anders Nielsen]

Hi

I need a redesign of the blog posts and and the blog in general.

What is the best way doing this?

Using the elements or a childtheme and rebuild from the start?

I have inserted a post-link to the design I’m trying to do

[David]

Hi there,

The post hero could be done with the Elements module (e.g Header Element) and some Custom code.
I would do something like this:

1. Create a new Header Element
2. Add this to the Header Element content:

<div class="hero-grid">
    <div class="hero-image">
        {{custom_field._thumbnail_id}}
    </div>
    <div class="hero-content">
        <span class="date meta">Published on: {{post_date}}</span>
        <span class="category meta">{{post_terms.category}}</span>
        <h1>{{post_title}}</h1>
        [page_hero_excerpt]
    </div>
</div>

3. Set Display Rules to Entire Posts.

4. Now we need to add a PHP snippet to create our post excerpt shortcode [page_hero_excerpt]:

function db_page_hero_excerpt() {
    ob_start();
    global $post;
    if ( has_excerpt( $post->ID ) ) {
    ?>
    <div class="page-hero-excerpt">
        <?php echo the_excerpt(); ?>
    </div>
    <?php
    }
    return ob_get_clean();
}
add_shortcode( 'page_hero_excerpt','db_page_hero_excerpt' );

5. To set the size of the Featured Image that is pulled into the header element you can add this PHP Snippet:

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'large';
} );

You can change large for any registered attachment size, without that filter it will default to medium

6. Now some CSS to make the 2 column grid on desktop and style the elements:

@media(min-width: 769px) {
    .hero-grid {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
    }

    .hero-grid>div {
        flex: 1 0 50%;
        padding: 40px;
    }
}

.hero-grid .meta {
    display: block;
}

.hero-grid>div.hero-content {
    padding: 30px;
}

[Anders Nielsen]

Thanks David – i’ll try 🙂

[David]

Let us know!

[Anders Nielsen]

Hi David

I found this plugin.. is it yours at generatepress?

And can it setup the the blog overview?

https://wpshowposts.com/

[David]

Yes, WP Show Posts is also created by Tom.
Its designed to display post lists on static pages. It is how the Dispatch Sites home page is built:

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

Although you can replace the Blog page and Taxonomy archives ( see here ) with WP Show Posts, i personally only use it on static pages, and style the GP blog to match. aka how Dispatch works.

[Anders Nielsen]

ok, look interesting… my only concern is, the update frequency.. it’s been updated recently – but two years between updates?

Will the plugin be at your focus in the future?

🙂

[David]

WP Show Posts has taken a lower priority in our development stack. Mainly because it did such a good job when it was first conceived. There are plans for updates, they will never as frequent as GeneratePress and GenerateBlocks, as there isn’t a great deal of improvements to be made. The focus will be a Block for the plugin.

[Author]

Posts