Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Slider of blogs at Homepage & Post Hero Layout

  • Dear GeneratePress Support Team,

    I hope this message finds you well. I am currently customizing my website using the GeneratePress theme and need your assistance with two specific features:

    Blog Slider: I would like to create a blog slider similar to the one shown in the attached image (Image1.png). The slider showcases the latest book summaries with the following features:

    Display of book cover images –
    Titles and read times for each book summary
    Navigation arrows for sliding through the content
    A responsive design that works well on both desktop and mobile devices
    also slider on mobile view should be same as the referred website

    Post Hero Section: I also want to design a post hero section like the one shown in the second attached image This section includes:

    A large book cover image on the left –
    The title of the book and a brief description on the right
    Author name, read time, categories, and additional tags below the description
    Could you please guide me on how to achieve these features using GeneratePress? I am open to using additional plugins or custom CSS if necessary.

    Thank you for your assistance.

  • Hi there,

    we don’t have a Slider option for Displaying Posts.
    For now you would need to use a dedicated Post Slider plugin to do that.

    The single post hero you can build using a GP Block Element – Page hero:

    Set the elements Display Rules Location to: Posts > All Posts

    Use the GenerateBlocks Plugin to build the layout and add the dynamic data.

    For the base layout you would create:

    Container Block #1
    ---- Container Block #2
    ---- ---- Container Block #3 Left column
    ---- ---- ---- Image Block
    ---- ---- Container Block #4 Right column
    ---- ---- ---- Headline blocks for title
    ---- ---- ---- Headline blocks for description ( Excerpt ?)
    ---- ---- ---- Container Block #5 for Post Meta row
    ---- ---- ---- ---- Button blocks for post meta

    Container Block #2
    Set the Sizing > Max Width to Global Max Width by clicking the blue globe icon
    Set the Spacing > Margin Left & Margin Right to auto
    Set the Layout > Display to Flex, switch to Mobile view and set the Display to Block

    Container Block #3 & Container Block #4
    Set the Sizing > Width to the % you require eg. 50% for each column or 40 / 60….
    Switch to Mobile view and set the Width to 100%

    GB Image Block
    In the GB Image Blocks settings activate the Dynamic Data and set the Content Source to Featured Image.

    Blocks inside the Right Column,
    Here you would need to add the headlines for the Title and Description ( Post Excerpt ? )

    Container Block #5
    Set the Layout to Display Flex and Flex Wrap to Wrap
    Within this container you can add the Button blocks and set there dynamic data to show the Post Author and the List of Terms.

    For the Reading Time you will need to create a shortcode to display that. See here:

  • Hi David,
    Thanks for earlier.
    I have created a single post element for my blog posts. –
    but I am facing some issues with it
    My content is not in the middle. If I see my blogs on a larger screen, it is shifting to the left side. It should be in the middle.
    Please help me with this and I am not into technical kinds of stuff and I also don’t have much code knowledge.


  • Edit your single post block element content template.
    And open the List View

    Expand the top Container Block and select its inner Container.
    Set the blocks Spacing -> Margin Left & Right to auto

    That will center that container for your.

  • Hi Devid, thanks, it worked!
    now i need Reading time in my single post element. –
    it should fetch the reading time automatically.
    please help me with this also as I mentioned earlier that I am not into technical kinds of stuff and I also don’t have much code knowledge.


  • 1. Add this PHP code to create a shortcode [reading_time] .

    add_shortcode( 'reading_time', function() {
        $post = get_post();
        $content = $post->post_content;
        $wpm = 238; // How many words per minute.
        $clean_content = strip_shortcodes( $content );
        $clean_content = strip_tags( $clean_content );
        $word_count = str_word_count( $clean_content );
        $m = ceil( $word_count / $wpm );
    	if($m < 2) {
    		$time = '<div class="reading-time"> 1 min</div>';
    	} else {
    		$time = '<div class="reading-time"> '.$m . ' mins</div>';
        echo $time;
        return ob_get_clean();
    } );

    Adding PHP:

    2. Add the shortcode [reading_time] via a headline block in your element.

  • How to add this PHP code exactly?
    Also, please elaborate on adding shortcode via headline block.


  • Hi there,

    How to add this PHP code exactly?

    This article provides methods on how to add the PHP:

    Also, please elaborate on adding shortcode via headline block.

    After adding the Headline block, just type in the shortcode name with square brackets, like this: [reading_time]

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