- This topic has 5 replies, 2 voices, and was last updated 6 years, 2 months ago by Tom.
-
AuthorPosts
-
January 7, 2018 at 6:41 am #465038Rob Cruz
Hello!
First of all, I’m loving this theme so far. Thank you much for providing us this amazing theme π
Usually, the problems I have or any customizations I want are just one google away. But it seems I can’t find any solutions for this one.
So I’m using the excerpt field on generating a custom excerpt from my blog post.
I’ve also added this code to have that “Continue Reading” link under it as per this thread’s instructions: https://generatepress.com/forums/topic/how-to-display-read-more-when-using-the-excerpt-field/
add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' ); function tu_excerpt_metabox_more( $excerpt ) { $output = $excerpt; $settings = wp_parse_args( get_option( 'generate_blog_settings', array() ), generate_blog_get_defaults() ); if ( has_excerpt() ) { $output = sprintf( '%1$s <a href="%2$s">%3$s</a>', $excerpt, get_permalink(), wp_kses_post( $settings['read_more'] ) ); } return $output; }
It’s working great so far but it seems the option “Display Read More as Button” doesn’t work when you do this. I’m pretty much sure I ticked it, but as you can see, it still shows as a bare link.
Also, I want to customize the button to make it full width. Basically, what I want is like of Brian Dean’s here: https://backlinko.com/blog — custom excerpt and a full width “Continue Reading” button.
How do I achieve this?
Thanks in advance!
Rob
January 7, 2018 at 9:28 am #465190TomLead DeveloperLead DeveloperHi there,
We just need to add the
button
class to the link element to achieve this.In that code, find: %3$s
And replace it with:
<p class="read-more-button-container"><a class="button" href="%2$s">%3$s</a></p>
That should do it π
Glad you’re enjoying the theme!
January 7, 2018 at 4:19 pm #465407Rob CruzThanks Tom!
Just implemented what you said above. I added these css to achieve the current look of it on my site:
read-more-button-container { float: none; text-align: center; width: 100%; } .button { width: 100%; border: 2px solid #51a9ab; border-radius: 3px }
I’m getting close to what I want.. But as you can see, the button exceeds its container. How do I fix this?
I’m not that good on these code thingy and I used siteorigin css plugin to help me generate those css codes.
Thanks π
January 7, 2018 at 8:25 pm #465484TomLead DeveloperLead DeveloperTry this:
.read-more-button-container { float: none; text-align: center; width: 100%; } .button { width: 100%; box-sizing: border-box; border: 2px solid #51a9ab; border-radius: 3px }
January 7, 2018 at 8:33 pm #465485Rob CruzNow it’s working perfectly!! Thank you so much, Tom!
This thread is resolved π
January 7, 2018 at 8:42 pm #465488TomLead DeveloperLead DeveloperYou’re welcome! π
-
AuthorPosts
- You must be logged in to reply to this topic.