[Support request] Blog post makeover

Home Forums Support [Support request] Blog post makeover

Home Forums Support Blog post makeover

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1543584
    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

    This is my site: Angst.dk

    #1543836
    David
    Staff
    Customer Support

    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;
    }
    #1544920
    Anders Nielsen

    Thanks David – i’ll try ๐Ÿ™‚

    This is my site: Angst.dk

    #1545677
    David
    Staff
    Customer Support
    #1548472
    Anders Nielsen

    Hi David

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

    And can it setup the the blog overview?

    https://wpshowposts.com/

    This is my site: Angst.dk

    #1549169
    David
    Staff
    Customer Support

    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.

    #1550358
    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?

    ๐Ÿ™‚

    This is my site: Angst.dk

    #1551549
    David
    Staff
    Customer Support

    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.

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