[Resolved] Custom Read more button design with custom Excerpt

[maxime]

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

[Ying]

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!

[maxime]

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.

[Ying]

It’s using the theme’s read more button, so you can change it at customizer > layout > blog > Read more label.

[maxime]

That’s what I thought but it’s not taking it into account 🙁
Please see the image attached.

[Ying]

That’s weird, does it change in the customizer preview?

[maxime]

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 ?

[Ying]

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.

[maxime]

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.

[Ying]

You are welcome 🙂

[Author]

Posts