Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] How could I customize blog content layout like the example below

Home Forums Support [Resolved] How could I customize blog content layout like the example below

Home Forums Support How could I customize blog content layout like the example below

  • This topic has 13 replies, 2 voices, and was last updated 3 years ago by Tom.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #565080
    Danny

    Hi,

    https://www.cloudliving.com/seo-powersuite-review/

    This site using generate press, too and I would like to custom the layout similar to that. How could I do that?

    Thanks πŸ™‚

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #565115
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Which part are you specifically wanting to replicate? The post meta? Social share buttons?

    #565133
    Danny

    Hi Tom,

    I want to have author image, comments count, social share, category below title, breadcump above, author box & related post… also custom the width of sidebar, merge it with the main content area

    Thanks!

    #566093
    Tom
    Lead Developer
    Lead Developer

    It’s best if we do things one at a time. In this thread, we’ll handle the post meta.

    The social icons will need to be a plugin. Social Warefare is a popular one.

    Yoast SEO has breadcrumbs which you can add using GP Hooks.

    You’ll need a plugin for the author box and related posts as well.

    Ok, so the post meta..

    First, add this CSS:

    .byline img {
        display: inline-block;
        vertical-align:  middle;
        width: 40px;
        border-radius:  50%;
        margin-right: 10px;
    }
    
    .entry-header .comments-link {
        display: inline-block;
        margin: 0 10px;
        padding: 0 10px;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }
    
    .posted-on .updated {
        display: inline-block;
    }
    
    .posted-on .updated + .entry-date {
        display: none;
    }
    
    .posted-on .updated:before {
        content: "Last Updated ";
    }

    Then, add this PHP:

    add_filter( 'generate_show_comments', '__return_false' );
    add_filter( 'generate_show_author', '__return_false' );
    add_filter( 'generate_post_date_output', 'tu_custom_post_meta' );
    function tu_custom_post_meta( $output ) {
    	printf( ' <span class="byline">%1$s</span>',
    		sprintf( '<span class="author vcard" itemtype="http://schema.org/Person" itemscope="itemscope" itemprop="author">%4$s<a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></span>',
    			esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
    			esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
    			esc_html( get_the_author() ),
    			get_avatar( get_the_author_meta( 'ID' ) )
    		)
    	);
    
        if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
            echo '<span class="comments-link">';
                comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
            echo '</span>';
        }
    
    	echo $output;
    }
    #566135
    Danny

    Hi Tom,

    I added those code using customized wp for css and snippet code plugin for php, but didn’t know how to do next?

    I’m using your plugin wp show post for home page post showing also

    #566952
    Tom
    Lead Developer
    Lead Developer

    Ah, I thought you were using the standard GPP blog.

    WPSP would take a completely different set of PHP and CSS. Can you post that question within the WPSP forum (free or premium) and I’ll help out?

    #567189
    Danny

    Thanks Tom,

    Yes I’m using standard GPP blog, plus the plugin also, I will create question on WPSP forum (in WP.org right?)

    For the post grid for the blog page, how could I customize like this >> https://bit.ly/2HUs9Dk

    I have already made mine like this base on your document: https://bit.ly/2KyOmZq

    But I guess it would need some css, please help!

    Thanks
    Danny

    #567889
    Tom
    Lead Developer
    Lead Developer

    My code above will only work if you have the date enabled – it looks like you have it turned off.

    Let me know πŸ™‚

    #567894
    Danny

    I tried to turn on the date but didn’t work! Please check Tom > https://bit.ly/2KyOmZq

    Any suggestion?

    #567899
    Tom
    Lead Developer
    Lead Developer

    The code itself did work (showing your avatar etc..), there’s just not enough room for it.

    You could:

    a) Increase your container width
    b) Bring the columns to down to 2

    You’ll also want to turn off the author in Customize > Layout > Blog, as we’ve added it in our custom function.

    #567917
    Danny

    I did this: https://bit.ly/2KyOmZq, Something would make that better is reduce padding of inside-article and smaller the article title, also make the box with shadow like the example I send earlier. Could you help me some css, please!

    Thanks so much Tom

    #568277
    Tom
    Lead Developer
    Lead Developer

    Looks like you reduced the padding – looks good!

    As for the shadow and title, try this:

    .generate-columns .inside-article {
        box-shadow: 0 0 20px rgba(0,0,0,0.1);
        margin: 10px;
    }
    
    .generate-columns h2 {
        font-size: 18px;
    }
    #568550
    Danny

    Thanks Tom, It worked perfectly πŸ™‚

    #568596
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.