- This topic has 13 replies, 2 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
May 1, 2018 at 8:34 pm #565080Danny
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 π
May 1, 2018 at 9:43 pm #565115TomLead DeveloperLead DeveloperHi there,
Which part are you specifically wanting to replicate? The post meta? Social share buttons?
May 1, 2018 at 10:51 pm #565133DannyHi 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 #566093TomLead 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; }
May 2, 2018 at 10:46 pm #566135DannyHi 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 #566952TomLead 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?
May 4, 2018 at 4:19 am #567189DannyThanks 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 #567889TomLead DeveloperLead DeveloperMy code above will only work if you have the date enabled – it looks like you have it turned off.
Let me know π
May 4, 2018 at 8:27 pm #567894DannyI 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 #567899TomLead 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.
May 4, 2018 at 8:46 pm #567917DannyI 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 #568277TomLead 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; }
May 5, 2018 at 6:10 pm #568550DannyThanks Tom, It worked perfectly π
May 5, 2018 at 8:01 pm #568596TomLead DeveloperLead DeveloperYou’re welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.