Archived topic
Custom Read more button design with custom Excerpt
9 replies · Started by maxime on August 24, 2022
Hello,
I changed my theme to the Scribe one but I'm having an issue with the Read more button in the archive card.
I added a description through the custom Excerpt field in the post settings and then the Read more button disappear. I looked in the support and found that I can put it back with this PHP code, I added both. But I can't find a way to customize it with CSS, this buttons says "leer mas" (it is present for the 2 first post that have custom excerpt). This help didn't work and neither other post or documentation that I have read.
In case of and if it's easier I have 2 other buttons.
You can see the CSS I want from the third post that doesn't have a custom excerpt so for this one the button comes out good. This button says "seguir leyendo" Here is the CSS
.read-more{background-image:linear-gradient(to right,#0073aa 0,#33dd82 51%,#0073aa 100%);border-radius:50px;}
.read-more{transition:1s;background-size:500% auto;}
.read-more:hover{background-position:right center;color:#fff;text-decoration:none}And at last I tried to add a bloc button (this one says "Test") The CSS is almost perfect but the transition doesn't work, you can see the difference with the other one. Here is the CSS
.gb-button-97fc9af3{background-image:linear-gradient(to right,#0073aa 0,#33dd82 51%,#0073aa 100%);border-radius:50px;}
.gb-button-97fc9af3{transition:1s;background-size:500% auto;}
.gb-button-97fc9af3:hover{background-position:right center;color:#fff;text-decoration:none}So my question is can the button "seguir leyendo" appears when I have a custom excerpt? Or which of the other one can I use with the good CSS?
Thank you
Hi Maxime,
The second code is what you need:
https://docs.generatepress.com/article/activating-read-custom-excerpt/
After enabling the PHP code, the Read more button should appear.
Let me know!
Oh sorry because I had both there was a conflict, that's why I couldn't understand. So it appears right and I did the CSS with .read-more-button-container a.button
Just one more thing please, where can I change the text? Because it's not in the Archive card element, neither in the Blog personalisation.
Thank you.
It's using the theme's read more button, so you can change it at customizer > layout > blog > Read more label.
That's what I thought but it's not taking it into account :(
Please see the image attached.
That's weird, does it change in the customizer preview?
It changes correctly for the button without the custom excerpt but not for the button with the custom excerpt (the one that I added with the PHP). And I don't know where the "Leer mas" is coming from right now, although I had it in the previous theme (marketer) that I changed today. Would this has something to do with it ?
Ah I see, in this case, you'll need to modify the PHP code, replace the Read more with Seguir leyendo.
add_filter( 'wp_trim_excerpt', 'tu_excerpt_metabox_more' );
function tu_excerpt_metabox_more( $excerpt ) {
$output = $excerpt;
if ( has_excerpt() ) {
$output = sprintf( '%1$s <p class="read-more-button-container"><a class="button" href="%2$s">%3$s</a></p>',
$excerpt,
get_permalink(),
__( 'Seguir leyendo', 'generatepress' )
);
}
return $output;
}The Leer másis the direct translation from Read more.
Ahhhh I got it, I didn't think that translation would work from a PHP code but that's good to know :)
Thank you very much, I'm all set.
You are welcome :)
