Archived topic
"Display Read More as Button" Doesn't work on a custom excerpt...
5 replies · Started by Rob Cruz on January 7, 2018
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
Hi 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!
Thanks 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 :)
Try 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
}Now it's working perfectly!! Thank you so much, Tom!
This thread is resolved :)
You're welcome! :)
