- This topic has 13 replies, 2 voices, and was last updated 4 years, 1 month ago by
Tom.
-
AuthorPosts
-
May 1, 2018 at 8:34 pm #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.2GP Premium 1.6.2May 1, 2018 at 9:43 pm #565115Tom
Lead DeveloperLead DeveloperHi 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-developmentMay 1, 2018 at 10:51 pm #565133Danny
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!
May 2, 2018 at 9:28 pm #566093Tom
Lead DeveloperLead DeveloperIt’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-developmentMay 2, 2018 at 10:46 pm #566135Danny
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
May 3, 2018 at 8:55 pm #566952Tom
Lead DeveloperLead DeveloperAh, 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-developmentMay 4, 2018 at 4:19 am #567189Danny
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
DannyMay 4, 2018 at 8:18 pm #567889Tom
Lead DeveloperLead DeveloperMy 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-developmentMay 4, 2018 at 8:27 pm #567894Danny
I tried to turn on the date but didn’t work! Please check Tom > https://bit.ly/2KyOmZq
Any suggestion?
May 4, 2018 at 8:29 pm #567899Tom
Lead DeveloperLead DeveloperThe 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 2You’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-developmentMay 4, 2018 at 8:46 pm #567917Danny
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
May 5, 2018 at 9:32 am #568277Tom
Lead DeveloperLead DeveloperLooks 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-developmentMay 5, 2018 at 6:10 pm #568550Danny
Thanks Tom, It worked perfectly π
May 5, 2018 at 8:01 pm #568596Tom
Lead DeveloperLead DeveloperYou’re welcome π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.