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

[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

[Tom]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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!

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Danny]

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

Any suggestion?

[Tom]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[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

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Danny]

Thanks Tom, It worked perfectly 🙂

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts